Routing in AngularJS

ng-view directive is used to create more than one view (multiple view) in a single page. You can declare ng-view in html div or td tag as follows.

<div ng-app = "myApp">
      ...
      <div ng-view></div>
</div>


In this example we are going to use routing feature, so we have to use routing module. Please note that routing module do not come with core angularjs file. You have to download angular-route.js file separately from angularjs.org website.

Steps for downloading the  angular-route.js

Step-1: Open the angularjs.org website.
Step-2: Click on the icon Download AngularJS 1
Step-3: A new dialog is open. Select browse additional modules.
Step-4: In the next page, click on angular-route.js link.
Step-5: Select the entire script file and save it with name angular-route.js.
Reference this file to your project folder.

Please refer the given hierarchy of files and folders.

routing demo

Let us do one example on routing and discuss.

First we create a folder name template. In this folder we will create two simple HTML file with binding expression. The first file name is Home.html and second file name is Department.html

Code for Home.html

Add an HTML page in template folder and delete everything on this page. Write the binding expression as given below.

<h1>{{message}}</h1>

Add another HTML page in template folder as Department.html and delete everything on this page. Write the binding expression as given below

Code for Department.html

<h1>Department</h1>
<ul>
     <li ng-repeat="dpt in department">
          {{dpt}}
     </li>
</ul>


The binding expression in both the html pages will initialize by script.js file. In Script.js file we have created controller name as HomeController and DepartmentController. These controllers are used to initialize the home page message and department properties.

Code for Script.js file

/// <reference path="angular.js" />
var myApp = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider)
{
     $routeProvider
     .when("/Home",
     {
          templateUrl: "Templates/Home.html",
          controller:"HomeController"
     })
     .when("/Department",
     {
          templateUrl: "Templates/Department.html",
          controller: "DepartmentController"
     })
})
.controller("HomeController", function ($scope)
{
     $scope.message="Home Page";
})
.controller("DepartmentController", function ($scope)
{
     $scope.department = ["Accounts", "Computer", "Library","Sales"];
})


In the above code our module “myModule”  is dependent upon the AngularJS ngRoute module, so we have to “inject” ngRoute into our module as:

var myApp = angular.module("myModule", ["ngRoute"])

Please note that ngRoute is placed within quotes and it has no preceding $.$routeProvider is an important service which comes with the ngRoute modules. It sets the configuration of urls, map them with the corresponding html page. It also attaches the controller. We will inject $routeProvider in config function. $routeProvider has ‘when’ function. We have passed the “/Home” in ‘when’ function. In second parameter we have set the templateUrl as templateUrl: "Templates/Home.html". It means that it will pull contents from Home.html whenever the path “/Home” is clicked.
When you run index.html on your browser and click the “Home” link, it will show the content of the Home.html file,where you write the ng-view directive.

We have written ng-view directive in index.html as:

<td>
     <b>You have clicked on</b>
     <div ng-view></div>
</td>


Code for Index.html file

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.js"></script>
          <script src="Scripts/Script.js"></script>
          <script src="Scripts/angular-route.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
                    width:100%;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <div>
          <br/>
               <div>
                    <table>
                         <tr>
                              <td>
                                   <h3>Welcome at CareerRide.com</h3>
                              </td>
                         </tr>
                         <tr>
                              <td width="60">
                              <a href="#/Home">Home</a><br/>
                              <a href="#/Department">Department</a>
                              </td>
                         </tr>
                         <tr>
                              <td>
                              <b>You have clicked on</b>
                              <div ng-view></div>
                              </td>
                         </tr>
                    </table>
               </div>
          </div>
     </body>
</html>


Execute the Index.Html file and you will get the output as below.

Output:
routing
▲