深度解析AngularJS依赖注入原理-js教程-PHP中文网

深度解析AngularJS依赖注入原理

零到壹度

发布： 2018-03-28 15:06:35

原创

3200 人浏览过

本文主要为大家分享一篇深度解析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方法)把手机送给客户了。

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