AngularJS Routes are used to load different views or states depending on whether you use a ng-Route or ui-Route. The traditional way of linking the pages in your application is just fine, but with AngularJS routes you can handle dynamic binding better and the routes are easier to remember for the user.
Routing with Angular JS allows bookmarking the same url with different categories easier. Routes allow different views to load depending upon the url. Same route can be given to more than one view. For the user, only the keyword appears to be changed, even though the views are loading from different html pages. Basically AngularJS routes are two types:
- ngRoute: No nested routes are present
- ui.router: Nested routes are present
ng-Route
Include the angular-route js in the script file. You will also need a server for the routes to work. You can set up the Apache Tomcat server. We pass the ngRoute as a dependency to the module while defining an angular module.
var app =angular.module(‘myApp’, [‘ngRoute]);
Using the app.config service, we can define the different routes for the links. The keywords used are ‘when’ and ‘otherwise’. You can have any number of ‘when’ in a $routeProvider provided everytime you return a templateUrl and a controller for that route. For example, in your application you have two menu items, Login and Home. In that case, you have to have two route specified in your $routeProvider. Further, you have to create two additional html pages which have to load in those routes. Also, you have to create two controllers to define what happens in the html pages. Here is an example.
myApp.config(function($routeProvider){
$routeProvider.
when(‘/home’,{
templateUrl: ‘home.html’,
controller: ‘HomeCtrl’
}).
when(‘/login’,{
templateUrl: ‘login.html’,
controller: ‘LoginCtrl’
}).
otherwise({
redirectTo: ‘/login’
});
});
Remember to pass the $routeProvider to all the controllers as a function parameter.
myApp.controller(“HomeCtrl”, function($scope, $routeProvider){
});
In the index.html body you have to set up a container or placeholder for the views to load. The a links are identified in the html with the ‘#’.
<a href=’#/login’>Login</a>|<a href=’#/home’>Home</a>
<div ng-view></div>
ui.router
Include the CDN of the ui.router javascript file in your index.html. ui.router uses a $stateProvider. We pass the ui.router as a dependency to the module while defining an angular module.
var demoapp = angular.module(“demoapp”, [‘ui.router’]);
In ui.router, all the routes are identified with a state rather than a ‘#’ Any number of child routes can be created using the $stateProvider. It uses application state changes to load the views accordingly.
The states are managed hierarchically. $stateProvider is defined inside the app.config service. It defines the different states and templateUrls to be loaded for the states. Each state can also defined along with the parent. Here, in this example, list is the child view of home.
demoapp.config(function($stateProvider){
$stateProvider.state(‘home’, {
state: ‘home’,
url: ‘/home’,
templateUrl: ‘home.html’,
controller: ‘CarCtrl’
}),
$stateProvider.state(‘login’, {
state: ‘login’,
url: ‘/login’,
templateUrl: ‘login.html’,
controller: ‘BarCtrl’
}),
$stateProvider.state(‘list’, {
state: ‘list’,
url: ‘/list’,
parent: ‘home’,
templateUrl: ‘home.list.html’,
controller: ‘ListCtrl’
});
});
In the child state, you have to specify the parent state. Remember to pass the state to all the controllers as a function parameter.
demoapp.controller(“BarCtrl”, function($scope, $state){
});
In the html, you have to refer to the states in the link. ‘ui-sref’ is used to link the states in the $stateProvider. ui-sref is the wrapper that supports the href in ui-routing. AngularJS will convert the state reference to a href automatically. Also, specify the ui-view to load the views in the container or placeholder.
<a ui-sref=”login”>Login</a>|<a ui-sref=”home”>Home</a><br>
<div ui-view></div>
Routing is pretty simple once you get a hang of it. Just implement and include the correct javascript files in the script tag.