Angular directive filter and routing

Angular Directive
Filter and Routing
JAGRITI SRIVASTAVA

Common Angular Directives
 ng-app
 ng-controller
 ng-view
 ng-init
 ng-model
 ng-repeat
 ng-show
 ng-hide
 ng-include

 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>

 ng-model
 This directive 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>

 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>

ng-hide : hides 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="">
Hide HTML: <input type="checkbox" ng-model="myVar">
<div ng-hide="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
</body>
</html>

ng-show : shows certain 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>

ng-include ....to include template
 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>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>
Index.html

Filters
 They format the 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

uppercase and lowercase
<!DOCTYPE html>
<html>
<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>

Currency<!DOCTYPE html>
<html>
<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>

Date filter
 By default, 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)

<!DOCTYPE html>
<html>
<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>
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>

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>
<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>

Custom Filter
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"><
/script>
<body>
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | myFormat}}
</li>
</ul>
<script>

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>

Routing
 To navigate between 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

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>

Angular directive filter and routing

Angular directive filter and routing

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angular directive filter and routing

Similar to Angular directive filter and routing (20)

More from jagriti srivastava

More from jagriti srivastava (14)

Recently uploaded

Recently uploaded (20)

Angular directive filter and routing