AngularJS Routing

AngularJS : Routing

In previous tutorial we saw AngularJS Controllers and $scope. In this article we will understand another useful feature of AngularJS called “Routing”. It helps us to divide a single page application (SPA) in multiple views. Dividing a SPA in multiple views helps in logically dividing the app and making it more manageable. Routing in angular application is taken care by a service provider known as “$routeProvider”. The $routeProvider is configured in app module's config() function. $routeProvider provides two following methods

1 .when() : which matches a pattern
2 .otherwise() : otherwise() method to define a default route.

Route.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing</title>
</head>
<body ng-app="MyApp">
<table>
<tr>
<td><a href="#List">List</a></td>
<td><a href="#Add">Add</a></td>
</tr>
<tr>
<td colspan="2"><div ng-view></div></td>
</tr>
</table>
<scriptsrcscriptsrc="http://ajax.googleapis.com/ajax/libs/angulrjs/1.0.7/angular.min.j s"></script>
<script>
var App = angular.module('MyApp', []);
App.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
　　　　when('/List', {
templateUrl: 'Views/list.html',
controller: 'ListController'
}).
when('/Add', {
templateUrl: 'Views/add.html',
controller: 'AddController'
}).
otherwise({
redirectTo: '/List'
});
}]);
App.controller('ListController', function($scope) {
$scope.message = 'This is from List screen';
});
App.controller('AddController', function($scope) {
$scope.message = 'This is from Add screen';
});
</script>
</body>
</html>

Views /List.html

<h1>List of friends</h1>
{{ message }}

Views /Add.html

<h1>Add new friend</h1>
{{ message }}

To work with routing we have to add AngularJS Route module as

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>

Now we have created an angular app “MyApp” using angular.module method. We have used config() method to configure $routeProvider. We have added routes for List and Add. For each route we have defined template url and controller.

We have assigned values in $scope object for each controller.

We can also the parameter with route. Suppose we want to a FriendId to show the details then we have to add a route as

when('/Show/:id', {
templateUrl: 'Views/Show.html',
controller: 'ShowController'
}).

We can read param value form $routeParams which is ed with $scope object in the controller.

App.controller('ShowController', function($scope, $routeParams) {
$scope.friendId = $routeParams.id;
$scope.name = "Rahul";
});

I just want to mention that we can also keep our template in route definition instead of in separate .html files. 　　

　when('/Show/:id', {
template: 'friend id:{{ friendId }} friend Name: {{ name }}',
controller: 'ShowController'
}).