AngularJS Routing

Ratnesh Singh
9y
6.4k
0
1

Article

In a previous tutorial we saw AngularJS Controllers and $scope. This article explains another useful feature of AngularJS called “Routing”. It helps us to divide a Single Page Application (SPA) into multiple views. Dividing a SPA into multiple views helps to logically divide the app and make it more manageable. Routing in an Angular application is taken care of by a service provider known as “$routeProvider”. The $routeProvider is configured in app the module's config() function. $routeProvider provides the following two methods:

when() : that matches a pattern
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>
<script src="http://ajax.googleapis.com/ajax/libs/angulrjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></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 need 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 the angular.module method. We have used the config() method to configure $routeProvider. We have added routes for List and Add. For each route we have defined a template URL and controller.

We have assigned values to a $scope object for each controller.