Maison > interface Web > js tutoriel > le corps du texte

Une analyse approfondie des principes d'injection de dépendances AngularJS

零到壹度
Libérer: 2018-03-28 15:06:35
original
3187 Les gens l'ont consulté

Cet article partage principalement avec vous une analyse approfondie du principe d'injection de dépendances AngularJS. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

Injection de dépendance : Injection de dépendance AbréviationDI

Exemple :

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

Assumer à nouveau Lorsque la méthode createShipment() nécessite trois paramètres (téléphone portable, entreprise de messagerie, détails de la commande), elle a besoin de :

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

En plus de ce qui précède Par exemple, Xiaomi N'y a-t-il pas d'autre moyen de vendre dans mon propre magasin ? Non seulement vous devez fabriquer des téléphones portables, mais vous devez aussi vous occuper des affaires et faire de la livraison express. Vous n'êtes pas fatigué ? En plus de le faire lui-même, Xiaomi peut également le vendre sur Taobao, JD.com, Suning et d'autres plateformes, et utiliser des sociétés express telles que Santong Yishun pour livrer les marchandises. C'est le problème que l'injection de dépendance doit résoudre. Utiliser Taobao, JD.com, SF Express et d'autres sociétés, c'est injecter un service de vente (sellService), un service de livraison express (sendService), etc. dans Xiaomi !

Inversion de contrôle : Inversion de contrôle AbréviationIOC

IOC fait référence au transfert du contrôle des dépendances de l'intérieur du code vers l'intérieur du code. Par exemple, Xiaomi a donné le pouvoir de vendre et de livrer des téléphones mobiles au monde extérieur. Quant à savoir si Taobao vend ou JD vend, si YTO livre ou SF Express, Xiaomi n'a pas à s'en soucier. téléphones portables. Laissez les questions professionnelles aux professionnels.

IOC est un mode de couplage lâche, et le moyen de mise en œuvre est l'injection de dépendances.

Injecteur :

constructeur(privé someService : SomeService) { ...}

Cette phrase signifie que ce composant déclare un someService L'attribut de indique que son type est SomeService, puis angular ira au fournisseur pour trouver SomeService< Une instance de 🎜 >, puis injectez cette instance dans 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();
  }}
Copier après la connexion

上面的代码怎么理解呢?

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

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

相关推荐:

AngularJS 依赖注入解析

AngularJS中的依赖注入

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal