Angularjs

AngularJS Routing


AngularJS supports  Single Page Application(SPA).It is a Web App loads the page only once and updates its views dynamically based upon the requested template URL.This can be achieved using AngularJS ng-route module.

The routing module acts based on the requested Url.Whenever routing engine detects the requested Url, it will load the corresponding HTML view.Here, AngularJS route module is passed as a dependency to our application module.

Steps to be implemented to use Routing in our Angular App

  1. Include angular-route.js javascript file in your application.This provides all the functionality of angular routing.
  2. Add ngRoute module as a dependency to your application module.

Syntax

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

Let’s understand it with examples

index.html

<!DOCTYPE html>
<html>
<head>
<title>Routing Example</title>
<script src="app.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div style="text-align:center;background-color:black;color:white">
<a href="#/city">Top IT Cities</a>
<a href="#/clean">Top 5 cleanest cities</a>
{{message}}
<div ng-view>
</div>
</div>
</body>
</html>

city.html

<ul>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Pune</li>
<li>Delhi</li>
</ul>

clean.html

<ul>
<li>Bhopal</li>
<li>Indore</li>
<li>Vishakapatnam</li>
<li>Surat</li>
<li>Mysore</li>
</ul>

app.js

var app = angular.module("myapp",['ng-route']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl : 'index.html',
controller : 'mainController'
})
.when('/city',{
templateUrl : 'city.html',
controller : 'cityController'
})
.when('/clean',{
templateUrl : 'clean.html',
controller : 'cleanController'
})
.otherwise({redirectTo:'/'
});
}
]);

var controller = app.controller("mainController" , ['$scope',function($scope){
$scope.message = "We are in main page!!!..."
}
]);

var controller = app.controller("cityController" , ['$scope',function($scope){
$scope.message = "We are listing down top It cities!!!..."
}
]);

var controller = app.controller("cleanController" , ['$scope',function($scope){
$scope.message = "We are showing  top 5  cleanest cities!!!..."
}
]);

Here we are using AngularJS default routeProvider service.It contains two methods namely ‘when’ and ‘otherwise’.

when

It accepts two parameters namely ‘path‘ and ‘route‘. Path is the Url of the redirected page and route is an object contains properties like below

templateUrl – Here we’ll give the template file name that should be loaded.

controller – This should be the controller associated with the template file.

template – Instead of using templateUrl we can directly embed our template code here.

otherwise

If none of the routes mentioned with the Url matches then the page will be redirected to the Url specified in this method.It accepts a single route parameter with a redirectTo property.

ng-view

The preferred template will be embedded into the HTML page using ng-view directive.This can be used as an attribute or an element.

URL’s without hash(“#”)

Using HTML5 we can remove the # tags from URL.Steps are outlined below

  1. Enable HTML5 routing mode using $locationProvider service.
    angular.module('app',['ng-route']).config(function($locationProvider){
    $locationProvider.html5Mode(true);
    });
  2. From HTML page remove ‘#’ in href attribute
    <a href='/home'>Home</a>
  3.  Add <base> tag in your HTML file’s head section.This will let Angular know what is the base path of your app so it would know how to change the browser URL correctly.
    <base href="/"

ng-template

This directive is used to define the views in-line and load them based on requested URL through angular routing.

In the above example, we have used two different files city.html and clean.html to load the different views instead of creating the code in a separate file we can place that content in index.html itself using ng-template.

This should be applied to <script> tag with the type attribute and filename is mentioned with an id attribute.

Example

<!DOCTYPE html>
<html>
<head>
<title>Routing Example</title>
<script src="app.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/angular-route.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
<div style="text-align:center;background-color:black;color:white">
<a href="#/city">Top IT Cities</a>
<a href="#/clean">Top 5 cleanest cities</a>
 {{message}}
<div ng-view></div>
<script type="text/ng-template" id="city.html">
<ul>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Pune</li>
<li>Delhi</li>
</ul>
</script>
<script type="text/ng-template" id="clean.html">
<ul>
<li>Bhopal</li>
<li>Indore</li>
<li>Vishakapatnam</li>
<li>Surat</li>
<li>Mysore</li>
</ul>
</script>
</div>
</body>
</html>

Here HTML file names are given as id’s to the templates.So, whenever the URL is requested then the corresponding template will be loaded.

ui-router

Unlike ngRoute which is an angular core module, this is a third party module supports complex or nested views.Here it deals with states instead of URLs.

Add a reference to external library angular-ui-router.js in your HTML file and use $stateProvider and $urlRouteProvider for configuring routes.

Example

Page1.html

<!DOCTYPE html>
<html>
<head>
<title>Angular ui-router example</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="mainApp" ng-controller="mainController">
<div>
We are in main page - Page1!!!
<a ui-sref = "Page2">Page2</a>
<a ui-sref = "Page3">Page3</a>
</div>
<div ui-view></div>
<script src="text/ng-template" id="/Page2.html">
<div>
<h1> Welcome to page2 !!!!
</div>
</script>
<script src="text/ng-template" id="/Page3.html">
<div>
<h1> Welcome to page3 !!!!
</div>
</script>
</body>
</html>

app.js

var app = angular.module("mainApp",["ui.router"]);
app.controller("mainController", function($scope){
$scope.message = "Am in main page - Page1";
});

app.config(['$stateProvider','$urlRouteProvider',function($stateProvider,urlRouteProvider){
$stateProvider.state('Page1',{
url : "/Page1",
templateUrl : "/Page1.html"})
.state('Page2',{
url : "/Page2",
templateUrl : "/Page2.html"})
.state('Page3',{
url : "/Page3",
templateUrl : "/Page3.html"});

$urlRouteProvider.otherwise({redirectTo : "/Page1"});
}
}]);

Here we are using “ui.router” module and <ui-view> in HTML to render the requested template. $stateProvider service provides state method which accepts parameters like ‘state name’ and ‘route’ object and ‘route’ in turn accepts URL, templateUrl and controller parameters.

$urlRouteProvider is used to configure redirect routes with the otherwise method.

Leave a Reply

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