首頁 > 文章 > web前端 > 深度解析AngularJS依賴注入原理

深度解析AngularJS依賴注入原理

零到壹度原創: 2018-03-28 15:06:353178瀏覽

本文主要為大家分享一篇深度解析AngularJS依賴注入原理，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧。

依賴注入：Dependency Injection 簡稱DI

#範例：

var xiaomi = new Xiaomi();     // 假设小米公司生产了一台xiaomi手机
createShipment(xiaomi);         //此方法能把货送给顾客，这叫做把小米手机注入到createShipment()方法

# 再假設createShipment ()方法需要（手機，快遞公司，訂單詳情）三個參數時，就需要：

var xiaomi = new Xiaomi();     // 不仅要生产手机
var shipCompany = new ShipCompany();   // 还要自己建立个快递公司
var order = new Order();      // 还要自己建立线上线下平台做订单
createShipmentxiaomi,shipCompany,order);   // 虽然小米已经这么干了，但还是很累的

上面的例子，小米除了在自己開的店裡賣就沒別的通路了嗎？不只要做手機，還要自己接生意，還要自己做快遞，不累嗎？除了自己幹，小米還能在淘寶，京東，蘇寧等平台賣啊，還能利用三通一順等快遞公司來送貨啊，這就是依賴注入要解決的問題。利用淘寶京東順豐等公司就是為小米公司注入販賣服務(sellService), 快遞服務(sendService) 等等！

控制反轉：Inversion of Control 簡稱IOC

IOC是指將依賴的控制權從程式碼的內部轉到程式碼的內部。好比小米把賣手機送貨的權力給了外部，至於是淘寶在賣還是京東在賣，是圓通在送還是順豐在送，這些都不用小米公司操心，小米公司只需要造手機就行了。專業的事交給專業的人去做。

IOC是一種鬆散耦合的模式，實現的手段就是依賴注入。

注入器：

constructor(private someService: SomeService) {...}

這句話的意思是這個元件宣告了一個##someService#的屬性，指明它的類型是SomeService，然後angular就會去提供器去找SomeService的一個實例，然後把這個實例注入到someService#。 #

提供器：

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

providers:[SomeService]//provide跟useClass相同可简写为这个

例：

app.module.ts

@NgModule({  
    providers:[{provide:SellService,useClass:ShunfengService}],             // 这个是淘宝，用的顺丰
      // providers: [{provide:SellService,useClass:YuantongService}]          // 这个是京东，用的圆通})
product.component.ts
@Component({  ...
})
     export class ProductComponent implements OnInit {  product: Product;  constructor(sellService: SellService) {
        this.product = this.sellService.sendProduct();
  }}

上面的代码怎么理解呢？

小米声明sellService对象（也是属性），叫sellService去卖手机，sellService呼叫售卖服务，这个服务是SellService类型的（线上销售），那么angular就会去提供器里面找谁在提供这个售卖服务，至于是淘宝还是京东那要看提供器里面的，用的哪个快递公司就更加不需要小米公司来管了。angular找到SellService之后会new一个ShunfengService的一个实例（找一家顺丰门店），找到之后把服务注入给小米公司的sellService。sellService就跑到那家顺丰门店填送货单(sendProduct方法)把手机送给客户了。

各位看官应该能想出更好的比喻，欢迎交流。如果有不妥之处欢迎指正。

深度解析AngularJS依賴注入原理

相關文章