首先，這是一個學習筆記

什麼是依賴注入

Dependency injection 依賴注入  簡稱DI

Inversion of control   控制反轉 簡稱IOC   將依賴的控制權反轉

依賴注入的好處：鬆耦合 增加可重用性   可測試性

學習目標：使用依賴注入寫出可重用的元件

注入器 

  constructor(private ps:ProductService) { }

提供器

providers: [ProductService]

  providers:[{provide:ProductService,useClass:ProductService}]
 

這兩種方式是一致的，當provide屬性和useClass屬性一致時，就可以簡寫為上面的形式。

注入器和提供器是根據提供器的provide屬性匹配的，兒具體實現的內容則是由userClass屬性決定的，例如：

  providers:[{provide:ProductService,useClass:AnotherProductService}]

這裡最終例項化的是AnotherProductService。

當然，可以用一個工廠模式來定義useClass,將工廠方法返回的事例用於提供。

providers:[{provide:ProductService,useFactory:()=>{...}}]
 

ng g service shared/product          生成一個服務

注入器的作用域問題

providers: [{

provide: ProductService, useClass: AnotherProductService

}]

服務之間的相互注入

@Injectable()  只有聲明瞭這個裝飾器的服務，才可以注入到其他的服務中。

用工廠方法來提供注入器

providers: [{
    provide: ProductService,
    useFactory: () => {
      let logger = new LoogerService();
      let dev = Math.random() > 0.5;
      if (dev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    }
  }, LoogerService],
 

問題：LoogerService 如何也能通過提供器在工廠方法中實現呢？ 這裡有個deps[ ]

providers: [{
    provide: ProductService,
    useFactory: (logger: LoogerService) => {
      let dev = Math.random() > 0.5;
      if (dev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    }, deps: [LoogerService]
  }, LoogerService]

上面例子中，實現哪一個服務由隨機數決定，現實專案中，我們需要一些不同的變數來決定這些操作，那麼，變數能否像服務一樣被依賴注入呢？答案是肯定的

providers: [{
    provide: ProductService,
    useFactory: (logger: LoogerService, isdev) => {
      if (isdev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    }, deps: [LoogerService, "IS_DEV_ENV"]
  }, LoogerService,
  {
    provide: "IS_DEV_ENV", useValue: true
  }]

當然，也可以是一個物件

providers: [{
    provide: ProductService,
    useFactory: (logger: LoogerService, appConfig) => {
      if (appConfig.isDev) {
        return new ProductService(logger);
      } else {
        return new AnotherProductService(logger);
      }
    }, deps: [LoogerService, "APP_CONFIG"]
  }, LoogerService,
  {
    provide: "APP_CONFIG", useValue: {isDev:true}
  }]

注入器的層級關係

Angular只有一個注入點，那就是建構函式注入