首页 > web前端 > js教程 > 正文

深度解析AngularJS依赖注入原理

零到壹度
发布: 2018-03-28 15:06:35
原创
3191 人浏览过

本文主要为大家分享一篇深度解析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]//provideuseClass相同可简写为这个

例:

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的一个实例(找一家顺丰门店),找到之后把服务注入给小米公司的sellServicesellService就跑到那家顺丰门店填送货单(sendProduct方法)把手机送给客户了。

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

相关推荐:

AngularJS 依赖注入解析

AngularJS中的依赖注入

30行代码让你理解angular依赖注入:angular 依赖注入原理

以上是深度解析AngularJS依赖注入原理的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板