Detaillierte Erläuterung des Abhängigkeitsinjektionsmechanismus in AngularJS

Detaillierte Erläuterung des Abhängigkeitsinjektionsmechanismus in AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:54:30

Original

1132 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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");

Nach dem Login kopieren

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>

Nach dem Login kopieren

Ergebnisse

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

2015617111816048.jpg (560×240)