AngularJS - निर्भरता इंजेक्शन

डिपेंडेंसी इंजेक्शन एक सॉफ्टवेयर डिज़ाइन है जिसमें घटकों को घटक के भीतर हार्ड कोडिंग के बजाय उनकी निर्भरता दी जाती है। यह निर्भरता का पता लगाने से एक घटक को राहत देता है और निर्भरता को विन्यास योग्य बनाता है। यह घटकों को पुन: प्रयोज्य, रखरखाव योग्य और परीक्षण योग्य बनाने में भी मदद करता है।

AngularJS एक सर्वोच्च निर्भरता इंजेक्शन तंत्र प्रदान करता है। यह निम्नलिखित मुख्य घटक प्रदान करता है जिन्हें एक दूसरे पर निर्भरता के रूप में इंजेक्ट किया जा सकता है।

Value
Factory
Service
Provider
Constant

मूल्य

मान एक साधारण जावास्क्रिप्ट ऑब्जेक्ट है, जिसे कॉन्फ़िगरेशन चरण के दौरान नियंत्रक को मान पास करना आवश्यक है (कॉन्फ़िगरेशन चरण तब होता है जब अंगुलरजेएस बूटस्ट्रैप्स स्वयं)।

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

फ़ैक्टरी

फैक्टरी एक फ़ंक्शन है जिसका उपयोग मान वापस करने के लिए किया जाता है। यह मांग पर एक मूल्य बनाता है जब भी सेवा या नियंत्रक को इसकी आवश्यकता होती है। यह आम तौर पर मूल्य की गणना और वापस करने के लिए एक फैक्ट्री फ़ंक्शन का उपयोग करता है।

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

सर्विस

सेवा एक सिंगलटन जावास्क्रिप्ट ऑब्जेक्ट है जिसमें कुछ कार्यों को करने के लिए फ़ंक्शन का एक सेट होता है। सेवा () फ़ंक्शन का उपयोग करके सेवा को परिभाषित किया गया है और फिर इसे नियंत्रकों में इंजेक्ट किया जाता है।

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

प्रदाता

प्रदाता को AngularJS द्वारा आंतरिक रूप से विन्यास चरण के दौरान सेवाओं, कारखाने आदि बनाने के लिए उपयोग किया जाता है। निम्न स्क्रिप्ट का उपयोग MathService बनाने के लिए किया जा सकता है जिसे हमने पहले बनाया था। प्रदाता एक विशेष कारखाना विधि है जिसमें प्राप्त () विधि है जिसका उपयोग मूल्य / सेवा / कारखाने को वापस करने के लिए किया जाता है।

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

स्थिर

कॉन्‍फ़ि‍ंट का उपयोग कॉन्‍फ़‍िगरेशन चरण में मानों को पास करने के लिए किया जाता है, इस तथ्य पर विचार करते हुए कि कॉन्फ़िगरेशन चरण के दौरान मान का उपयोग नहीं किया जा सकता।

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

उदाहरण

निम्नलिखित उदाहरण सभी उपर्युक्त निर्देशों का उपयोग दर्शाता है -

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>

उत्पादन

एक वेब ब्राउज़र में testAngularJS.htm खोलें और परिणाम देखें।