Scribd
Upload
32 views11 pages

Filter Service

Uploaded by

vinushirley
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views11 pages

Filter Service

Uploaded by

vinushirley
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

ANGULAR JS

FILTERS,SERVICES AND DOM


FILTERS
• Filters can be added in AngularJS to format
data.
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.
• 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.


SERVICES
• A service is a function, or object, that is
available for, and limited to, AngularJS
application.

• User can make their own service, or use one of


the many built-in services.

• AngularJS has about 30 built-in services. One of


them is the $location service.
•$http: Used for making HTTP requests to retrieve data from a server.

•$scope: Used to share data and functions between controllers and views.

•$location: Provides information about the current URL and allows you to
manipulate it.
1. Location Service
Use the $location service in a controller

• var app = angular.module('myApp', []);


app.controller('customersCtrl', function($scop
e, $location) {
$scope.myUrl = $location.absUrl();
});
<!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="customersCtrl">

<h1> SERVICE </h1><br>


{{myUrl}}

</div>

<script>

var app = angular.module('myApp', []);


app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();});

</script>

</body>
</html>
2. HTTP
• $http is an AngularJS service for reading data
from remote servers.

• The AngularJS $http service makes a request


to the server and returns a response. It Make
a simple request to the server and display the
result in a header.
HTML - DOM
• AngularJS has directives for binding
application data to the attributes of HTML
DOM elements.

The ng-disabled Directive


• The ng-disabled directive binds AngularJS
application data to the disabled attribute of
HTML elements.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="" ng-init=“S=true">


<p>
<button ng-disabled=“S">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="S"/>Button
</p>
<p>
{{S}}
</p>
</div>

</body>
</html>
• The ng-disabled directive binds the
application data S to the HTML
button's disabled attribute.

• The ng-model directive binds the value of the


HTML checkbox element to the value of S.

You might also like