Routing In AngularJS

Introduction

Routing is a core feature in AngularJS. This feature is useful in building SPA (Single Page Application) with multiple views. In SPA application, all views are different Html files and we use Routing to load different part of application and its help to divide application logically and make it manageable. In other words, Routing helps us to divide our application in logical views and bind them with different controllers.

Routing

In the above diagram, I have created two routes URL and each points to a specific view managed by a specific controller. In the later part of the article, we will learn how it works=s.

Introduction to ngRoute Module

This module provides routing in AngularJS application and also provides deep linking services and directives. To achieve routing in AngularJS, we need to include the library file of ngRoute.

Component of ngRoute Module

There are four main components of ngRoute module:

ngView: ngView is directive and creates new scope. It is used to load html templates.
$routeProvider: It is used to configure routes.
$route: It is used to make deep linking URLs between controllers and view. $route watches $location.url() and tries to map the path to an existing route defined by $routeProvider.
$routeParams: This is Angular service which allows us to retrieve the current set of route parameters.

$routeProvider used for configuring the routes in AngularJS application. It is depends on ngRoute module. All application routes are defined via $routeProvider and it is the provider of the $route Service. It is very easy to wire up controllers, view templates and browser URL location using $route service. This service also help us to implement deep linking that utilize the browser back and forward navigation (browser’s history).

Hello World Example

Routing in AngularJS is used to load different templates at runtime. In the following example we will elaborate it more step by step.

Step 1: Create basic structure of application (SPA).

In this step, I have created demo.html and it includes all the required AngularJS library and bootstrap library. Here I have also created structure for application. Also defined two links: page1 and page2. Each link loads respective template.

Project structure

Demo.html

<!DOCTYPEhtml>
<htmldata-ng-apphtmldata-ng-app="AngularApp">
<head>
<metacontentmetacontent="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />
<title>AngularJS - Routing</title>
<scriptsrcscriptsrc="angular.js">
</script>
<scriptsrcscriptsrc="angular-route.js">
</script>
<scriptsrcscriptsrc="app.js">
</script>
<scriptsrcscriptsrc="jquery-1.10.2.min.js">
</script>
<scriptsrcscriptsrc="DemoController.js">
</script>
<scriptsrcscriptsrc="Modules/Page1/Page1Controller.js">
</script>
<scriptsrcscriptsrc="Modules/Page2/Page2Controller.js">
</script>
<scriptsrcscriptsrc="bootstrap.min.js">
</script>
<linkhreflinkhref="bootstrap.min.css" rel="stylesheet" /> </head>
<body>
<div>
<div ng-controller="demoController" class="container">
<p><b>Hello World - Routing Example</b></p>
<divclassdivclass="row">
<divclassdivclass="col-md-3">
<ulclassulclass="nav">
<li>
<ahrefahref="#/page1"> Page 1 </a>
</li>
<li>
<ahrefahref="#/page2"> Page 2 </a>
</li>
</ul>
</div>
<divclassdivclass="col-md-9">
<divng-view>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Here I have divided screen in two sections: Left contains the menu and in the right pane respective template will be loaded.

The ngView directive is responsible to render the template of current route into the main layout file passed by $route service. I have also defined ng-app directive once. The ngView become place holder for views. Every view render by the route is loaded into this section.

Step 2: Add Routing

In the Demo.html, I have included app.js file which hold the definition of AngularJS application. The $routeProvider definition contain by the module is called "ngRoute". In app.js file, I have defined an angular app using “angular. Module” method. After creating module, we need to configure the routes. The "config" method is used to configure $routeProvider. Using "when" and "otherwise" method of $routeProvider, we can define the route for our AngularJS application.

app.js

var app = angular.module("AngularApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider)
{
$routeProvider.
when('/page1',
{
templateUrl: 'Modules/Page1/page1.html',
controller: 'Page1Controller'
})
.
when('/page2',
{
templateUrl: 'Modules/Page2/page2.html',
controller: 'Page2Controller'
})
.
otherwise(
{
redirectTo: '/page1'
});
}
]);

In the above code, I have defined two routes: "page1" and "page2" and mapped them with template view "Modules/Page1/page1.html" and "Modules/Page2/page2.html" respectively. I have set default page using "otherwise" method.

Step 3: Define HTML Template and controller

In this example, I have added two html templates: page1.html and page2.html and created two controllers files: page1controller.js and page2controller.js. The following are the definition of both HTML template and controller.

Page1.html

<divng-controller="Page1Controller">
<h2>Page 1</h2> Hi, {{myName}} </div>

Page1Controller.js

app.controller("Page1Controller", ['$scope', function ($scope)
{
$scope.myName = "Tejas Trivedi";
}]);

Page2.html

<divng-controller="Page2Controller">
<h2>Page 2</h2> Hi, {{myName}} </div>

Page1Controller.js

app.controller("Page2Controller", ['$scope', function ($scope)
{
$scope.myName = "Jignesh Trivedi";
}]);

Output

Page1Controller

Pass parameters to route URL

We can also define parameters in the route URL. Parameter name should define by colon (:) after the route path. The $routeParams service allow us to retrieve the route parameters in controller.

This feature is useful when we want to use same view for two or more different purpose and it can be identified by the parameter value or we want to display detail of any master record based on master id and master id passed as parameter. In Angular, route parameter can be defined using parameter name in URL. For example,

app.js

.when('/page3/:id',
{
templateUrl: 'Modules/Page3/page3.html',
controller: 'Page3Controller'
})

We can read parameter value in controller by using $routeParams. Note that do not forget to inject $routeParam service in controller.

page3Controller.js

app.controller("Page3Controller", ['$scope', '$routeParams', function ($scope, $routeParams)
{
$scope.myName = "Jignesh Trivedi";
$scope.id = $routeParams.id;
}]);

page3.html

<divng-controller="Page2Controller">
<h2>Page 3</h2> My Id : {{id}} </div>

Demo.html

Demo

Output

Output

Load local views

This is not always required to load view from the different html files because view templates are very small and we might want to keep them within main html file instead of creating separate html files. The ng-template can be used to define small templates in the main html file.

Syntax

<script type="text/ng-template" id="page4.html">
//define definition of html here...
</script>

Here I have defined a template "page4.html" and "page5.html" inside the script tag. AngularJS will automatically load these templates in ng-view when "page4.html" or "page5.html" is referred in route.

DemoLocalView.html defines the structure of the application. The appLocalView.js is very similar to previous example. Here I have used same controller js files.

appLocalView.js

var app = angular.module("AngularApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider)
{
$routeProvider.
when('/page4',
{
templateUrl: 'page4.html',
controller: 'Page1Controller'
})
.
when('/page5',
{
templateUrl: 'page5.html',
controller: 'Page2Controller'
})
.
otherwise(
{
redirectTo: '/page4'
});
}
]);

DemoLocalView.html

<!DOCTYPE html>
<html data-ng-app="AngularApp">
<head>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />
<title>AngularJS - Routing</title>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="appLocalView.js"></script>
<script src="jquery-1.10.2.min.js"></script>
<script src="Modules/Page1/Page1Controller.js"></script>
<script src="Modules/Page2/Page2Controller.js"></script>
<script src="bootstrap.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" /> </head>
<body>
<div>
<div class="container">
<p><b>Load local view Example</b></p>
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li><a href="#page4"> Page 4 </a></li>
<li><a href="#page5"> Page 5 </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="page4.html">
<h2> Page 4 </h2> Hi, {{myName}} </script>
<script type="text/ng-template" id="page5.html">
<h2> Page 5 </h2> Hi, {{myName}} </script>
</div>
</div>
</body>
</html>

Output

run

Conclusion

This article helps us to know routing in AngularJS.

8 Comments

Join the conversation! Your thoughts help the community grow.

Bruno Péterson11y ago
Good one
Dinkar Chavhan11y ago
very nice example....if u have example regarding ui-router in angular that will help better..
Humayun Kabir Mamun11y ago
Nice...
Shridhar Sharma11y ago
nice share
Former member11y ago
Which is better $stateProvider.state or $routeProvider.when? I think $stateProvider.state is better. Could you please explain.
Sibeesh Venu11y ago
Nice Share
Harshad Pansuriya11y ago
Nice one
Anu V11y ago
good