AngularJS Routing

In AngularJS ngRoute module is used to make a page as an Single Page Application.

This attribute Routes the application to any different page without any reloading the entire application.

If any User has to navigate to different page and it should be an SPA(Single Page Application) then the best way to use is an ngRoute module.

Routing.

Routing can be done from one page to other page as such Here is an example provided.

Example:

< body ng-app="app" >
< p > < a href="/">Home
/>
< a href="#!apple">Apple >
< a href="#!Mango">Mango >
< a href="#!grapes">grapes >
< /a > < /p > script >
var app = angular.module('app',["ngRoute" ])
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl : "Home.htm"})
.when("/Apple", {templateUrl : "Apple.htm"})
.when("/Mango", {templateUrl : "Mango.htm"})
.when("/Grapes", {templateUrl : "grapes.htm"})
});
< /script >

Anguar JS Need

In Order to make our application ready for outing one have to include AngularJS Route Module .


ng-view Directive

Every Application needs an container which is provided by routing.

There are many ways of representing an ng-view directive in an Application.

Example:

< div ng-view >
< /div >

$routeProvider

With this attribute $routeProvider user can define which page to be displayed when user clicks an links.

Example:

var app = angular.module('app',["ngRoute" ])
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl : "Service.htm"})
.when("/Hyderabad", {templateUrl : "Hyderabad.htm"})
.when("/Chennai", {templateUrl : "Chennai.htm"})
.when("/Mumbai", {templateUrl : "Mumbai.htm"})
});

Controllers in AngularJS

With a $routeProvider we can define a controller for each and every view .

Example:

var app = angular.module('app',["ngRoute" ])
app.config(function($routeProvider) {
$routeProvider
.when("/", {templateUrl : "Service.htm"})
.when("/Hyderabad", {templateUrl : "Hyderabad.htm" controller : "HydCtrl"})
.when("/Chennai", {templateUrl : "Chennai.htm" controller : "CheCtrl"})
.when("/Mumbai", {templateUrl : "Mumbai.htm" controller : "MumCtrl"})
});
app.controller("HydCtrl") , function($scope) {
$scope.msg = "Hyderabd is an Tourist Place;"
app.controller("CheCtrl") , function($scope) {
$scope.msg = "Chennai has a Largest Beach Area;"
app.controller("MumCtrl") , function($scope) {
$scope.msg = "Mumbai is Busy state in India;" });