Angular JS : Routing

Before we look into routes, lets take a look at one of the basic html concept which is used by angular to do routing. You must have notice , that a page has some anchor links or a url with # tag and when you click on it, you are navigated within that page to that specific content. These are called fragment identifiers. The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document. Lets see this by an example:


<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>Html Link Fragments</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script >
window.addEventListener('hashchange',function(){
console.log('hashchange='+window.location.hash);
});
</script>
</head>
<body>

<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">AngularJS Demo</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#section1"><i class="fa fa-home"></i> Section1</a></li>
<li><a href="#section2"><i class="fa fa-home"></i> Section2</a></li>
<li><a href="#section3"><i class="fa fa-home"></i> Section3</a></li>
</ul>
</div>
</nav>
</header>
<div id="container">
<div id="section1">
<h1>Headline One</h1>
<p>Lorem ipsum dolor sit amet.......</p>
</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="section2">
<h1>Headline Two</h1>
<p>Lorem ipsum dolor sit amet......</p>
</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="section3">
<h1>Headline Three</h1>
<p>Lorem ipsum dolor sit amet.....</p>
</div>

</div>
</body>
</html>

So above we have a simple html page with anchor links corresponding to div ids using # tag. We have also added a hashchange listener.

hashchange1

hashchange2

Angular Js uses this concept to get this path and change view accordingly. Lets see how this work.

The ngRoute module provides routing and deep linking services and directives for angular applications. You need to load this script after the angular main script. index.html:


<!DOCTYPE html>
<html lang="en-us" ng-app="angularApp">
<head>
<title>Html Link Fragments</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>

<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">AngularJS Demo</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#about"><i class="fa fa-home"></i> Avout Us</a></li>
<li><a href="#contact"><i class="fa fa-home"></i> Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<div id="container">
<div ng-view>

</div>

</div>
</body>
<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
<script src="../js/main.js"></script>
</html>

The area where the child view will be injected in the layout view will be created by the ng-view directive. Notice the anchor links have # hrefs.

main.js


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

myApp.config(['$routeProvider', function ($routeProvider) {

$routeProvider
.when("/home", {
templateUrl: "views/home.html",
controller: "homeController"
})
.when("/about", {
templateUrl: "views/aboutus.html",
controller: "aboutController"
})
.when("/contact", {
templateUrl: "views/contactus.html",
controller: "contactController"
}).
otherwise({
redirect: '/home'
});
}]);

myApp.controller('homeController', ["$scope",function ($scope) {
$scope.message="This is home page";

}]);

myApp.controller('aboutController', ["$scope",function ($scope) {
$scope.message="This is about us page";

}]);

myApp.controller('contactController', ["$scope",function ($scope) {
$scope.message="This is contact us page";

}]);

Lets understand this from top. First we inject the dependency of ngRoute into our application. Next thing that we need to do is to configure the routing rules using the $routeProvider service. Here we are listning to 3 routes and redirecting any other to the default route. Each route is associated with a specific view and controller.  Lets create the 3 html files – home.html, aboutus.html and contactus.html under views folder. All have the same code.


<h1>{{ message }}</h1>

Note that we do not have to put ng-controller in our view, specified controller will get associated with the specified view automatically during the configuration.

route1 route2

There are many things you can do with this, like pass parameter using /:param and then get thouse using $routeParams service in your controllers. check out the docs for this and other details.

%d bloggers like this: