could you please tell me why I am not able to navigate one page to another on button click .
I do like that
var loginCntrl=function($scope,$location){
$scope.testClick =function(){
alert('sss');
$location.path("/no");
}
$scope.name="naveen";
$scope.lastname="sharam";
$scope.fullname = function() {
return $scope.firstname + $scope.lastname;
};
}
here is plunker
http://plnkr.co/edit/gQcXe0Njvx6Iviu8Fjep?p=preview
I want to go on second page .
Thanks
When using ui-router you should be using $state to transfer from page to page. You should inject $state into your controller, then you can use $state.go('appaa') to transfer to that state.
See https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options for more information.
Not that much clear your question. Might you are try to make single page app using AngularJS.
We can create many HTML pages and call in single page without refreshing the page using AngularJS $routeProvider (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider).
Find the below Example
1) Create three html pages home.html, about.html, services.html and save in 'pages' folder.
2) Create JS and add below script and save in 'js' folder (js/script.js).
var shanidkvApp = angular.module('shanidkvApp', ['ngRoute']);
// configure routes
spaApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html'
})
.when('/about', {
templateUrl : 'pages/about.html'
})
.when('/services', {
templateUrl : 'pages/services.html'
});
});
3) Create a index page and call angular.min.js, script.js
<!DOCTYPE HTML>
<html ng-app="spaApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>AngularJS Routing</h1>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<div class="contentwrap" ng-view>Loading...</div>
</body>
</html>
Download working example from Github
Related
I am trying to create a single page application demo for practice.I have stored all three html files in same folder. I tried to give whole path of pages.I tried giving container ng-view /ng-view. I am using brackets editor for this. Change in url can be seen but it is not displaying contents from html pages Login.html and About.html in container ng-view.Please help.. my code is here:
<!DOCTYPE html><html><head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider)
{
$routeProvider
.when("/", {
templateUrl : "/Index.html"
})
.when("/red", {
templateUrl : "/Login.html"
})
.when("/green", {
templateUrl : "/About.html"
});
});
</script>
</head>
<body ng-app="myApp">
<ul>
<li>Main</li>
<li>Red</li>
<li>Green</li>
</ul>
<p>Click on the links.</p>
<p>This example uses the ng-view directive as an attribute to a DIV element.</p>
<div ng-view> </div>
</body>
Probably a problem with the relative paths that was supplied to "templateUrl".
Try to change to "template" and just add a simple Test - page name
element for each page.
If you can see all the pages - that means that the problem is in the relative paths you proved to templateUrl.
and maybe try to put the "/" route at the end (i don't remember in angular 1.x but in angular 2+ the order matter).
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
started out playing with angular today. So totally noob with the issue. I've found tons of similar questions but nothing seems to help so I decided to try with my own question.
My problem is with routing. I have two views (or partials). My first view (default) loads nicely when I browse to my page. When clicking the link that should open my second view the URL changes but nothing happens. If I then hit browser refresh button the view loads.
Index page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="js/angular_route.js"></script>
<script src="js/angular_animate.js"></script>
<script src="js/angular_cookies.js"></script>
<script src="js/app.js"></script>
</head>
<body style="padding:10px;" ng-app="rispa">
<div ng-view></div>
</body>
</html>
app.js
var rispa = angular.module("rispa", ['ngRoute', 'ngAnimate']);
rispa.config(function ($routeProvider) {
$routeProvider
.when('/welcome',
{
controller: 'rispaController',
templateUrl: 'partials/welcome.html'
})
.when('/accounts',
{
controller: 'rispaController',
templateUrl: 'partials/accounts.html'
})
.otherwise({ redirectTo: '/welcome' })
});
rispa.controller('rispaController', function($scope) {
$scope.title = "Home Page";
});
welcome view(default)
<div class="container">
<h1>Welcome!!!</h1>
get accounts
</div>
accounts view
<div class="container">
<h1>accounts</h1>
back to welcome
</div>
I've got a WAMP server on Windows 10 where I run the app. I also tried to publish to a azure webapp but the view did not refresh there either. I had to click the browser refresh button so it shouldn't be a web server issue...
Working Plunker: http://plnkr.co/edit/aCpOumYzy94ATMXiA5KR?p=preview
The routing has been set up correctly but you did not add the reference to the controller for the view. Also, you would need the dependency file for ngAnimate in the main view.
<div data-ng-view="" data-ng-controller="rispaController" ></div>
Good Day,
I'm trying to create an SPA with Angular. Here is my index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
<meta charset="UTF-8">
<title>Online</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/mystyle.css">
<base href="/Client/">
</head>
<body ng-controller="mainController">
<div class="container"> <!--- This is the box login -->
<div ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js:
var onlineApp = angular.module('onlineApp', ['ngRoute']);
onlineApp.controller('mainController', function($scope) {
$scope.message = 'Test Message';
});
onlineApp.controller('signupController', function($scope) {
$scope.message = 'Sign up Message';
});
onlineApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/signup', {
templateUrl: 'pages/signup.html',
controller: 'signupController'
})
.otherwise({
redirectTo: '/'
});
// use the HTML 5 History API
$locationProvider.html5Mode(true);
});
My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.
EDIT:
Here's a snippet of pages/home.html:
<div class="pull-right col-md-4">
<label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
<a id="btn-create" class="btn btn-primary" href="#signup" >
Create Account
</a>
</div>
When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
END EDIT:
All of the examples I see of ng-view being used is when the links are outside of the ng-view.
Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.
TIA,
coson
you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)
potentially either a link of the form
Click me to switch
or a manual location change with the $location service (inject it to your controller)
$location.path("/signup");
should do the job. im not sure what you mean by links inside and outside of ng-view.
The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.
Click this link to go to signup.
I have a standard angular page that is not associated with any ui.router functionality(index.html). From that page I click a link that triggers an angular call and than after some operation the flow needs to be redirected to a page inside a folder that is using angular-ui.route template.
I have created a plunker that represents this:
http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview (current plunker is working but there's a loop on first page trying to call default state created with $urlRouterProvider.otherwise('events');)
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="LoginController as lgCtrl">
<h1>This page does not use ui.router</h1>
Login
</body>
</html>
The page with ui-view tag is inside a manage folder:
manage/home.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16" data-require="angular.js#1.3.16"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../app.js"></script>
</head>
<body ng-controller="EventsController as evtCtlr">
<h1>Hello manage/home.html</h1>
<div ui-view></div>
</body>
</html>
The templateUrl page to be inserted is:
manage/events.html
<div ng-controller="EventsController as evtCtrl">
<h3>Events Page</h3>
<div>Some user email</div>
</div>
app.js
'use strict';
(function () {
var app = angular.module('app', ['ui.router']);
/**
* Configuration for ui-router module. Handles navigation based on app states.
*/
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('events');
$stateProvider
.state('events', {
url: '/events',
views:{
'#manage/home':{
templateUrl: 'manage/events.html'
}
}
});
});
app.controller('LoginController', ['$scope','$window', '$state',
function($scope, $window, $state){
$scope.goToEvents = function(){
console.log('trying to load events');
//this call doesn't work, 404 - It should?? -->> see reference
//https://github.com/angular-ui/ui-router/wiki/URL-Routing
$window.location.href = 'manage/home.html/events';
//don't work
//$state.transitionTo('events');
//also don't work
//$state.go('events');
};
}]);
app.controller('EventsController', [function(){
console.log('EventsController');
}]);
})();
I have created a plunker that represents this:
http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview
I have tried different ways of moving from the first non ui.router page but none worked so far.
What's the best way of doing this?
Firstly , do not inject $state as dependency in the LoginController as the view related to this controller isn't an UI route. Adding the $state dependency causes the loop that you are seeing in your example as UI-Router then considers this view a route. As no state matches this route , it tries to load the default state , whose template has a relative URL , which then looks it up inside wrong directory of Plunkr , which causes 404 error.
Secondly , the URL to redirect should via location.href should have a hash otherwise it will also give 404
The code for the LoginController
app.controller('LoginController', ['$scope', '$window',
function($scope, $window) {
$scope.goToEvents = function() {
//Do Something
$window.location.href = 'manage/home.html#/events';
};
}
]);
Check the working example at http://plnkr.co/edit/K2iBYu?p=preview