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

URI

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

PUT:– 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.

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 server-side data sources.

• Built on the top of the $http service

• Angular’s $resource is a factory that lets you interact with RESTful backends easily.

$resource CURD

Prerequisites

• The $resource service doesn’t 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/angular-resource.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..