Download to read offline
![ ng-init
Initializes an AngularJS Application data.
It is used to put values to the variables to be used in the application
ng-app
Defines the root element.
Automatically initializes or bootstraps the application when web page containing
AngularJS Application is loaded.
Also used to load various AngularJS modules in AngularJS Application.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
... </div>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-3-320.jpg)
![ Example
<html>
<head> <title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-
GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-5-320.jpg)
![uppercase and lowercase
<!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="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
<p>The name is {{ lastName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-10-320.jpg)
![Currency<!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="costCtrl">
<h1>Price: {{ price | currency }}</h1>
<h1>Price: {{ price | currency :"Rs"}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 58;
});
</script>
<p>The currency filter formats a number to a currency format.</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-11-320.jpg)
![<!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="datCtrl">
<p>Date = {{ today | date }}</p>
<p>Date = {{ today | date : "dd.MM.y"}}</p>
<p>Date with time = {{ today | date :" M/d/yy h:mm a"}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-13-320.jpg)
![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.
<!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">
<ul>
<li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani', 'Gusto','Ford','BMW','Santro'
];
});
</script>
<p>This example displays only the names containing the letter "i".</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-14-320.jpg)
![var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [ 'Jani','Carl', 'Hege', 'Joe', 'Birgit','Mary', 'Kai' ];
});
</script>
<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-16-320.jpg)
![<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm“ redirects to main.htm when nothing is
clicked
})
.when("/london", {
templateUrl : "london.htm“ redirects to london.htm when City 1 is
clicked
})
.when("/paris", {
templateUrl : "paris.htm“ redirects to paris.htm when City 2 is
clicked
});
});
</script>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/85/Angular-directive-filter-and-routing-19-320.jpg)
![ ng-init
Initializes an AngularJS Application data.
It is used to put values to the variables to be used in the application
ng-app
Defines the root element.
Automatically initializes or bootstraps the application when web page containing
AngularJS Application is loaded.
Also used to load various AngularJS modules in AngularJS Application.
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
... </div>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-3-2048.jpg)
![ Example
<html>
<head> <title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-
GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-5-2048.jpg)
![uppercase and lowercase
<!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="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
<p>The name is {{ lastName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-10-2048.jpg)
![Currency<!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="costCtrl">
<h1>Price: {{ price | currency }}</h1>
<h1>Price: {{ price | currency :"Rs"}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 58;
});
</script>
<p>The currency filter formats a number to a currency format.</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-11-2048.jpg)
![<!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="datCtrl">
<p>Date = {{ today | date }}</p>
<p>Date = {{ today | date : "dd.MM.y"}}</p>
<p>Date with time = {{ today | date :" M/d/yy h:mm a"}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-13-2048.jpg)
![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.
<!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">
<ul>
<li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani', 'Gusto','Ford','BMW','Santro'
];
});
</script>
<p>This example displays only the names containing the letter "i".</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-14-2048.jpg)
![var app = angular.module('myApp', []);
app.filter('myFormat', function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [ 'Jani','Carl', 'Hege', 'Joe', 'Birgit','Mary', 'Kai' ];
});
</script>
<p>Make your own filters.</p>
<p>This filter, called "myFormat", will uppercase every other character.</p>
</body>
</html>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-16-2048.jpg)
![<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm“ redirects to main.htm when nothing is
clicked
})
.when("/london", {
templateUrl : "london.htm“ redirects to london.htm when City 1 is
clicked
})
.when("/paris", {
templateUrl : "paris.htm“ redirects to paris.htm when City 2 is
clicked
});
});
</script>](https://image.slidesharecdn.com/angulardirectivefilterandrouting-200425074729/75/Angular-directive-filter-and-routing-19-2048.jpg)
Uploaded byjagriti srivastava
Angular directive filter and routing
The document discusses various Angular directives and filters. It provides examples of common directives like ng-app, ng-controller, ng-model, ng-repeat, ng-show, ng-hide and ng-include. It also demonstrates how to use filters for currency formatting, uppercase, lowercase, date formatting and creating custom filters. The last section explains routing in Angular and provides a basic example to navigate between multiple pages while keeping it a single page application.
More Related Content
Similar to Angular directive filter and routing
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Angular directive filter and routing
- 1. Angular Directive Filter andRouting JAGRITI SRIVASTAVA
- 2. Common Angular Directives ng-app ng-controller ng-view ng-init ng-model ng-repeat ng-show ng-hide ng-include
- 3. ng-init Initializesan AngularJS Application data. It is used to put values to the variables to be used in the application ng-app Defines the root element. Automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. Also used to load various AngularJS modules in AngularJS Application. <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> ... </div>
- 4. ng-model Thisdirective binds the values of AngularJS application data to HTML input controls. ng-repeat ng-repeat directive repeats html elements for each item in a collection. <div ng-app = ""> ... <p>Enter your Name: <input type = "text" ng-model = "name"></p> </div> <div ng-app = ""> ... <p>List of Countries with locale:</p> <ol> <li ng-repeat = "country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li> </ol> </div>
- 5. Example <html> <head> <title>AngularJSDirectives</title> </head> <body> <h1>Sample Application</h1> <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en- GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> <p>Enter your Name: <input type = "text" ng-model = "name"></p> <p>Hello <span ng-bind = "name"></span>!</p> <p>List of Countries with locale:</p> <ol> <li ng-repeat = "country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li> </ol> </div> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </body> </html>
- 6. ng-hide : hideselement when checkbox is clicked <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app=""> Hide HTML: <input type="checkbox" ng-model="myVar"> <div ng-hide="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> </div> </body> </html>
- 7. ng-show : showscertain element when checkbox is clicked <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app=""> Show HTML: <input type="checkbox" ng-model="myVar"> <div ng-show="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> </div> </body> </html>
- 8. ng-include ....to includetemplate Html doesn’t support embedding html page into html page But angularjs provides functionality of embedding html into another html page using ng-include <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app=""> <div ng-include="'myFile.htm'"></div> </body> </html> Index.html
- 9. Filters They formatthe value of an expression for displaying to the end user They are added to expressions by using the pipe character | , followed by a filter It can be used in view templates as well as in controller. More than one filters can be used. Some built-in filters are Currency Uppercase Date Lowercase search
- 10. uppercase and lowercase <!DOCTYPEhtml> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> <p>The name is {{ lastName | lowercase }}</p> </div> <script> angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "John", $scope.lastName = "Doe" }); </script> </body> </html>
- 11. Currency<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <divng-app="myApp" ng-controller="costCtrl"> <h1>Price: {{ price | currency }}</h1> <h1>Price: {{ price | currency :"Rs"}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.price = 58; }); </script> <p>The currency filter formats a number to a currency format.</p> </body> </html>
- 12. Date filter Bydefault, the format is "MMM d, y" (Jan 5, 2016). Date format can be changed as "short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM) "medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05 AM) "shortDate" same as "M/d/yy" (1/5/16) "mediumDate" same as "MMM d, y" (Jan 5, 2016) "longDate" same as "MMMM d, y" (January 5, 2016) "fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016) "shortTime" same as "h:mm a" (9:05 AM) "mediumTime" same as "h:mm:ss a" (9:05:05 AM)
- 13. <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <divng-app="myApp" ng-controller="datCtrl"> <p>Date = {{ today | date }}</p> <p>Date = {{ today | date : "dd.MM.y"}}</p> <p>Date with time = {{ today | date :" M/d/yy h:mm a"}}</p> </div> <script> var app = angular.module('myApp', []); app.controller('datCtrl', function($scope) { $scope.today = new Date(); }); </script> <p>The date filter formats a date object to a readable format.</p> </body> </html>
- 14. 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. <!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"> <ul> <li ng-repeat="x in names | filter : 'a'"> {{ x }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Jani', 'Gusto','Ford','BMW','Santro' ]; }); </script> <p>This example displays only the names containing the letter "i".</p> </body> </html>
- 15. Custom Filter <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script> <body> <ulng-app="myApp" ng-controller="namesCtrl"> <li ng-repeat="x in names"> {{x | myFormat}} </li> </ul> <script>
- 16. var app =angular.module('myApp', []); app.filter('myFormat', function() { return function(x) { var i, c, txt = ""; for (i = 0; i < x.length; i++) { c = x[i]; if (i % 2 == 0) { c = c.toUpperCase(); } txt += c; } return txt; }; }); app.controller('namesCtrl', function($scope) { $scope.names = [ 'Jani','Carl', 'Hege', 'Joe', 'Birgit','Mary', 'Kai' ]; }); </script> <p>Make your own filters.</p> <p>This filter, called "myFormat", will uppercase every other character.</p> </body> </html>
- 17. Routing To navigatebetween multiple pages but make application work as single page application routing is used. Since html page can not embed another html page in it routing in ANGULARJS provides such functionality. To make routing work the angular app must run on server So to run angular app in server Install xampp Create angular app Add angular-route.js file to your application to enable routing. Add your app inside xampp/htdocs Run the application
- 18. Routing example : create index.html Add angular-route.js in the script Main, City 1, City 2 to navigate between all three pages called by them <body ng-app="myApp"> <p><a href="#/!">Main</a></p> <a href="#!london">City 1</a> <a href="#!paris">City 2</a>
- 19. <script> var app =angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.htm“ redirects to main.htm when nothing is clicked }) .when("/london", { templateUrl : "london.htm“ redirects to london.htm when City 1 is clicked }) .when("/paris", { templateUrl : "paris.htm“ redirects to paris.htm when City 2 is clicked }); }); </script>