AngularJS - Dependency Injection

Dependency Injection to projekt oprogramowania, w którym komponenty otrzymują zależności, zamiast na stałe zakodować je w ramach komponentu. Zwalnia komponent z lokalizowania zależności i umożliwia konfigurowanie zależności. Pomaga również w tworzeniu elementów wielokrotnego użytku, nadających się do konserwacji i testowalnych.

AngularJS zapewnia doskonały mechanizm wstrzykiwania zależności. Zapewnia następujące podstawowe komponenty, które można wstrzykiwać sobie nawzajem jako zależności.

Value
Factory
Service
Provider
Constant

Wartość

Wartość to prosty obiekt JavaScript, który jest wymagany do przekazania wartości do kontrolera podczas fazy konfiguracji (faza konfiguracji ma miejsce, gdy AngularJS ładuje się).

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

Fabryka

Fabryka to funkcja służąca do zwracania wartości. Tworzy wartość na żądanie, gdy wymaga tego usługa lub kontroler. Zwykle używa funkcji fabryki do obliczania i zwracania wartości.

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

Usługa

Usługa to pojedynczy obiekt JavaScript zawierający zestaw funkcji do wykonywania określonych zadań. Usługa jest definiowana za pomocą funkcji service (), a następnie jest wstrzykiwana do kontrolerów.

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

Dostawca

Dostawca jest używany przez AngularJS wewnętrznie do tworzenia usług, fabryki itp. Podczas fazy konfiguracji. Poniższego skryptu można użyć do utworzenia wcześniej utworzonego przez nas MathService. Provider to specjalna metoda fabryczna z metodą get (), która służy do zwracania wartości / usługi / fabryki.

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

Stały

Stałe są używane do przekazywania wartości w fazie konfiguracji, biorąc pod uwagę fakt, że wartość nie może być używana podczas fazy konfiguracji.

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

Przykład

Poniższy przykład pokazuje użycie wszystkich wyżej wymienionych dyrektyw -

testAngularJS.htm

<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" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>

Wynik

Otwórz testAngularJS.htm w przeglądarce internetowej i zobacz wynik.