AngularJS
सेवाएं

कैसे एक सेवा बनाने के लिए

angular.module("app")
  .service("counterService", function(){

    var service = {
        number: 0
    };
    
    return service;
   });

किसी सेवा का उपयोग कैसे करें

    angular.module("app")
        
        // Custom services are injected just like Angular's built-in services
        .controller("step1Controller", ['counterService', '$scope', function(counterService, $scope) {
            counterService.number++;
            // bind to object (by reference), not to value, for automatic sync
            $scope.counter = counterService;
        })

इस नियंत्रक का उपयोग करने वाले टेम्पलेट में आप फिर लिखेंगे:

// editable
<input ng-model="counter.number" />

या

// read-only
<span ng-bind="counter.number"></span>

बेशक, वास्तविक कोड में आप नियंत्रक पर विधियों का उपयोग करके सेवा के साथ बातचीत करेंगे, जो सेवा में प्रतिनिधि को सौंपेंगे। प्रत्येक बार नियंत्रक द्वारा टेम्प्लेट में उपयोग किए जाने के बाद ऊपर दिया गया उदाहरण काउंटर मूल्य को बढ़ाता है।

एंगुलरज में सेवाएं एकल हैं:

सेवाएँ सिंगलटन ऑब्जेक्ट्स हैं जो कि केवल एक बार प्रति ऐप ($ इंजेक्टर द्वारा) और आलसी लोड (केवल आवश्यक होने पर बनाई गई) द्वारा इंस्टेंट किए जाते हैं।

एक सिंगलटन एक ऐसा वर्ग है जो केवल स्वयं के एक उदाहरण को बनाने की अनुमति देता है - और उक्त उदाहरण के लिए सरल, आसान पहुंच देता है। जैसा कि यहाँ कहा गया है

Angular.factory का उपयोग करके एक सेवा बनाना

पहले सेवा को परिभाषित करें (इस मामले में यह फ़ैक्टरी पैटर्न का उपयोग करता है):

.factory('dataService', function() {
    var dataObject = {};
    var service = {
        // define the getter method
        get data() {
            return dataObject;
        },
        // define the setter method
        set data(value) {
            dataObject = value || {};
        }
    };
    // return the "service" object to expose the getter/setter
    return service;
})

अब आप नियंत्रकों के बीच डेटा साझा करने के लिए सेवा का उपयोग कर सकते हैं:

.controller('controllerOne', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // create an object to store
    var someObject = {
        name: 'SomeObject',
        value: 1
    };
    // store the object
    this.dataService.data = someObject;
})

.controller('controllerTwo', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // this will automatically update with any changes to the shared data object
    this.objectFromControllerOne = this.dataService.data;
})

$ sce - सामग्री और संसाधनों को टेम्प्लेट में पवित्र और सुरक्षित करें

$ sce ("स्ट्रिक्ट कॉन्टेक्स्टुअल एस्केडिंग") एक अंतर्निहित कोणीय सेवा है जो स्वचालित रूप से टेम्प्लेट में सामग्री और आंतरिक स्रोतों को साफ करती है।

बाहरी स्रोतों और कच्चे HTML को टेम्पलेट में इंजेक्ट करने के लिए $sce मैनुअल रैपिंग की आवश्यकता होती है।

इस उदाहरण में हम एक सरल $ sce स्वच्छता फ़िल्टर बनाएँगे: `।

डेमो

.filter('sanitizer', ['$sce', [function($sce) {
     return function(content) {
          return $sce.trustAsResourceUrl(content);
      };
}]);

टेम्पलेट में उपयोग

<div ng-repeat="item in items">
    
    // Sanitize external sources
    <ifrmae ng-src="{{item.youtube_url | sanitizer}}">
    
    // Sanitaize and render HTML 
    <div ng-bind-html="{{item.raw_html_content| sanitizer}}"></div>

</div>

'सरणी सिंटैक्स' का उपयोग करके निर्भरता वाली सेवा कैसे बनाएं

angular.module("app")
  .service("counterService", ["fooService", "barService", function(anotherService, barService){

    var service = {
        number: 0,
        foo: function () {
            return fooService.bazMethod(); // Use of 'fooService'
        },
        bar: function () {
            return barService.bazMethod(); // Use of 'barService'
        }
    };
    
    return service;
   }]);

एक सेवा का पंजीकरण

एक सेवा बनाने के लिए सबसे आम और लचीला तरीका कोणीय.मॉड्यूल एपीआई कारखाने का उपयोग करता है:

angular.module('myApp.services', []).factory('githubService', function() {       
   var serviceInstance = {};
   // Our first service
   return serviceInstance;
});

सेवा कारखाना फ़ंक्शन या तो एक फ़ंक्शन या एक सरणी हो सकता है, जिस तरह हम नियंत्रक बनाते हैं:

// Creating the factory through using the
// bracket notation
angular.module('myApp.services', [])
.factory('githubService', [function($http) {
}]);

हमारी सेवा पर एक विधि का खुलासा करने के लिए, हम इसे सेवा ऑब्जेक्ट पर एक विशेषता के रूप में रख सकते हैं।

angular.module('myApp.services', [])
    .factory('githubService', function($http) {
        var githubUrl = 'https://api.github.com';
        var runUserRequest = function(username, path) {
        // Return the promise from the $http service
        // that calls the Github API using JSONP
        return $http({
            method: 'JSONP',
            url: githubUrl + '/users/' +
            username + '/' +
            path + '?callback=JSON_CALLBACK'
        });
    }
// Return the service object with a single function
// events
return {
    events: function(username) {
    return runUserRequest(username, 'events');
    }
};

सेवा और कारखाने के बीच अंतर

1) सेवाएं

एक सेवा एक constructor फ़ंक्शन है जिसे एक बार new साथ रनटाइम पर लगाया जाता है, ठीक उसी तरह जैसे हम सादे जावास्क्रिप्ट के साथ केवल इस अंतर के साथ करते हैं कि AngularJs new को पर्दे के पीछे बुला रहा है।

सेवाओं के मामले में याद रखने के लिए एक अंगूठे का नियम है

1. सेवाएँ निर्माणकर्ता हैं जिन्हें new साथ बुलाया जाता है

चलो एक सरल उदाहरण देखते हैं जहां हम एक सेवा को पंजीकृत करेंगे, जो छात्र के विवरण प्राप्त करने के लिए $http सेवा का उपयोग करता है, और नियंत्रक में इसका उपयोग करता है

function StudentDetailsService($http) {
  this.getStudentDetails = function getStudentDetails() {
    return $http.get('/details');
  };
}

angular.module('myapp').service('StudentDetailsService', StudentDetailsService);

हम बस इस सेवा को नियंत्रक में इंजेक्ट करते हैं

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

कब इस्तेमाल करें?

जब भी आप एक कंस्ट्रक्टर का उपयोग करना चाहते हैं, तो .service() का उपयोग करें। यह आम तौर पर getStudentDetails() तरह सार्वजनिक एपीआई बनाने के लिए उपयोग किया जाता है। लेकिन अगर आप कंस्ट्रक्टर का उपयोग नहीं करना चाहते हैं और इसके बजाय एक साधारण एपीआई पैटर्न का उपयोग करना चाहते हैं, तो .service() में ज्यादा लचीलापन नहीं है।

2) फैक्टरी

भले ही हम का उपयोग कर सभी चीजें हासिल कर सकते हैं .factory() जो हम, का उपयोग करके करते .services() , यह नहीं है .factory() "के रूप में एक ही" .service() । यह .service() तुलना में बहुत अधिक शक्तिशाली और लचीला है

A .factory() एक डिज़ाइन पैटर्न है जिसका उपयोग किसी मान को वापस करने के लिए किया जाता है।

कारखानों के मामले में याद रखने के लिए दो अंगूठे के नियम हैं

1. फैक्टरियां मान लौटाती हैं
2. कारखानों (वस्तुओं) (किसी भी वस्तु) बना सकते हैं

आइए हम कुछ उदाहरण देखते हैं कि हम क्या कर सकते हैं .factory()

लौटती हुई वस्तुएं साहित्य

चलो एक उदाहरण देखते हैं जहां कारखाने का उपयोग एक बुनियादी खुलासा मॉड्यूल पैटर्न का उपयोग करके किसी वस्तु को वापस करने के लिए किया जाता है

function StudentDetailsService($http) {
  function getStudentDetails() {
    return $http.get('/details');
  }
  return {
    getStudentDetails: getStudentDetails
  };
}

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

एक नियंत्रक के अंदर उपयोग

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

रिटर्निंग क्लोजर

एक बंद क्या है?

क्लोज़र वे फ़ंक्शंस हैं जो उन वेरिएबल्स को संदर्भित करते हैं जो स्थानीय रूप से उपयोग किए जाते हैं, लेकिन एक संलग्न दायरे में परिभाषित बीयूटी।

निम्नलिखित एक बंद होने का एक उदाहरण है

function closureFunction(name) {
  function innerClosureFunction(age) { // innerClosureFunction() is the inner function, a closure
    // Here you can manipulate 'age' AND 'name' variables both
  };
};

"अद्भुत" हिस्सा यह है कि यह उस name तक पहुंच सकता है जो मूल दायरे में है।

अंदर बंद उदाहरण का उपयोग करें .factory()

function StudentDetailsService($http) {
  function closureFunction(name) {
  function innerClosureFunction(age) {
    // Here you can manipulate 'age' AND 'name' variables
    };
  };
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

एक नियंत्रक के अंदर उपयोग

function StudentController(StudentDetailsService) {
  var myClosure = StudentDetailsService('Student Name'); // This now HAS the innerClosureFunction()
  var callMyClosure = myClosure(24); // This calls the innerClosureFunction()
};

angular.module('app').controller('StudentController', StudentController);

कंस्ट्रक्टर / इंस्टेंसेस बनाना

.service() ऊपर बताए अनुसार new लिए कॉल के साथ कंस्ट्रक्टर बनाता है। .factory() new लिए कॉल के साथ कंस्ट्रक्टर भी बना सकता है

इसे कैसे प्राप्त करें, इस पर एक उदाहरण देखते हैं

function StudentDetailsService($http) {
  function Student() {
    this.age = function () {
        return 'This is my age';
    };
  }
  Student.prototype.address = function () {
        return 'This is my address';
  };
  return Student;
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

एक नियंत्रक के अंदर उपयोग

function StudentController(StudentDetailsService) {
  var newStudent = new StudentDetailsService();
  
  //Now the instance has been created. Its properties can be accessed.

 newStudent.age();
 newStudent.address();
  
};

angular.module('app').controller('StudentController', StudentController);