Detaillierte Erläuterung des Abhängigkeitsinjektionsmechanismus in AngularJS_AngularJS

Abhängigkeitsinjektion ist ein Software-Entwurfsmuster, das die harte Codierung ihrer Abhängigkeiten innerhalb von Komponenten ersetzt, indem sie diese in Komponenten bereitstellt. Dies entlastet eine Komponente vom Auffinden von Abhängigkeiten bis hin zur Abhängigkeitskonfiguration. Dies trägt dazu bei, Komponenten wiederverwendbar, wartbar und testbar zu machen.

AngularJS bietet einen erstklassigen Abhängigkeitsinjektionsmechanismus. Es stellt die folgenden Kernkomponenten bereit, die Abhängigkeiten voneinander erzeugen können.

• Wert
• Fabrik
• Service
• Anbieter
• Konstanter Wert

Wert

Werte sind einfache JavaScript-Objekte, die zur Übergabe von Werten während der Konfigurationsphase von Controllern verwendet werden.

//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);
  }
});

Fabrik

Factory wird verwendet, um den Wert der Funktion zurückzugeben. Es schafft Wert auf Abruf, wann immer ein Dienst oder Controller ihn benötigt. Normalerweise wird eine Factory-Funktion verwendet, um den entsprechenden Wert

zu berechnen und zurückzugeben

//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

Ein Dienst ist ein einzelnes JavaScript-Objekt, das eine Reihe von Funktionen zur Ausführung bestimmter Aufgaben enthält. Dienste werden mithilfe der Funktion service() definiert, die dann in den Controller eingefügt wird.

//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);
  }
});

Anbieter

Anbieterdienste, Fabriken usw., die während der Konfigurationsphase des internen AngularJS-Erstellungsprozesses verwendet werden (entsprechend dem Zeitpunkt, an dem AngularJS sich selbst bootet). Das unten erwähnte Skript kann zum Erstellen des MathService verwendet werden, den wir bereits zuvor erstellt haben. Der Anbieter ist eine spezielle Factory-Methode und get()-Methode, die einen Wert/Dienst/Factory zurückgibt.

//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;
   };
  });
});

Konstant

Konstanten werden verwendet, um der Tatsache Rechnung zu tragen, dass Werte während der Konfigurationsphase nicht übergeben werden können, indem sie konfiguriert werden, und Werte können während der Konfigurationsphase nicht übergeben werden.

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

Beispiel

Das folgende Beispiel demonstriert alle oben genannten Befehle.
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>

Ergebnisse

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse unten an.