Post
Ask Question

Angular, Bootstrap And ASP.NET MVC - Part Four (Angular Routing)

In previous articles, we learned AngularJS project setup, styling with bootstrap, AngularJS structure, data-binding, etc. Please have a look at my previous articles before going through this article.

In this tutorial, we are going to learn how we can navigate from one HTML page to another using Angular Routing. AngularJS provides a nice feature that we can leverage to navigate to another page without reloading the whole page. We can use “ngRoute” module to achieve this.

Step 1

When you have a look in “index.html” from previous article (Part – 3), we have loaded an HTML (sfTemplate.html) by using custom directive.<body ng-controller="sfController" class="container">  

  1.     <br/>   
  2.     <student-form/>  
  3. </body>  

But now, we are removing this.

Step 2

Once “<student-form/>” is removed from “index.html”, we will use “ng-view” directive, and this will be the main View that acts as container for all other HTML Views provided by the route.

We define “ng-view” as: <div ng-view></div>

Step 3

Add a div with “ng-view” and inside it, add a new button.

  1. <body ng-controller="sfController" class="container">  
  2.     <h1>Home Page</h1>  
  3.     <div ng-view>  
  4.         <input type="button" class="btn btn-primary" value="Add new student"/>  
  5.     </div>  
  6. </body>  
  7. </html>     

Run the application. You will see the output as,

Angular
Step 4

Let’s set up routing. In the “StudentFromsApp.js” file, we can set up routing right after the module is created.

  1. var studentFormsApp = angular.module('studentFormsApp', ["ngRoute"]);  
  2.   
  3. studentFormsApp.config(function ($routeProvider) {  
  4.     $routeProvider  
  5.         .when("/home", {  
  6.             templateUrl: "app/Home.html",  
  7.             controller: "homeController"  
  8.     })  
  9.     .when("/newStudentForm", {  
  10.         templateUrl: "app/StudentForm/sfTemplate.html",  
  11.         controller: "sfController"  
  12.     })  
  13.     .otherwise({  
  14.         redirectTo: "/home"  
  15.     })  
  16. });  

In  Angular module, we need to pass “ngRoute” as dependencies. Hence, we have,

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

 From the above code snippet, you can see the basic routing in AngularJS. We take the object “studentFormsApp” and call the “config” method. We pass “$routeProvider” that helps in routing. And from the “$routeProvider”, we have “when” methods for routing.

In the first “when” method, this is client-side routing and we are routing “/home” and when app routes to this, then it will load “app/Home.html” template which is placed inside app folder. This will have controller “homeController”.

In the second “when” method, we are routing to “/newStudentForm”. In this case, it will load “sfTemplate.html” as templateUrl with controller “sfController”. This “sfTemplate.html” is inside the folder “app/StudentForm/sfTemplate.html”.

Step 5

To use routing, we need to use “ng-route” module. So, let's include “angular-route-min.js” in “index.html” file.

Angular

Step 6

Let’s add “Home.html” file that is required while routing in Step 3. Right click on “app” folder and add “Home.html” inside it. And move the button from “index.html” into it.

So, in “Home.html”, we will have,

  1. <input type="button" class="btn btn-primary" value="Add new student" ng-click="addNewStudent()"/>  

We also need “homeController”, so let's create a Controller. Add a “HomeController.js” file inside “app” folder. Include this file in “index.html” too.

In “HomeController.js” file, create Controller with the following code snippet.

  1. studentFormsApp.controller("homeController",   
  2.    function ($scope, $location) {  
  3.        $scope.addNewStudent = function () {  
  4.            $location.path('/newStudentForm');  
  5.        };  
  6.    })  

In the above code snippet of “HomeController”, we are passing a function with “$scope” and “$location” service. We defined a click function for the button in “Home.html” i.e. “$scope.addNewStudent” which takes $location service and calls path method with ‘/newStudentForm’. This will direct to .when("/newStudentForm", which we have defined in routing.

Step 7

Run the application. You will see the following output in home.html.

Angular
When you click on “Add New Student” button, you will be redirected to student form like below.

Angular

Following are the complete code snippets.

index.html

  1. <!DOCTYPE html>  
  2. <html ng-app="studentFormsApp">  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link href="Content/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8.     <script src="Scripts/angular-route.min.js"></script>  
  9.     <script src="app/StudentFormsApp.js"></script>  
  10.     <script src="app/StudentForm/sfController.js"></script>  
  11.     <script src="app/HomeController.js"></script>  
  12.     <script src="app/StudentForm/sfDirective.js"></script>  
  13.     <script src="app/StudentForm/sfService.js"></script>  
  14. </head>  
  15. <body ng-controller="sfController" class="container">  
  16.     <h1>Home Page</h1>  
  17.     <div ng-view>  
  18.           
  19.     </div>  
  20. </body>  
  21. </html>  

StudentFormsApp.js

  1. var studentFormsApp = angular.module('studentFormsApp', ["ngRoute"]);  
  2.   
  3. studentFormsApp.config(function ($routeProvider) {  
  4.     $routeProvider  
  5.         .when("/home", {  
  6.             templateUrl: "app/Home.html",  
  7.             controller: "homeController"  
  8.     })  
  9.     .when("/newStudentForm", {  
  10.         templateUrl: "app/StudentForm/sfTemplate.html",  
  11.         controller: "sfController"  
  12.     })  
  13.     .otherwise({  
  14.         redirectTo: "/home"  
  15.     })  
  16. });  

Home.html

  1. <input type="button" class="btn btn-primary" value="Add new student" ng-click="addNewStudent()"/>  

HomeController.js

  1. studentFormsApp.controller("homeController",   
  2.     function ($scope, $location) {  
  3.         $scope.addNewStudent = function () {  
  4.             $location.path('/newStudentForm');  
  5.         };  
  6.     });  

Get the complete project from GitHub.

We have learned routing in AngularJS. We will continue to learn more in next articles. 

Thanks and Happy Coding!


Similar Articles