Unit 4
Templates and Routing
Akshata S Bhayyar
Assistant Professor,
Dept. of CSE, RIT
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Content
• Templates and Routing:
• Setting up routing in AngularJS,
• creating views and templates,
• Navigation and route parameters,
• Filters and Custom Filters:
• Built-in filters (e.g., currency, date, filter),
• Creating custom filters for data transformation
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing
• What is Routing in AngularJS?
If you want to navigate to different pages in your application, but you also want the
application to be a SPA (Single Page Application), with no page reloading, you can
use the ngRoute module.
The ngRoute module routes your application to different pages without reloading
the entire application.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing: STEPS
• To make your applications ready for routing, you must include the AngularJS
Route module:
• Then you must add the ngRoute as a dependency in the
application module:
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing: STEPS
• Now your application has access to the route module,
which provides the $routeProvider.
• Use the $routeProvider to configure different routes in
your application:
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing: STEPS
• Where Does it Go?
Your application needs a container to put the content provided by
the routing.
This container is the ng-view directive.
There are three different ways to include the ng-view directive in
your application:
• Example
• Applications can only have one ng-view directive, and this will be the placeholder for all views
provided by the route.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing
• $routeProvider
With the $routeProvider you can define what page to display when a
user clicks a link.
Define the $routeProvider using the config method of your
application. Work registered in the config method will be performed
when the application is loading.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing
• Controllers
With the $routeProvider you can also define a controller for each
"view".
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing
• Template
In the previous examples we have used the templateUrl
property in the $routeProvider.when method.
You can also use the template property, which allows you to
write HTML directly in the property value, and not refer to a
page.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Routing
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Navigation + Route Parameters
•Multiple pages (e.g., Home, Users)
•Dynamic URLs like /user/1, /user/2
•Passing data using :id route parameters
•A list of users with clickable links to their detail page
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Create a route that displays a list of users.
Each user name
should link to a detail route
/user/:id that shows the user’s info.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Filters
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
AngularJS Filters
• AngularJS provides filters to transform data:
• currency Format a number to a currency format.
• date Format a date to a specified format.
• filter Select a subset of items from an array.
• json Format an object to a JSON string.
• limitTo Limits an array/string, into a specified number of elements/characters.
• lowercase Format a string to lower case.
• number Format a number to a string.
• orderBy Orders an array by an expression.
• uppercase Format a string to upper case.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Adding Filters to Expressions
• Filters can be added to expressions by using the pipe character |,
followed by a filter.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
The lowercase filter format strings
to lower case:
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Adding Filters to Directives
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"><
/script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script> Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Adding Filters to Directives
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
});
</script>
</body>
</html>
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
The currency Filter
• The currency filter formats a number as currency:
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
The filter Filter
• The filter filter selects a subset of an array.
• The filter filter can only be used on arrays, and it returns an array
containing only the matching items.
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Filter an Array Based on User Input
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Filter an Array Based on User Input
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
Akshata S Bhayyar,Assistant Professor, Dept. of CSE, RIT
