AngularJS GÇô Tutorial-#8.pptx.ppt
-
Upload
georgeananthprolog -
Category
Documents
-
view
11 -
download
1
Transcript of AngularJS GÇô Tutorial-#8.pptx.ppt
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..