What is Angular router? Why and where should we use it?

Routing helps us to divide our application in parts logically, making it more manageable. Whenever an app grows by adding logic into it it becomes hard to control and manage. Using routing we can easily divide our application in logical views. Routing also helps to bind different views to the controllers.

The above picture shows two route URLs (#Link1,#Link2). When they are referred, the views(View 1,View 2) and controllers(Controller 1,Controller 2) loaded accordingly. Does it make any sense to you? Don’t worry ,let’s have a look at the following example.


 

index.html
[javascript]

<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div ng-controller="firstController">
<div ng-view>
</div>
</div>

</body>
</html>

[/javascript]

In the above code we can see we have included angular-route.min.js(or you can choose angular-route.js) for routing. This is required for including ngRoute module in our app. The ngRoute module provides routing and deeplinking services and directives for angular apps.

first.html(Template)
[javascript]

<ul>
<li><a href="#first">First Page</a></li>
<li><a href="#second">Second Page</a></li>
</ul>
<h3>First Page</h3>

[/javascript]

second.html(Template)
[javascript]

<ul>
<li><a href="#first">First Page</a></li>
<li><a href="#second">Second Page</a></li>
</ul>
<h3>Second Page</h3>

[/javascript]

Above two html files are templates which will be loaded as per routed to links. Next we will see the Javascript i.e. main portion of our app where routing is being done. We have included script.js as we can see in index.html for javascript code. Let’s have a look.

script.js
[javascript]

var app=angular.module(‘myApp’,[‘ngRoute’]);
app.config(function($routeProvider){
$routeProvider
.when(‘/’,{
templateUrl: ‘first.html’,
controller:’firstController’
})
.when(‘/first’,{
templateUrl: ‘first.html’,
controller:’firstController’
})
.when(‘/second’,{
templateUrl: ‘second.html’,
controller:’secondController’
});
});
app.controller(‘firstController’,function($scope,$route){
//Controller code for firstController
});
app.controller(‘secondController’,function($scope,$route){
//Controller code for secondController
});

[/javascript]

Here we are installing ngRoute module first in our app. Then comes the configuration part where we are using $routeProvider. It is the service provider provided by the Angular which is actually responsible for taking care of routing. $routeProvider is the provider of the $route service by which we define the application routes in Angular. This service is used in order to wire together controllers, view templates, and the current URL location in the browser. We can implement deep linking using this feature in order to utilize the browser’s history and bookmarks.

According the example, we set when the URL is root(‘Application/’) or ‘Application/first’ it loads ‘first.html’ template in ng-view as view and ‘firstController’ as controller. Similarly ‘second.html’ and ‘secondController’ are mapped as template and view respectively when the URL ‘Application/second’ is referred. We have put the links in template html files manually in order to test them easily using hastag (#first,#second). ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

So that was a brief discussion on Angular router and its use in a web application. If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner


 

1 thought on “What is Angular router? Why and where should we use it?

  1. Pingback: Anonymous

Leave a Reply

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