Guide to AngularJS Services - NOVA MEAN August 2014

1,139 views

Published on

Presentation to the NOVA MEAN (Northern Virginia MongoDB/Express/AngularJS/NodeJS) meetup group August 19, 2014 on AngularJS services, what they are, and why and how to use them

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,139
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Guide to AngularJS Services - NOVA MEAN August 2014

  1. 1. AngularJS Services NOVA MEAN August 2014 Presentation Jonathan M.Altman
  2. 2. Why Talk About Angular Services? It wasn’t until I truly, deeply understood that writing your own services was an integral part of AngularJS development that using AngularJS got easy ! ! My fortune while preparing this deck☞
  3. 3. What Is A Service? AngularJS “Angular services are substitutable objects that are wired together using dependency injection (DI).You can use services to organize and share code across your app. Angular services are: • Lazily instantiated – Angular only instantiates a service when an application component depends on it. • Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.“ https://docs.angularjs.org/guide/services
  4. 4. Sample Service angular.module('sampleApp.services')   ! .service('sessionManager',  ['$rootScope',  '$resource',  function   ($rootScope,  $resource)  {     //  We  literally  do  nothing,  but  we  have  access  to  $rootScope     //  and  $resource   }]);   ! //  Congratulations,  this  is  your  first  service.    It  does  nothing,   but  it’s  a  valid  service
  5. 5. Familiar AngularJS Services • $scope • $rootScope • $location • $http and $resource • That’s right, doing almost anything useful in AngularJS involves injecting a service
  6. 6. Using a Service app.controller(‘SomeCntl’,  [‘$scope’,  ‘$http’,   ‘sessionManager’,  function($scope,  $http,   sessionManager){   //  and  now  you  have  the  $scope,  $http,  and   //  sessionManager  services  available   }]);
  7. 7. What is a Service? Really • A service is a singleton instance of an object available for dependency injection in AngularJS • Objects are an encapsulation of the state of a set of one or more properties… • And the ability to perform operations whose outcome is based on the current state
  8. 8. Service Interaction • Services are a way to provide controllers inter- and cross-scope communication with each other and to common capabilities in a non- hierarchical way: not just scopes but also filters, directives, and other services • More generally, services provide inter- and cross-communication across scopes, services, filters, and other AngularJS artifacts • Anti-pattern: every $scope has access to its parent or $rootScope. Walk $scope tree or use $rootScope as a global dumping ground for inter-scope and scope-to communication
  9. 9. Encapsulation != Persistence • Just because a service encapsulates state does not mean you can persist the state there • Refresh of the page blows away and re-creates the service instance, and along with it any state that it holds • However, services CAN encapsulate access to persistence like LocalStorage to allow various controllers CRUD access to persistent state for e.g. server session state management (login/logout/current session state)
  10. 10. Useful Service Patterns • Services should expose functions that controllers, interceptors, or other services which inject the service can call to update service state • Broadcast the corresponding results of your state change operations via events using $rootScope.broadcast • Interested listeners avoid circular dependencies/watching by just registering to receive service events they care about • You can put the state change data listeners care about into the event payload so listeners can act just from the event without further calls
  11. 11. Worked Example See http://plnkr.co/edit/4XuDZb?p=preview for an example of a functioning service
  12. 12. Questions? https://async.io/ @async_io

×