angular2 di
TRANSCRIPT
Angular 2依賴注入亂馬客 1
依 ng2 官網範例學習內容來自於 ng2 官網Sample: ng2-DI
2
學習目標• 為什麼需要依賴注入 ?• Angular 依賴注入• 注入器提供商• 依賴注入令牌• Live Demo
3
學習目標• 為什麼需要依賴注入 ?• Angular 依賴注入• 注入器提供商• 依賴注入令牌
4
為什麼需要依賴注入 ?
5
Car 依賴注入版本
需要的東西從外面注入進來
6
Engine 改變• 不需要動到 Car
7
容易測試
8
建立 Car 的消費者怎麼辦 ?• 原本只要 new Car, 現在連同 Engine, Tires 都要 new … • 自建工廠
9
更簡單的方式 ?• 依賴注入框架
10
學習目標• 為什麼需要依賴注入 ?• Angular 依賴注入• 注入器提供商• 依賴注入令牌
11
1.Service
12
Service’s @Injectable()• 建議每個 Service 都加上 @Injectable()• 一致性• 未來性
• 不用怕那個 Service 沒有加到
13
2. NgModule 註冊 Providers
14
2. Component 註冊 Providers
15
3. 使用它
16
Explicit injector creation
17
學習目標• 為什麼需要依賴注入 ?• Angular 依賴注入• 注入器提供商 (Injector providers)• 依賴注入令牌
18
providersproviders:[HeroService]
=>
providers:[ {provide: HeroService, useClass: HeroService, deps:[]
}]
Token
Recipe
Dependency
19
Alternative class providersproviders:[
UserService, { provide: Logger,
useClass: EvenBetterLogger, deps: [UserService] },
HeroService]
20
21
Aliased class providers
22
Value providers
23
Factory providers
24
學習目標• 為什麼需要依賴注入 ?• Angular 依賴注入• 注入器提供商• 依賴注入令牌
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 } ]
後者勝
29
OpaqueToken
30
31
Optional dependencies
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
35
FAQ