Rumah >hujung hadapan web >tutorial js >深度解析AngularJS依赖注入原理
本文主要为大家分享一篇深度解析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方法)把手机送给客户了。
各位看官应该能想出更好的比喻,欢迎交流。如果有不妥之处欢迎指正。
相关推荐:
30行代码让你理解angular依赖注入:angular 依赖注入原理
Atas ialah kandungan terperinci 深度解析AngularJS依赖注入原理. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!