Injection de dépendances AngularJS


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

L'explication sur wiki est la suivante : L'injection de dépendances (DI) est un modèle de conception logicielle dans lequel une ou plusieurs dépendances (ou services) multiples sont injectées (ou passé par référence) dans un objet distinct (ou client), puis fait partie de l'état du client.

Ce modèle sépare la création d'un comportement de dépendance côté client, ce qui rend la conception du programme faiblement couplée et suit les principes d'inversion de dépendance et de responsabilité unique. Contrairement au modèle de localisateur de services, il permet au client de comprendre comment il utilise le système pour vous trouver des dépendances.

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

value

  • factory

  • service

  • fournisseur

  • constant

    • valeur
Valeur oui Un simple objet javascript permettant de passer des valeurs au contrôleur (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 qui renvoie une valeur. Créé en cas de besoin par le service et le contrôleur.

Habituellement, nous utilisons la fonction d'usine 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);
   }
});
...

provider

Créer un service, une usine, etc. (phase de configuration) via le fournisseur dans AngularJS.

Le fournisseur fournit une méthode d'usine get(), qui est utilisée pour renvoyer valeur/service/usine. 

// 定义一个模块
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 (constant) est utilisé pour transmettre des valeurs lors de la phase de configuration. Notez que cette constante n'est pas disponible lors de la phase de configuration. 

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

Exemples

Les exemples suivants fournissent des démonstrations des mécanismes d'injection de dépendances ci-dessus.

Instance

<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
   </head>
   
   <body>
      <h2>AngularJS 简单应用</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>结果: {{result}}</p>
      </div>
      
      <script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
			
         mainApp.value("defaultInput", 5);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b;
            }
            return factory;
         });
         
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         
         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);
            }
         });
			
      </script>
      
   </body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

←
→