Scribd
Upload
2 views

Module 5

The document outlines various features of AngularJS, including filters for data transformation, services for application functionality, event handling, and form validation. It describes built-in services like $location, $http, $timeout, and $interval, as well as how to create custom services. Additionally, it explains how to utilize event directives and perform client-side form validation with HTML5 attributes.

Uploaded by

vinayak.nikkam20
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Module 5

The document outlines various features of AngularJS, including filters for data transformation, services for application functionality, event handling, and form validation. It describes built-in services like $location, $http, $timeout, and $interval, as well as how to create custom services. Additionally, it explains how to utilize event directives and perform client-side form validation with HTML5 attributes.

Uploaded by

vinayak.nikkam20
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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.

Ex.

Adding Filters to Expressions


Filters can be added to expressions by using the pipe character |, followed
by a filter.

The uppercase filter format strings to upper case:

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

The lowercase filter format strings to lower case:

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
AngularJS Services
In AngularJS you can make your own service, or use one of the many
built-in services.

What is a Service?
In AngularJS, a service is a function, or object, that is available for, and
limited to, your AngularJS application.

AngularJS has about 30 built-in services. One of them is


the $location service.

The $location service has methods which return information about the
location of the current web page:

Example
Use the $location service in a controller:

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


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

Note that the $location service is passed in to the controller as an argument. In


order to use the service in the controller, it must be defined as a dependency.

Why use Services?


For many services, like the $location service, it seems like you could use
objects that are already in the DOM, like the window.location object, and
you could, but it would have some limitations, at least for your AngularJS
application.
AngularJS constantly supervises your application, and for it to handle
changes and events properly, AngularJS prefers that you use
the $location service instead of the window.location object.

The $http Service


The $http service is one of the most common used services in AngularJS
applications. The service makes a request to the server, and lets your
application handle the response.

Use the $http service to request data from the server:

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


app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});

This example demonstrates a very simple use of the $http service.

The $timeout Service


The $timeout service is AngularJS' version of
the window.setTimeout function.

Example
Display a new message after two seconds:

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


app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
The $interval Service
The $interval service is AngularJS' version of
the window.setInterval function.

Example
Display the time every second:

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


app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

Create Your Own Service


To create your own service, connect your service to the module:

Create a service named hexafy:

app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});

To use your custom made service, add it as a dependency when defining the
controller:
AngularJS Events
You can add AngularJS event listeners to your HTML elements by using one
or more of these directives:

• ng-blur
• ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste

The event directives allows us to run AngularJS functions at certain user


events.

An AngularJS event will not overwrite an HTML event, both events will be
executed.

Mouse Events
Mouse events occur when the cursor moves over an element, in this order:

1. ng-mouseover
2. ng-mouseenter
3. ng-mousemove
4. ng-mouseleave

Or when a mouse button is clicked on an element, in this order:


1. ng-mousedown
2. ng-mouseup
3. ng-click

You can add mouse events on any HTML element.

Example
Increase the count variable when the mouse moves over the H1 element:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

Form Validation
AngularJS offers client-side form validation.

AngularJS monitors the state of the form and input fields (input, textarea,
select), and lets you notify the user about the current state.

AngularJS also holds information about whether they have been touched, or
modified, or not.

You can use standard HTML5 attributes to validate input, or you can make
your own validation functions.

Client-side validation cannot alone secure user input. Server side validation is also
necessary.
Required
Use the HTML5 attribute required to specify that the input field must be
filled out:

Example
The input field is required:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>


<h1>{{myForm.myInput.$valid}}</h1>

E-mail
Use the HTML5 type email to specify that the value must be an e-mail:

Example
The input field has to be an e-mail:

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>


<h1>{{myForm.myInput.$valid}}</h1>

You might also like