Explication détaillée du mécanisme d'injection de dépendances dans AngularJS_AngularJS

L'injection de dépendances est un modèle de conception logicielle qui remplace le codage en dur de leurs dépendances au sein des composants en les donnant dans les composants. Cela libère un composant de la localisation des dépendances et de la configuration des dépendances. Cela permet de rendre les composants réutilisables, maintenables et testables.

AngularJS fournit un mécanisme d'injection de dépendances suprême. Il fournit les composants de base suivants qui peuvent injecter des dépendances les uns sur les autres.

• Valeur
• Usine
• Services
• Fournisseur
• Valeur constante

Valeur

Les valeurs sont de simples objets JavaScript qui sont utilisés pour transmettre des valeurs lors de la phase de configuration des contrôleurs.

//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "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);
  }
});

Usine

Factory est utilisé pour renvoyer la valeur de la fonction. Il crée de la valeur à la demande, chaque fois qu'un service ou un contrôleur l'exige. Il utilise généralement une fonction d'usine pour calculer et renvoyer la valeur correspondante

//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which 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;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
...

Service

Un service est un objet JavaScript unique qui contient un ensemble de fonctions pour effectuer certaines tâches. Les services sont définis à l'aide de la fonction service(), qui est ensuite injectée dans le contrôleur.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
   this.square = function(a) { 
   return MathService.multiply(a,a); 
  }
});
//inject the service "CalcService" into the controller
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);
  }
});

Fournisseur

Services du fournisseur, usines, etc. utilisés lors de la phase de configuration du processus de création interne d'AngularJS (correspondant au moment où AngularJS s'amorce). Le script mentionné ci-dessous peut être utilisé pour créer le MathService que nous avons déjà créé précédemment. Le fournisseur est une méthode d'usine spéciale et une méthode get() qui renvoie une valeur/un service/une usine.

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
  $provide.provider('MathService', function() {
   this.$get = function() {
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b; 
     }
     return factory;
   };
  });
});

Constante

Les constantes sont utilisées pour tenir compte du fait que les valeurs ne peuvent pas être transmises pendant la phase de configuration en les configurant, et que les valeurs ne peuvent pas être transmises pendant la phase de configuration.

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

Exemple

L'exemple suivant démontrera toutes les commandes ci-dessus.
testAngularJS.html

<html>
<head>
  <title>AngularJS Dependency Injection</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="CalcController">
   <p>Enter a number: <input type="number" ng-model="number" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

Résultats

Ouvrez textAngularJS.html dans votre navigateur Web. Voir les résultats ci-dessous.