In previous articles, we have learned AngularJS project setup, styling with Bootstrap, AngularJS structure, data-binding, etc.

Please have a look on my previous articles before going through this article.

Angular, Bootstrap And ASP.NET MVC – Part One

Angular, Bootstrap And ASP.NET MVC – Part Twor

Angular, Bootstrap And ASP.NET MVC – Part Three

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 navigate to another page but without reloading the whole page. We can use “ngRoute” module to achieve this.

Step 1:

When you have a look in “index.html” from the previous article (Part – 3), we have loaded an HTML (sfTemplate.html) by using a custom directive like:

 

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:

 

Step 3:

Add a div with “ng-view” and inside it add a new button as:

 

Run the application, you will see output as:

Step 4:

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

 

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

 

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.

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:

 

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

In “HomeController.js” file, create a controller with following code snippet:

 

In the above code snippet of “HomeController”, we are passing a function with “$scope” and “$location” service. We define a click function for the button in “Home.html” i.e. “$scope.addNewStudent” which takes $location service and call 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.

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

Following are the complete code snippets:

index.html:

 

StudentFormsApp.js:

 

Home.html:

 

HomeController.js:

 

Get the complete project from GitHub.

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

Thanks, Happy Coding.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">