by Mauro Servienti: DI, services and modules in AngularJS 1.x and 2.x

1. //2015.angularconf.it | #angularconf15
Service, Factory & Provider
Oh my…

2. //2015.angularconf.it | #angularconf15
Mauro Servienti
Solution Architect @ Particular Software
mauro.servienti@particular.net
@mauroservienti
//github.com/mauroservienti
//milestone.topics.it
//blogs.ugidotnet.org/topics
Microsoft MVP – Visual C#

3. //2015.angularconf.it | #angularconf15
A `Service` to rule them all
• In a world based on DI, separation responsibilities is a key
aspect to:
• Testability
• Reusable code
• Services, or components, exist to:
• Connect different pieces that live at the client;
• Connect the client to the back-end;
• In AngularJS 1.x:
• Services are always registered as singleton;
• `Service`, `Factory` and `Provider` allow the developer take control over
the component registration and instantiation process;

4. //2015.angularconf.it | #angularconf15
AngularJS 1.x

5. //2015.angularconf.it | #angularconf15
Service
• Registers the “constructor”;
angular.module( `myModule` )
.service( `myService`, function( injectable ){
//service constructor function
} );
`new + cache`

6. //2015.angularconf.it | #angularconf15
Factory
angular.module( `myModule` )
.factory( `myService`, function( injectable ){
var mySvc = {
Sample: function() {
}
}
return mySvc
} ); `cache`

7. //2015.angularconf.it | #angularconf15
Service and Factory
• AngularJS boot is a 2-phase process: `config`, `run`;
• In the `config` phase we can depend on providers
only:
• Providers can depend on other providers;
• If we need to interact/configure a service during
the `config` phase we must use a `Provider`;
• Service or Factory won’t work.

8. //2015.angularconf.it | #angularconf15
Provider: full control
angular.module(`myModule`)
.provider( `myService`, function myServiceProvider( injectable ){
function MyService(){ }
this.$get = function myServiceFactory( injectable ) {
return new MyService();
};
});
`Config`
`Run`
`cache`

9. //2015.angularconf.it | #angularconf15
Issues
• Singletons only
• in AngularJS 1.x the `keyword` determines the lifecycle;
• Namespace collision
• Tight coupling between Angular and the DI
framework

10. //2015.angularconf.it | #angularconf15
AngularJS 2

11. //2015.angularconf.it | #angularconf15
Actors
• Injector: APIs to create instances of dependencies
• Provider: a recipe, to tell the injector how to create
an instance of a dependency.
• A provider takes a token and maps that to a factory
function that creates an object.
• Dependency: Describes the type of object that
should be created.

12. //2015.angularconf.it | #angularconf15
Injector
import { Injector } from 'angular2/di';
var injector = Injector.resolveAndCreate([
Car,
Engine,
Tires,
Doors
]);
var car = injector.get(Car);

13. //2015.angularconf.it | #angularconf15
Usage
import { Inject } from 'angular2/di';
class Car {
constructor(
@Inject(Engine) engine,
@Inject(Tires) tires,
@Inject(Doors) doors
) {
...
}
}

14. //2015.angularconf.it | #angularconf15
TypeScript
class Car {
constructor(
engine: Engine,
tires: Tires,
doors: Doors) {
...
}
}

15. //2015.angularconf.it | #angularconf15
Lifecycle
import {provide} from 'angular2/angular2';
var injector = Injector.resolveAndCreate([
provide(Car, {useClass: Car}),
provide(Engine, {useClass: Engine}),
provide(Tires, {useClass: Tires}),
provide(Doors {useClass: Doors})
]);
provide(Engine, {useClass: OtherEngine})

16. //2015.angularconf.it | #angularconf15
Lifecycle: factories
provide(Engine, {
useFactory: (dep1, dep2) => {
},
deps: [Foo, Bar]
})

17. //2015.angularconf.it | #angularconf15
Lifecycle: transient
provide(Engine, {useFactory: () => {
return () => {
return new Engine();
}
}})

18. //2015.angularconf.it | #angularconf15
Lifestyle: scoped
• Child containers: Standing ovation!
• Full control over dependency lifecycle:
• Singleton
• Transient
• Scoped

19. //2015.angularconf.it | #angularconf15
A `component`
@Component({
selector: 'child-component',
})
@View({
template: '<h1>Value is {{value}}!</h1>'
})
class ChildComponent {
constructor(valueService: ValueService) {
this.value = valueService.getValue();
}
}
@Component({
selector: 'child-component',
bindings: [
bind(ValueService).toClass(OtherValueService)
]
})

20. //2015.angularconf.it | #angularconf15
Thank you