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:

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

Route.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>AngularJS Routing</title>
  5. </head>
  6. <body ng-app="MyApp">
  7. <table>
  8. <tr>
  9. <td><a href="#List">List</a></td>
  10. <td><a href="#Add">Add</a></td>
  11. </tr>
  12. <tr>
  13. <td colspan="2"><div ng-view></div></td>
  14. </tr>
  15. </table>

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

  20. <script>
  21. var App = angular.module('MyApp', []);
  22. App.config(['$routeProvider',
  23. function($routeProvider) {
  24. $routeProvider.
  25. 　　　　 when('/List', {
  26. templateUrl: 'Views/list.html',
  27. controller: 'ListController'
  28. }).
  29. when('/Add', {
  30. templateUrl: 'Views/add.html',
  31. controller: 'AddController'
  32. }).
  33. otherwise({
  34. redirectTo: '/List'
  35. });
  36. }]);
  38. App.controller('ListController', function($scope) {
  39. $scope.message = 'This is from List screen';
  40. });
  41. App.controller('AddController', function($scope) {
  42. $scope.message = 'This is from Add screen';
  43. });
  45. </script>
  46. </body>
  47. </html>
Views /List.html
  1. <h1>List of friends</h1>
  2. {{ message }}
Views /Add.html
  1. <h1>Add new friend</h1>
  2. {{ message }}
To work with routing we need to add AngularJS Route module as:
  1. <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.



We can also pass the parameter with a route. Suppose we want to pass a FriendId to show the details then we need to add a route as:
  1. when('/Show/:id', {
  2. templateUrl: 'Views/Show.html',
  3. controller: 'ShowController'
  4. }).
We can read a param value from $routeParams that is passed with a $scope object in the controller.
  1. App.controller('ShowController', function($scope, $routeParams) {
  2. $scope.friendId = $routeParams.id;
  3. $scope.name = "Rahul";
  4. });
I just want to mention that we can also keep our template in the route definition instead of in separate HTML files.
  1. 　　　　when('/Show/:id', {
  2. template: 'friend id:{{ friendId }} friend Name: {{ name }}',
  3. controller: 'ShowController'
  4. }).