AngularJS Services

https://slides.com/oravecz/ngservices

https://github.com/Transcordia/ng-meetup

Jim Cook

Transcordia LLC

I thought AngularJS is an MVC framework?

• Model
• View
• Controller
• Services?

Purposes of a service

• Implement the Singleton pattern (instantiated by the $injector)

• They are lazy-loaded

• Bundle together similar functionality

• Maintain state for the lifetime of the app

• Provide cross-controller communication

• Integrate with external dependencies

Angular has over 25 built-in services

• HTTP Requests ($http, $resources)

• DOM Utilities ($filter, $document, $animate, $location)

• Angular Management ($rootScope, $parse, $compile) 

• Helpers ($cacheFactory, $log, $timeout, $q)

• Core Functions ($injector, $provide)

Why are services special?

• Why use:
  module.constant('apikey', 'E830AF11');

• When we can simply:
  window.apikey = 'E830AF11';

Dependency Injection

• Software design pattern (Inversion of Control)

• Determines how components get hold of their dependencies

• DI removes responsibility of locating dependency from component

Creating a Dependency Injection service

• Register a service

• Provide a unique name

• Associate a primitive, object or function

A service is injected into another component

function myFilter( $locale ) {
   var formats = $locale.NUMBER_FORMATS;
   return something;
}

// Option 1
myFilter.$inject = ['$locale'];
$injector.invoke( myFilter );
 
// Option 2
$injector.invoke( ['$locale', myFilter] );

There are 5 different kinds of services

• Value

• Constant

• Factory

• Service

• Provider

Constant

• Suitable for configuration data

• Can be injected into module.config()

• Value is a primitive or an object

• Not overridable by a provider decorator

Value

• Value can be a primitive, but is usually a function or object

• If a function, not instantiated or invoked; simply returned

• Cannot be injected into module.config()

• Do not use for configuration data

• Overridable by a provider decorator

Factory

• Registers a factory function as a service

• Can function similar to a value service

• But also provides a more class-like implementation

Service

• Registers a constructor function as a service

• Initialized by AngularJS

• Function is invoked using $injector.instantiate(fn)

Provider

• Value, Factory and Service are all created using Provider()

• Use Provider function directly when your service can be configured

• Provide a $get() implementation

• Provide setter (mutator) functions for options

Syntactic sugar

function value(name, val) {
   return provider(name, {
       $get: function() { return val; }
   });
}

function factory(name, factoryFn) {
   return provider(name, {
       $get: factoryFn
   });
}
 
function service(name, constructor) {
   return provider(name, {
       $get: function($injector) {
           return $injector.instantiate(constructor);
       }
   });
}

Decorators

• Dependency injection interceptors

• Intercept providers

• Change the return values or replace values entirely

Questions?

https://slides.com/oravecz/ngservices

https://github.com/Transcordia/ng-meetup