Routing in AngularJS

What is Routing ?

Routing in AngularJS allows your application becomes a Single Page Application (SPA). In your application, you have to navigate to different pages, at the same time your application should be act as SPA without page reload. This is called as Routing.

For the Routing, here we use ngRoute Module. This module routes our applications to different pages without page refreshment.

How to Implement Routing in your Application ?

1. At first you need to include the routing library file.

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js”></script>

2. Next include ngRoute dependency in your application module.

var app = angular.module(“myApp”, [“ngRoute”]);

Now your application ready to access Routing.

 

How to configure Routing in your Application ?

Once you done dependency injection, You can use $routeProvider service. We know that $routeProvider is a default Provider and we can inject that into configuration phase.

app.config(function($routeProvider) {

$routeProvider

.when(“/”, {

templateUrl : “index.html”,

controller: “indexCtrl”

})

.when(“/about”, {

templateUrl : “aboutus.html”,

controller: “aboutusCtrl”

})

.when(“/service”, {

templateUrl : “service.html”,

controller: “serviceCtrl”

})

.when(“/contact”, {

templateUrl : “contactus.html”,

controller: “contactCtrl”

})

.otherwise({redirectTo: ‘/’});

});

 

Explanation:

Once you inject $routeProvider in config phase, you are ready to use routing. Then inbuilt method when has 2 properties

1. The url query string and
2. Object which has properties of

• template – You can do your html designs here. Its not a new page.
• templateUrl – This is a new page which you going to call when your query string meets the right value.
• controller – This controller will be attached on the template and you don’t need to attach the controller manually again.

3. the otherwise method call the template while the query string matches none of the value you mentioned in the config phase.

 

Where the templates goes to load ?

We need a container to receive the templates which is provide by Routing.

We can set the container in three different ways.

1. As an Element – <ng-view></ng-view>
2. As an Attribute – <div ng-view></div>
3. As a Class – <div class=”ng-view”>

 

For a standard we use as an Element.

So the templates dynamically loads on the <ng-view> </ng-view> directive based on the query string.

To know more about the complete topics of AngularJS, please visit AngularJS Training in Chennai.