Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS: Service, factory & provider

1,269 views

Published on

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

Published in: Technology
  • Be the first to comment

AngularJS: Service, factory & provider

  1. 1. //2015.angularconf.it | #angularconf15 Service, Factory & Provider Oh my…
  2. 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. 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. 4. //2015.angularconf.it | #angularconf15 AngularJS 1.x
  5. 5. //2015.angularconf.it | #angularconf15 Service • Registers the “constructor”; angular.module( `myModule` ) .service( `myService`, function( injectable ){ //service constructor function } ); `new + cache`
  6. 6. //2015.angularconf.it | #angularconf15 Factory angular.module( `myModule` ) .factory( `myService`, function( injectable ){ var mySvc = { Sample: function() { } } return mySvc } ); `cache`
  7. 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. 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. 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. 10. //2015.angularconf.it | #angularconf15 AngularJS 2
  11. 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. 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. 13. //2015.angularconf.it | #angularconf15 Usage import { Inject } from 'angular2/di'; class Car { constructor( @Inject(Engine) engine, @Inject(Tires) tires, @Inject(Doors) doors ) { ... } }
  14. 14. //2015.angularconf.it | #angularconf15 TypeScript class Car { constructor( engine: Engine, tires: Tires, doors: Doors) { ... } }
  15. 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. 16. //2015.angularconf.it | #angularconf15 Lifecycle: factories provide(Engine, { useFactory: (dep1, dep2) => { }, deps: [Foo, Bar] })
  17. 17. //2015.angularconf.it | #angularconf15 Lifecycle: transient provide(Engine, {useFactory: () => { return () => { return new Engine(); } }})
  18. 18. //2015.angularconf.it | #angularconf15 Lifestyle: scoped • Child containers: Standing ovation! • Full control over dependency lifecycle: • Singleton • Transient • Scoped
  19. 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. 20. //2015.angularconf.it | #angularconf15 Thank you

×