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
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. 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
5. Familiar AngularJS Services
• $scope
• $rootScope
• $location
• $http and $resource
• That’s right, doing almost anything useful in AngularJS involves injecting
a service
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. 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. 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. 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. 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