This document discusses dependency injection in Angular. It shows how to create injectors that provide dependencies to injectables. It demonstrates hierarchical injectors where child injectors inherit from parent injectors. It also covers how to provide dependencies through the @Injectable decorator, modules, and directly in the bootstrap process. View injectors are discussed as well as querying for dependencies from components, directives and templates.

4. import {Injectable,Injector} from '@angular/core';
@Injectable() class Engine {}
@Injectable() class Car { constructor(public engine:Engine) {} }
var injector = Injector.resolveAndCreate([Car, Engine]);
var car = injector.get(Car);

5. Injector
FactoryFn
Token Flags
Token
Provider
Dependency
injectables

6. function createComponentInjector(parent, proto) {
return new Injector(proto, parent);
}

7. The created object does not get cached by the injector.

8. A
Parent Injector
A,B,C
Child Injector
A,B
Child Injector
A
B C
@Injectable()
class A{
constructor(b:B,c:C){ //... }
}

9. @NgModule({
declarations:[AppComponent, ... ],
providers :[UserProxy],
bootstrap :[AppComponent],
imports :[...],
exports :[]
})
export class AppModule{}
platformBrowserDynamic()
.bootstrapModule(AppModule);

10. Application Injector
AppModule
UsersModule BrowserModule HttpModule
Sub InjectorSub Injector

12. providers : [ ServiceA, ServiceB, … ]
providers

13. token
"recipe" for
creating

14. @Injectable()
function logger(msg){ console.log(msg);}
bootstrap(App,[
provide(logger,{useValue: logger}),
provide(Service,{
useFactory : (logger)=>{
return {
load(){ logger('load'); }
}
},
deps:[logger]
})
]);

15. providers:[
ServiceA,
{ provide: 'app.config', useValue: {name:'ev'} }
]
constructor(
service:ServiceA,
@Inject('app.config') config
)
Class
token
String token

16. useClass? : Type,
useValue? : any,
useExisting?: any,
useFactory? : Function,
deps? : Object[],
multi? : boolean

18. Platform Injectors
Component Injectors
AppElement
Element
Application Injectors

19. Component
Metadata
 queries? : {[key: string]: any}
Directive
Metadata

20. <component my-directive>
<sub-comp/>
<sub-comp/>
</component>
<component my-directive>
<sub-comp/>
<sub-comp/>
</component>

21. Component Directive
TemplateContent
viewProviders
directives
pipes
Providers
@ViewChild
@ViewChildren
DOM Element

22. <component>
<sub-comp/>
<sub-comp/>
<sub-comp/>
</component>
providers
@host
@Component({
selector :'component', template:`...`,
providers :[], viewProviders:[]
})class Component{}
viewProviders | Directives
<div my-direc>
Hello World…
<ng-content/>
</div>

23. viewProvidersProviders
Template

25. @Component({...})
export class MyComponent {
constructor(
element : ElementRef
,viewContainer : ViewContainerRef
,changeDetector: ChangeDetectorRef
,template : TemplateRef
, render : Renderer
){...}
}

26. import {Component} from "@angular/core";
import {Type1,Type2,Type3} from "eyalVardi";
import {Pipe1,Directive1} from "eyalVardi";
import {Component2} from "eyalVardi";
import {Service1} from "eyalVardi";
@Component({
providers :[Type1,Type2],
viewProviders:[Type3]
})
export class MyComponent {
constructor(
element : ElementRef
){}
} Must solve in
runtime by
the Injector

27. <div dependency="1">
<div dependency="2">
<div dependency="3" my-directive>
<div dependency="4">
<div dependency="5"></div>
</div>
<div dependency="6"></div>
</div>
</div>
</div>
Dependency MyDirective Constructor
3 constructor(dependency: Dependency)
2 constructor(@Host() dependency: Dependency)
4 , 6 constructor(@Query(Dependency) dependencies:QueryList<Dependency>)
4 , 5 , 6 constructor(@Query(Dependency, {descendants: true})
dependencies:QueryList<Dependency>)

30. var t = new OpaqueToken("value");
var injector = Injector.resolveAndCreate([
provide(t, {useValue: "providedValue"})
]);

31. providers:[
provide{ APP_INITIALIZER ,useValue: appInit , multi: true},
provide{ PLATFORM_INITIALIZER,useValue: platformInit, multi: true}
]

33. @NgModule({
providers: [
ROUTER_PROVIDERS,
PathLocationStrategy,
{ provide: APP_BASE_HREF, useValue: '/my/app' }
]
})

34. Developer guides - forms
The Ultimate Guide to Forms in Angular 2
Angular code source