An in-depth analysis of AngularJS dependency injection principles

This article mainly shares with you an in-depth analysis of the AngularJS dependency injection principle. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.

Dependency Injection: Dependency Injection AbbreviationDI

Example:

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

Assume againcreateShipment When the () method requires three parameters (mobile phone, courier company, order details), it needs:

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

In the above example, in addition to Xiaomi opening its own Is there no other way to sell it in the store? Not only do you have to make mobile phones, but you also have to take care of business and do express delivery. Aren’t you tired? In addition to doing it on its own, Xiaomi can also sell it on Taobao, JD.com, Suning and other platforms, and use express companies such as Santong Yishun to deliver goods. This is the problem that dependency injection needs to solve. Using Taobao, JD.com, SF Express and other companies is to inject sales service (sellService), express delivery service (sendService), etc. into Xiaomi!

Inversion of Control: Inversion of Control AbbreviationIOC

IOC refers to transferring the control of dependencies from the inside of the code to the inside of the code. For example, Xiaomi has given the power to sell and deliver mobile phones to the outside world. As for whether Taobao sells or JD.com sells, whether YTO delivers or SF Express delivers, Xiaomi does not need to worry about these. Xiaomi only needs to make mobile phones. Leave professional matters to professionals.

IOC is a loose coupling mode, and the means of implementation is dependency injection.

Injector:

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

This sentence means that this component declares a someService attribute, indicating that its type is SomeService, and then angular will go to the provider to find SomeService# An instance of ##, and then inject this instance into 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 依赖注入解析

AngularJS中的依赖注入

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

The above is the detailed content of An in-depth analysis of AngularJS dependency injection principles. For more information, please follow other related articles on the PHP Chinese website!