Angular 2.0 Dependency injection

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);

Injector
FactoryFn
Token Flags
Token
Provider
Dependency
injectables

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

The created object does not get cached by the injector.

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

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

Application Injector
AppModule
UsersModule BrowserModule HttpModule
Sub InjectorSub Injector

providers : [ ServiceA, ServiceB, … ]
providers

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

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

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

Platform Injectors
Component Injectors
AppElement
Element
Application Injectors

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

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

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

viewProvidersProviders
Template

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

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

<div dependency="1">
<div dependency="3" my-directive>
<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>)

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

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

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

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

Angular 2.0 Dependency injection

Angular 2.0 Dependency injection

In this document

More Related Content

What's hot

Viewers also liked

More from Eyal Vardi

Recently uploaded

Angular 2.0 Dependency injection