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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Angular directive filter and routing

Similaire à Angular directive filter and routing (20)

Plus de jagriti srivastava

Plus de jagriti srivastava (14)

Dernier

Dernier (20)

Angular directive filter and routing