Post
Ask Question

Introduction To AngularJS - Day 13

In this 13th day of AngularJS article series, we are going to learn next key players/concept of AngularJS, understanding the concept of Routing in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

Routing

We are going to learn one of the core feature of AngularJS called Routing. It enables you to create different URLs for views in your application. It shows you the views depend on what route is chosen. The route is specified in the URL after the ‘#’ sign. This AngularJS features is mostly used in Single Page Application, because in SPA we render multiple views in one part of your application. It helps you in dividing the application and binds the views to the controllers.

Routing in AngularJS

For example see the following image:

Employee

AngularJS routes associate with a view and a controller. It relies on ‘ngRoute’ module (include separate script for this). Routes are configured using the ‘$routeProvider’. The ‘ng-route’ module provides the routing and linking services and directives for angular application. For that we have to download ‘angular-route.min.js’ file or directly use CDN path.

Using ngRoute module:

  1. You can download it and include as follows:
    1. <script src="Scripts/angular-route.min.js"></script>  
  2. You can directly use CDN as follows:
    1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>  

ng-view directives

The dynamically loaded views are injected into the shell page as a module loads. The ngView directive is used to display the HTML templates or views in the specified routes. Every time the current route changes, the included view changes with it according to the configuration of the $route service. You can use ng-view directives as follows:

  1. <div ng-view> </div>  
  2. <ng-view> </ng-view>  
$routeProvider

Routes are configured by calling ‘angular.module.config ()’. $routeProvider is injected dynamically. It is used for configuring the routes. The config () takes a function which takes the $routeProvider as parameter and the routing configuration goes inside the function. $routeProvider has a simple API, accepting either the when () or otherwise () method.

routeProvider

The following is the routing syntax:
  1. var app = angular.module("myApp", ['ngRoute']);  
  2. app.config(function ($routeProvider)  
  3. {  
  4.     $routeProvider.when('/view1',  
  5.     {  
  6.         templateUrl: 'views/view1.html',  
  7.         controller: 'FirstController'  
  8.     })  
  9.     .when('/view2',  
  10.     {  
  11.         templateUrl: 'views/view2.html',  
  12.             controller: 'SecondController'  
  13.     })  
  14.     .otherwise(  
  15.     {  
  16.         redirectTo: '/view1'  
  17.     });  
  18. });  
Creating simple routing example step by step:

 

  1. AngularJS routing functionality is located in the ngRoute module, add a <script> that loads ‘angular-route.min.js’.
    1. <script src="Scripts/angular-route.min.js"></script>  
  2. Reference ngRoute in your module as follows:
    1. var app = angular.module("myApp", ['ngRoute']);  
  3. Using $routeProvider to configure routes, it is injected dynamically as follows:

    configure

  4. Defining Routes using ‘angular.config()’, as follows:
    1. /// <reference path="angular.min.js" />  
    2. var app = angular.module("myApp", ['ngRoute']);  
    3. app.config(function ($routeProvider)  
    4. {  
    5.     $routeProvider.when('/employees',  
    6.     {  
    7.         templateUrl: 'views/employees.html',  
    8.         controller: 'employeeController'  
    9.     })  
    10.     .when('/departments',  
    11.     {  
    12.         templateUrl: 'views/departments.html',  
    13.         controller: 'departmentController'  
    14.     })  
    15.     .otherwise(  
    16.     {  
    17.         redirectTo: '/employees'  
    18.     });  
    19. });  
  5. Creating two controllers ‘employeeController’ and ‘departmentController’ as follows:
    1. //Employee Controller  
    2. app.controller("employeeController", function ($scope)  
    3. {  
    4.     $scope.employees = ['Jeetendra', 'Sameer', 'Paritosh', 'Makarand', 'Prasad'];  
    5. });  
    6. //Department Controller  
    7. app.controller("departmentController", function ($scope)  
    8. {  
    9.     $scope.departments = ['IT', 'Admin', 'HR', 'Marketing'];  
    10. });  
    appController.js
    1. /// <reference path="angular.min.js" />  
    2. var app = angular.module("myApp", ['ngRoute']);  
    3. app.config(function ($routeProvider)  
    4. {  
    5.     $routeProvider.when('/employees',  
    6.         {  
    7.             templateUrl: 'views/employees.html',  
    8.             controller: 'employeeController'  
    9.         })  
    10.         .when('/departments',  
    11.         {  
    12.             templateUrl: 'views/departments.html',  
    13.             controller: 'departmentController'  
    14.         })  
    15.         .otherwise(  
    16.         {  
    17.             redirectTo: '/employees'  
    18.         });  
    19. });  
    20. //Employee Controller  
    21. app.controller("employeeController", function ($scope)  
    22. {  
    23.     $scope.employees = ['Jeetendra', 'Sameer', 'Paritosh', 'Makarand', 'Prasad'];  
    24. });  
    25. //Department Controller  
    26. app.controller("departmentController", function ($scope)  
    27. {  
    28.     $scope.departments = ['IT', 'Admin', 'HR', 'Marketing'];  
    29. });  
  6. Using ‘ng-view’ directive for rendering particular view on as per route defined as follows:

    index.html
    1. <!DOCTYPE html>  
    2. <html ng-app="myApp">  
    3.   
    4. <head>  
    5.     <title>Routing in AngularJS</title>  
    6.     <script src="Scripts/angular.min.js"></script>  
    7.     <script src="Scripts/angular-route.min.js"></script>  
    8.     <script src="Scripts/appController.js"></script>  
    9. </head>  
    10.   
    11. <body>  
    12.     <h2>Learn Routing in AngularJS at C# Corner!</h2>  
    13.     <div class="container">  
    14.         <div class="row">  
    15.             <div class="col-md-3">  
    16.                 <ul class="nav">  
    17.                     <li><a href="#/employees"> Show Employees </a></li>  
    18.                     <li><a href="#/departments"> Show Departments </a></li>  
    19.                 </ul>  
    20.             </div>  
    21.             <div class="col-md-9">  
    22.                 <div ng-view></div>  
    23.             </div>  
    24.         </div>  
    25.     </div>  
    26. </body>  
    27.   
    28. </html>  
    Code

    employees.html
    1. <div>  
    2.     <h2>List of Employees</h2>  
    3.     <ul ng-repeat="emp in employees">  
    4.         <li>{{emp}}</li>  
    5.     </ul>  
    6. </div>  
    departments.html
    1. <div>  
    2.     <h2>List of Departments</h2>  
    3.     <ul ng-repeat="dept in departments">  
    4.         <li>{{dept}}</li>  
    5.     </ul>  
    6. </div>  
  7. Now our example is ready to run, open in browser, you can see first time output as follows:

    run

    In above output you can see the list of record we defined in ‘employeeController’ by default because view provide default route to ‘/employee’. After we click on ‘Show Departments’, it shows the following output,

    output

In above output you can see the list of record we defined in ‘departmentController’, you can see how this ‘$routeProvider’ binds the particular view to the controller as per the routes we defined.

  1. Show Employees

    Show Employees

  2. Show Departments

    Show Departments

Great, we learned Routing in AngularJS with example successfully.

Summary

I hope that beginners as well as students understood the concept of Routing in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!


Similar Articles