AngularJS - सेवाएं

AngularJS सेवाओं की वास्तुकला का उपयोग करते हुए सेपरेशन ऑफ कॉन्सर्न की अवधारणा का समर्थन करता है। सेवाएँ जावास्क्रिप्ट फ़ंक्शंस हैं, जो केवल विशिष्ट कार्य करने के लिए ज़िम्मेदार हैं। यह उन्हें अलग-अलग संस्थाएं बनाता है जो बनाए रखने योग्य और परीक्षण योग्य हैं। नियंत्रक और फिल्टर आवश्यकता के आधार पर उन्हें कॉल कर सकते हैं। सेवाओं को सामान्य रूप से AngularJS के निर्भरता इंजेक्शन तंत्र का उपयोग करके इंजेक्ट किया जाता है।

AngularJS कई इनबिल्ट सेवाएं प्रदान करता है। उदाहरण के लिए, $ http, $ मार्ग, $ विंडो, $ स्थान, आदि। प्रत्येक सेवा एक विशिष्ट कार्य के लिए जिम्मेदार है जैसे कि $ http का उपयोग सर्वर डेटा प्राप्त करने के लिए ajax कॉल करने के लिए किया जाता है, $ मार्ग का उपयोग परिभाषित करने के लिए किया जाता है। रूटिंग जानकारी, और इसी तरह। इनबिल्ट सेवाओं को हमेशा $ प्रतीक के साथ उपसर्ग किया जाता है।

सेवा बनाने के दो तरीके हैं -

Factory
Service

फैक्टरी विधि का उपयोग करना

इस पद्धति में, हम पहले एक कारखाने को परिभाषित करते हैं और फिर उसे विधि निर्दिष्ट करते हैं।

var mainApp = angular.module("mainApp", []);
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);
   }
});

उदाहरण

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

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Services</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </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>
         var mainApp = angular.module("mainApp", []);
         
         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) {
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

उत्पादन

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