AngularJS-Abhängigkeitsinjektion

---

Was ist Dependency Injection

Die Erklärung auf Wikipedia lautet: Dependency Injection (DI) ist ein Software-Designmuster, bei dem eine oder mehrere Abhängigkeiten (oder Dienste) in ein unabhängiges Objekt (oder einen Client) injiziert (oder als Referenz übergeben) werden und dann Teil des Zustands dieses Clients werden.

Dieses Muster trennt die Erstellung der Abhängigkeiten eines Clients von dessen eigenen Verhalten, wodurch das Programmdesign lose gekoppelt wird und den Prinzipien der Umkehrung von Abhängigkeiten (Dependency Inversion) und der单一-Verantwortlichkeit (Single Responsibility) folgt. Im direkten Gegensatz zum Service-Locator-Muster ermöglicht es dem Client zu wissen, wie er das System nutzt, um Abhängigkeiten zu finden.

In einem Satz – Wenn nichts da ist, komm nicht zu mir; wenn etwas da ist, komme ich zu dir.

AngularJS bietet einen sehr guten Mechanismus zur Dependency Injection. Die folgenden 5 Kernkomponenten werden für die Dependency Injection verwendet:

• value
• factory
• service
• Anbieter
• constant

---

value

Value ist ein einfaches JavaScript-Objekt, das verwendet wird, um Werte an Controller zu übergeben (Konfigurationsphase):

// 定义一个模块
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 ist eine Funktion, die verwendet wird, um einen Wert zurückzugeben. Sie wird erstellt, wenn Dienst und Controller sie benötigen.

Normalerweise verwenden wir Factory-Funktionen, um Werte zu berechnen oder zurückzugeben.

// 定义一个模块
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);
   }
});
...

---

Anbieter

In AngularJS werden Service, Factory usw. über einen Provider erstellt (Konfigurationsphase).

Provider stellt eine Factory-Methode get() bereit, die verwendet wird, um einen Wert/Service/Factory zurückzugeben.

// 定义一个模块
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 wird verwendet, um Werte in der Konfigurationsphase zu übergeben. Beachten Sie, dass diese Konstante in der Konfigurationsphase nicht verfügbar ist.

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

---

Beispiele

Die folgenden Beispiele demonstrieren die oben genannten Dependency-Injection-Mechanismen.

Weitere Erweiterungen