angular2 di
Post on 12-Apr-2017
45 Views
Preview:
TRANSCRIPT
Angular 2依賴注入亂馬客 1
依 ng2 官網範例學習內容來自於 ng2 官網Sample: ng2-DI
2
學習目標• 為什麼需要依賴注入 ?• Angular 依賴注入• 注入器提供商• 依賴注入令牌• Live Demo
18
providersproviders:[HeroService]
=>
providers:[ {provide: HeroService, useClass: HeroService, deps:[]
}]
Token
Recipe
Dependency
19
Alternative class providersproviders:[
UserService, { provide: Logger,
useClass: EvenBetterLogger, deps: [UserService] },
HeroService]
25
useFactory with String Token
const randomFac = () => { return Math.random(); };
@NgModule(providers:[{ provide: ’Random’, useFactory:
randomFac }])
… constructor(@Inject(‘Random’) r){
this.value = r;}
26
useValue with String Token
@NgModule(providers:[{ provide: ’Random’, useValue:
Math.random() }])
… constructor(@Inject(‘Random’) r){
this.value = r;}
27
@Inject()constructor(@Inject(HeroService) heroservice){}
@Inject() is only needed for injecting primitives.
28
String Token 衝突providers:[
{ provide: 'Random', useValue: Math.random() }, { provide: 'Random', useFactory: randomFac } ]
後者勝
32
Summary• 為 Service Class 加入 @Injectable()• providers:[
UserService, { provide: Logger,
useClass: EvenBetterLogger, deps: [UserService] },
HeroService]• useValue, useFactory
33
Summary - 2• OpaqueToken• const randomF = new OpaqueToken('Random');• const randomV = new OpaqueToken('Random');
• @Optional()• constructor(@Optional() private logger: Logger)
34
參考資源• DEPENDENCY INJECTION IN ANGULAR 2• Angular 2 Components and Providers: Classes, Factori
es & Values• BYPASSING PROVIDERS IN ANGULAR 2• HOST AND VISIBILITY IN ANGULAR 2'S DEPENDENCY IN
JECTION• Sample Project: ng2-DI
top related