AngularJS - Routing - "ng-route"

The ng-route implements routing based on the route url. Hence, the views and routes are tide to the application url.

Steps to use the  AngularJS routing module ngRoute:

• Add the reference for the same in your application.

              <script src="scripts/angular-route.min.js"></script>

• Include ngRoute as a dependency while creating the module in our application:

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

• Add ng-view directive in the layout page.
             <div class="container">
                 <ng-view>
                         <!-- Here partial templates will be injected -->
                </ng-view>
            </div> 


• Configure route using when() method of $routeProvider service. 

                      $routeProvider.when(routeName, routeConfiguration);
              

Angular function .config() is used for to define the routes in AngularJS application. The object $routeProvider is injected in the config() function. The object $routeProvider has the function .when that maps the partial views. You can have as many as .when functions you want, depending on the numbers of routes you are configuring. 

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

                                     .config( function ($routeProvider){

                                          $routeProvider
                                                .when("/abc",  {
                                                        templateUrl: "Partial/abc.html",
                                                        controller: "abcController"
                                                })
                                                .when("/xyz",  {
                                                        templateUrl: "Partial/xyz.html",
                                                        controller: "xyzController"
                                                })  
                                                .otherwise({
                                                       redirectTo: "/abc"
                                                })

                                          });

.otherwise function defines the default route. It means that if we try to access the route which is not configured or we try to access the base route page, it will redirect to the url which is specified in the .otherwise method.

Example 1:  A college website with home page, course provided, and department details.

Index.html is the main page which contains the link for the different pages. All the other pages will injected in it as in when it is requested by the user by clicking the links.

Index.html:

<div>

    <a href="#/home"> Home </a>

    <a href="#/courses"> Courses</a>

    <a href="#/departments"> Departments</a>  

<div>

<div class="container">

    <ng-view>

       // Here partial templates will be injected home.html, courses.html, departments.html

    </ng-view>

</div> 

#/ is used for telling the browser that we don't want to navigate away from the index.html, instead we want the partial views to be in injected in a particular location in index.html.

When Home link is clicked the Url looks as localhost:50210/index.html#/home

When Courses link is clicked the Url looks as localhost:50210/index.html#/courses

When Departments link is clicked the Url looks as localhost:50210/index.html#/departments

To remove the # from the Url please refer my next post.

Partial Views:

• Home.html - shows the home page
• Courses.html - shows the courses 
• Department.html - shows the departments

Service needed:

• A service with GetAllCourses() method to get all the courses.
• A service with GetAllDepartmets() to get all the departments.

Defining Routes: app.js - All the routing module is in the ngRoute module so it need to added as the dependency while creating the module in our application.

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

                                     .config( function ($routeProvider){

                                          $routeProvider
                                                .when("/home",  {
                                                        templateUrl: "Partial/home.html",
                                                        controller: "homeController"
                                                })
                                                .when("/cources",  {
                                                        templateUrl: "Partial/courses.html",
                                                        controller: "courcesController"
                                                })                                                
                                                .when("/departments",  {
                                                        templateUrl: "Partial/departments.html",
                                                        controller: "departmentsController"
                                                })    

                                                .otherwise({
                                                       redirectTo: "/home"
                                                })

                                          });

Define Controllers: 

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

                                     .controllers("homeController",  function ($scope){

                                          $scope.message = "Home";
                                     })   

                                     .controllers("coursesController",  function ($scope){

                                           $http({
                                                         method: "get",
                                                         url: "CoursesService.asmx/GellAllCourses"
                                           })
                                               .then(
                                                function(response) {
                                                      $scope.departments = response.data;
                                                 }, 
                                                 function(reason) {
                                                      $scope.error = reason.data;
                                                 });                                          
                                     })                                             

                                     .controllers("departmentController",  function ($scope, $http){
                                           $http({
                                                         method: "get",
                                                         url: "DepartmentService.asmx/GellAllDepartments"
                                           })
                                               .then(
                                                function(response) {
                                                      $scope.departments = response.data;
                                                 }, 
                                                 function(reason) {
                                                      $scope.error = reason.data;
                                                 });

                                     });                                    

Example 2: An e-commerce website for shopping women's wear can also be designed this way.

Things to Note::

• To reload the section of a layout use reload() function of object $route. The object $route is provided by the ng-route module.

• By default the routes which are configured using the ng-route are case-sensitive. To make a route case insensitive we need to make property caseInsensitiveMatch to true inside .when function. To make all the routes to be case insensitive set the $routeProvider.caseInsensitiveMatch = true.

• Its not necessary that the view contents be coming from external templates (separate html files), it can also be from inline templates. To make view contents coming from html files we use property templateUrl inside .when function. Similarly to make view contents coming from inline template we used property template inside .when function. 

                        angular.module('myApp', ["ngRoute"])

                                     .config( function ($routeProvider){

                                          $routeProvider.caseInsensitiveMatch = true;

                                          $routeProvider
                                                .when("/abc",  {
                                                        templateUrl: "Partial/abc.html",
                                                        controller: "abcController",
                                                        caseInsensitiveMatch: true
                                                })
                                                .when("/xyz",  {
                                                        template: "<h1> From Inline Template </h1>",
                                                        controller: "xyzController"
                                                })  
                                                .otherwise({
                                                       redirectTo: "/abc"
                                                })

                                          });