You are on page 1of 27

AngularJS Training

- Day 8
By
George

Agenda

$emit, $broadcast and $on


$timeout & $interval
$http service
$http.get()
$http.head()
$http.post()
$http.put()
$http.delete()
$http.jsonp()
$http.patch()
$resource service
get()
query()
save()
remove()
delete()
$q service
$q.all

$on, $emit, and $broadcast

AngularJS provides $on, $emit, and $broadcast services for event-based


communication between controllers.

$emit

It dispatches an event name upwards through the scope hierarchy and


notify to the registered $rootScope.Scope listeners

The event life cycle starts at the scope on which $emit was called.

The event traverses upwards toward the root scope and calls all registered
listeners along the way

The event will stop propagating if one of the listeners cancels it.

$emit

$broadcast
It dispatches an event name downwards to all child scopes (and

their children) and notify to the registered $rootScope.Scope


listeners.

The event life cycle starts at the scope on which $broadcast was

called.

The event traverses downwards toward the child scopes

And, calls all registered listeners along the way. The event cannot be

canceled.

$broadcast

$on
It listen on events of a given type. It can
catch the event dispatched by $broadcast
and $emit.

$timeout & $interval


$timeout:
The $timeout service is similar JavaScript's setTimeout() function. And
the functionality is also similar

$timeout service can be used to call another JavaScript function after a


given time delay

The $timeout service only schedules a single call to the function.

$interval
$interval services is similar to JavaScript setInterval() functions . And, the
functionality is also similar

The $interval service is similar in function to the $timeout service, except


it schedules a function for repeated execution with a time interval in
between.

$timeout

Injecting $timeout

Scheduling a Function Call

$interval

Injecting $interval

Scheduling a Repeated Function Call

$http

The $http service is the easiest way to send AJAX calls to your web server

The $http API is based on the deferred/promise APIs exposed by the $q


service.

The $http legacy promise methods success and error have been
deprecated. Use the standard then method instead

$http services methods:

$http.get(url, config)

$http.post(url, data, config)

$http.put(url, data, config)

$http.delete(url, config)

$http.head(url, config)

GET:

The GET method means retrieve whatever information (in the form of an entity) is identified by the RequestURI

HEAD:

The HEAD method is similar to GET except that the server MUST NOT return a message-body in the
response

POST:

The POST method is used to provide a block of data to server -- And, then the server will manupulate the
data and save them into the DB and give the response back

The PUT method used to update any data to the server


$http.post() and $http.put() functions take a data parameter which contains data to be sent to the server.
The rest of the $http functions cannot take a data parameter.

PUT:

DELETE:

The DELETE method requests that the origin server delete the resource identified by the Request-URI

$http as a Function
Use the $http service as a function directly
var promise = $http(config);

In this case the URL and HTTP method


are also set inside the config object.

The config Parameter

The config parameter passed to the different $http functions controls the HTTP
request sent to the server. The config parameter is a JavaScript object which can
contain the following properties:

method

url

params

headers

timeout

cache

transformRequest

transformResponse

The config Parameter...


method:

The method property can be used to set the HTTP method for the request.

The method is one of either


GET,
POST,
PUT,
DELETE
HEAD.

This property is normally set implicitly via the function you choose to call on the $http service

url:

The url property can be used to set the URL of the AJAX call.
parms:

The params property is used to set any additional request parameters to be appended to the URL
query string.
The params property is a JavaScript object with one property per request parameter to add.

The config Parameter...


headers:
The headers property is used to set any additional HTTP headers
you want sent to the server.
The headers property is a JavaScript object with one property per
header.
timeout
The timeout property is used to set the timeout for the AJAX call.
When the timeout limit is reached, the AJAX call is aborted. The
timeout is specified in milliseconds.
cache
The cache property is used to enable XHR GET request caching.

$resource
A factory which creates a resource object
that lets you interact with RESTful serverside data sources.
Built on the top of the $http service
Angulars $resource is a factory that lets
you interact with RESTful backends easily.

$resource CURD

Prerequisites

The $resource service doesnt come bundled with the main Angular script.

You need to download a separate file called angular-resource.js and include


it in your HTML page.

The script can be downloaded from


http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angularresource.min.js.

Also, your main app module should declare a dependency on the


ngResource module in order to use $resource. The following example
demonstrates how to do it:

How Does $resource Work?

inside your controller/service you need to declare a dependency on $resource


calling the $resource() function with your REST endpoint,

The result of the function call is a resource class object which has the following five
methods by default:

get()
query()
save()
remove()
delete()

How Does $resource Work?..

How Does $resource Work?..


All the non GET methods like save() and
delete() are also available in the instance
obtained by calling new Entry()
But the difference is that these methods
are prefixed with a $

put method

stripTrailingSlashes

The $resource function also has an optional fourth parameter.

This is a hash with custom settings.

Currently, there is only one setting available which is stripTrailingSlashes.

By default this is set to true, which means trailing slashes will be removed from
the URL you pass to $resource().

If you want to turn this off you can do so like this:

$q Services

A service that helps you run functions asynchronously, and use their return values (or
exceptions) when they are done processing.

$q Services..

You might also like