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

  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. <scriptsrcscriptsrc="http://ajax.googleapis.com/ajax/libs/angulrjs/1.0.7/angular.min.j s"></script>
  18. <script>
  19. var App = angular.module('MyApp', []);
  20. App.config(['$routeProvider',
  21. function($routeProvider) {
  22. $routeProvider.
  23. 　　　　when('/List', {
  24. templateUrl: 'Views/list.html',
  25. controller: 'ListController'
  26. }).
  27. when('/Add', {
  28. templateUrl: 'Views/add.html',
  29. controller: 'AddController'
  30. }).
  31. otherwise({
  32. redirectTo: '/List'
  33. });
  34. }]);
  36. App.controller('ListController', function($scope) {
  37. $scope.message = 'This is from List screen';
  38. });
  39. App.controller('AddController', function($scope) {
  40. $scope.message = 'This is from Add screen';
  41. });
  43. </script>
  44. </body>
  45. </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 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
  1. when('/Show/:id', {
  2. templateUrl: 'Views/Show.html',
  3. controller: 'ShowController'
  4. }).
We can read param value form $routeParams which is ed with $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 route definition instead of in separate .html files. 　　
  1. 　when('/Show/:id', {
  2. template: 'friend id:{{ friendId }} friend Name: {{ name }}',
  3. controller: 'ShowController'
  4. }).