Post
Ask Question

AngularJS Routing

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>   
  16.  
  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.             }]);  
  37.   
  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.          });  
  44.   
  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. }). 


Similar Articles