Injection de dépendances AngularJS

---

Qu'est-ce que l'injection de dépendances

L'explication sur Wikipédia est : L'injection de dépendances (DI) est un modèle de conception logicielle dans lequel une ou plusieurs dépendances (ou services) sont injectées (ou passées par référence) dans un objet indépendant (ou client), puis deviennent partie intégrante de l'état de ce client.

Ce modèle sépare la création des dépendances d'un client de son propre comportement, ce qui rend la conception du programme faiblement couplée et respecte les principes d'inversion des dépendances et de responsabilité unique. En contraste direct avec le modèle de localisateur de services, il permet au client de savoir comment le client utilise le système pour trouver des dépendances.

En une phrase — S'il n'y a rien, ne venez pas à moi ; s'il y a quelque chose, je viendrai à vous.

AngularJS fournit un très bon mécanisme d'injection de dépendances. Les 5 composants principaux suivants sont utilisés pour l'injection de dépendances :

• value
• factory
• service
• fournisseur
• constant

---

value

Value est un simple objet JavaScript utilisé pour transmettre des valeurs aux contrôleurs (phase de configuration) :

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

---

factory

factory est une fonction utilisée pour renvoyer une valeur. Elle est créée lorsque service et contrôleur en ont besoin.

Habituellement, nous utilisons des fonctions factory pour calculer ou renvoyer des valeurs.

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

---

fournisseur

Dans AngularJS, un service, une factory, etc. sont créés via un provider (phase de configuration).

Provider fournit une méthode factory get(), qui est utilisée pour renvoyer value/service/factory.

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

---

constant

constant est utilisé pour transmettre des valeurs dans la phase de configuration. Notez que cette constante n'est pas disponible dans la phase de configuration.

mainApp.constant("configParam", "constant value");

---

Exemples

Les exemples suivants démontrent les mécanismes d'injection de dépendances mentionnés ci-dessus.

Autres extensions