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

1. AngularJS Services
NOVA MEAN August 2014 Presentation
Jonathan M.Altman

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

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

11. Worked Example
See http://plnkr.co/edit/4XuDZb?p=preview for an example of a functioning service

12. Questions?
https://async.io/
@async_io