AngularJS - Bağımlılık Enjeksiyonu

Bağımlılık Enjeksiyonu, bileşenlerin bileşen içinde sabit kodlanması yerine bağımlılıklarının verildiği bir yazılım tasarımıdır. Bir bileşenin bağımlılığı bulmasını engeller ve bağımlılıkları yapılandırılabilir hale getirir. Aynı zamanda bileşenlerin yeniden kullanılabilir, bakımı yapılabilir ve test edilebilir hale gelmesine yardımcı olur.

AngularJS, üstün bir Bağımlılık Enjeksiyonu mekanizması sağlar. Bağımlılık olarak birbirine enjekte edilebilen aşağıdaki temel bileşenleri sağlar.

Value
Factory
Service
Provider
Constant

Değer

Değer, yapılandırma aşamasında denetleyiciye değerleri iletmek için gerekli olan basit bir JavaScript nesnesidir (yapılandırma aşaması, AngularJS önyüklemesinin kendisidir).

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

Fabrika

Fabrika, değer döndürmek için kullanılan bir işlevdir. Bir hizmet veya bir kontrolör gerektirdiğinde talep üzerine bir değer yaratır. Değeri hesaplamak ve döndürmek için genellikle bir fabrika işlevi kullanır.

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

Hizmet

Hizmet, belirli görevleri gerçekleştirmek için bir dizi işlev içeren tek bir JavaScript nesnesidir. Hizmet, service () işlevi kullanılarak tanımlanır ve ardından denetleyicilere enjekte edilir.

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

Sağlayıcı

Sağlayıcı, AngularJS tarafından dahili olarak yapılandırma aşamasında hizmetler, fabrika vb. Oluşturmak için kullanılır. Aşağıdaki komut dosyası, daha önce oluşturduğumuz MathService'i oluşturmak için kullanılabilir. Sağlayıcı, değeri / hizmeti / fabrikayı döndürmek için kullanılan get () yöntemine sahip özel bir fabrika yöntemidir.

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

Sabit

Sabitler, değerin yapılandırma aşamasında kullanılamayacağı gerçeği göz önünde bulundurularak yapılandırma aşamasında değerleri iletmek için kullanılır.

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

Misal

Aşağıdaki örnek, yukarıda belirtilen tüm direktiflerin kullanımını gösterir -

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>

Çıktı

Bir web tarayıcısında testAngularJS.htm dosyasını açın ve sonucu görün.