AngularJS View And Routing

Article

AngularJS is a framework that is used for develop the single page application, so if we add more and more logic to an app, it will be very difficult to manage the application. Dividing the application in multiples Views and using Routing to load different part of application is the solution of this problem making it more manageable. To do this AngularJS has provided ng-view and ng-template directives and $routeProvider services. Routing is used to divide your application in logical views and bind different views to Controllers.

Example:

<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
</script>
<style>
a {
margin-right: 20px;
}
#div1 {
background-color: aqua;
width: 500px;
}
#div2 {
background-color: #7085EF;
width: 500px;
}
#div3 {
background-color: #7BEF70;
width: 500px;
}
</style>
</head>
<body>
<h2>AngularJS Routing and View Application</h2>
<divng-app="myApp">
<ahref="#viewDelhi">View Delhi
</a>
<ahref="#viewMumbai">View Mumbai
</a>
<ahref="#viewJaipur">View Jaipur
</a>
<divng-view>
</div>
<scripttype="text/ng-template" id="delhi.htm">
<div id="div1">
<h2> Delhi </h2>
<img src="delhi.png" />
<br/> {{message}}
</div>
</script>
<script type="text/ng-template" id="mumbai.htm">
<div id="div2">
<h2> Mumbai </h2>
<imgsrc="mumbai.png" />
<br/> {{message}}
</div>
</script>
<script type="text/ng-template" id="jaipur.htm">
<div id="div3">
<h2> Jaipur </h2>
<imgsrc="jaipur.png" />
<br/> {{message}}
</div>
</script>
</div>
<script>
var mainApp = angular.module("myApp", ['ngRoute']);
mainApp.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.
when('/viewDelhi',
{
templateUrl: 'delhi.htm',
controller: 'AddDelhi'
}).
when('/viewMumbai',
{
templateUrl: 'mumbai.htm',
controller: 'AddMumbai'
}).
when('/viewJaipur',
{
templateUrl: 'jaipur.htm',
controller: 'AddJaipur'
}).
otherwise(
{
redirectTo: '/viewDelhi'
});
}]);
mainApp.controller('AddDelhi', function ($scope)
{
$scope.message = "Delhi, India’s capital territory, is a massive metropolitan area \
in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, \
stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling, \
Jama Masjid mosque, whose courtyard accommodates 25,000. Nearby is ChandniChowk, \
a vibrant bazaar filled with food carts, \
sweets shops and spice stalls ";
});
mainApp.controller('AddMumbai', function ($scope)
{
$scope.message = "Mumbai City District is a district of Maharashtra in KonkanDivision.As a city district,\
it has no headquarters or subdivisions. makes up the metropolis of Mumbai. ";
});
mainApp.controller('AddJaipur', function ($scope)
{
$scope.message = "Jaipur, the capital of India’s Rajasthan state, evokes the royal family\
that once ruled the region and that, in 1727, \
founded what is now called the Old City, or Pink City for its trademark building color.At the center of its stately street grid (notable in India) stands the opulent,\
collonaded City Palace complex, \
today houses several museum collections of textiles and art ";
}); < /script> < /body> < /html>

Output:

See output

In above example we create a view and three different templates for view and at last we configured the roots for these templates. Now we divide the above code section in multiple sections and read above each part.

ng-view

ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Example:

<divng-app="myApp">
<divng-view></div>
</div>

ng-template

The ng-template directive is used to create an html view using script tag. In our example we create three templates. Each templates contains "id" attribute which is used by $routeProvider to map a view with a controller. A template is like a html page itself, in a template we add any html element.

Example:

<scripttype="text/ng-template"id="delhi">
<div id="div1">
<h2> Delhi </h2>
<imgsrc="delhi.png" />
<br/>
{{message}}
</div>
</script>
<scripttype="text/ng-template"id="mumbai">
<div id="div2">
<h2> Mumbai </h2>
<imgsrc="mumbai.png" />
<br/>
{{message}}
</div>
</script>
<scripttype="text/ng-template"id="jaipur">
<div id="div3">
<h2> Jaipur </h2>
<imgsrc="jaipur.png" />
<br/>
{{message}}
</div>
</script>

$routeProvider

The $routeProvider is used to set the configuration of urls and map them with the corresponding html page or ng-template and also attach a controller. Routing in AngularJS is taken care by a service provide that is called $routeProvider. Routes for templates and urls in Angular are declared via the $routeProvider, that is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser.

We can use config() method of “myApp” module to configure $routeProvider. The when method of $routeProvideris used to bind the url with a template. This method take a url(i.e. “/viewDelhi”) that will map with a template (i.e. delhi.htm) using the templateUrl parameter. The when method also bind a controller for template using the controller parameter (i.e. controller: 'AddDelhi'), otherwise method is used to set the default view.

Example:

mainApp.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.
when('/viewDelhi',
{
templateUrl: 'delhi',
controller: 'AddDelhi'
}).
when('/viewMumbai',
{
templateUrl: 'mumbai',
controller: 'AddMumbai'
}).
when('/viewJaipur',
{
templateUrl: 'jaipur',
controller: 'AddJaipur'
}).
otherwise(
{
redirectTo: '/viewDelhi'
});
}]);

Pass Parameter to Route Urls

In previous example we learn how to define the routes for different templates. Now we learn how to pass parameter in Route Urls. In below example we created a list of students, this list contain name, id, city and class information of student. Now we want to create a program through which we can filter the students record as per their city. For this we create a single template and define multiple route for different city. We distinguish the route according the parameter that is passed in route urls.( i.e. href = "#StudentList/0").

Example:

<html>
<head>
<title>Angular JS Views</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">
</script>
<style>
a {
margin-right: 20px;
}
#div1 {
background-color: aqua;
width: 500px;
}
#h1 {
color: red;
}
</style>
</head>
<body>
<h2>AngularJS Routing and View Application</h2>
<divng-app="myApp">
<ahref="#StudentList/0">Student of All City
</a>
<ahref="#StudentList/1">Student of Delhi City
</a>
<ahref="#StudentList/2">Student of Alwar City
</a>
<ahref="#StudentList/3">Student of Jaipur City
</a>
<divng-view>
</div>
<scripttype="text/ng-template" id="Demo.htm">
<div id="div1">
<h2 id="h1">{{message}}</h2>
<table>
<th>
<td>Id</td>
<td>Name</td>
<td>Class</td>
<td>City</td>
</th>
<trng-repeat="studnt in Data()">
<td>{{studnt.Id}}</td>
<td>{{studnt.Name}}</td>
<td>{{studnt.Class}}</td>
<td>{{studnt.City_}}</td>
</tr>
<table>
</div>
</script>
</div>
<script>
varmainApp = angular.module("myApp", ['ngRoute']);
mainApp.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.
when('/StudentList/:id',
{
templateUrl: 'Demo.htm',
controller: 'myController'
}).
otherwise(
{
redirectTo: '/StudentList/0'
});
}]);
mainApp.controller('myController', function ($scope, $routeParams)
{
$scope.data = $routeParams.id;
$scope.studentObject = [
{
Id: 10,
Name: "Pankaj",
Class: 12,
City_: "Alwar"
},
{
Id: 11,
Name: "Sandeep",
Class: 11,
City_: "Jaipur"
},
{
Id: 12,
Name: "Neeraj",
Class: 12,
City_: "Delhi"
},
{
Id: 13,
Name: "Rahul",
Class: 10,
City_: "Alwar"
},
{
Id: 14,
Name: "Sanjeev",
Class: 11,
City_: "Jaipur"
},
{
Id: 15,
Name: "Priya",
Class: 10,
City_: "Delhi"
},
{
Id: 16,
Name: "Narendra",
Class: 12,
City_: "Alwar"
},
{
Id: 17,
Name: "Omveer",
Class: 11,
City_: "Jaipur"
},
{
Id: 18,
Name: "Divyanshu",
Class: 11,
City_: "Delhi"
}];
$scope.Data = function ()
{
varObj = new Array();
if ($scope.data == 0)
{
$scope.message = "List Of All Student";
return $scope.studentObject;
}
elseif($scope.data == 1)
{
$scope.message = "List Of Delhi Student";
for (i = 0; i < $scope.studentObject.length; i++)
{
if ($scope.studentObject[i].City_ === "Delhi")
{
Obj.push($scope.studentObject[i]);
}
}
returnObj;
}
elseif($scope.data == 2)
{
$scope.message = "List OfAlwar Student";
for (i = 0; i < $scope.studentObject.length; i++)
{
if ($scope.studentObject[i].City_ === "Alwar")
{
Obj.push($scope.studentObject[i]);
}
}
returnObj;
}
elseif($scope.data == 3)
{
$scope.message = "List Of Jaipur Student";
for (i = 0; i < $scope.studentObject.length; i++)
{
if ($scope.studentObject[i].City_ === "Jaipur")
{
Obj.push($scope.studentObject[i]);
}
}
returnObj;
}
}
});
< /script>
< /body>
< /html>

Output:

List of all students:

tere sang movie torrent

List of student belong to Alwar City.

In above example we created a single template and define the routing url that also contain a parameter of integer type. According the value of this parameter we are doing the filtration of student record.

I hoped you liked this article, thanks for reading.