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="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>)

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