Angular.js में AJAX कॉल करने के लिए सबसे अच्छा अभ्यास क्या है?

Question

मैं इस लेख को पढ़ रहा था: http://eviltrout.com/2013/06/15/ember-vs-angular.html

और इसने कहा,

यह सम्मेलनों की कमी के कारण, मुझे आश्चर्य है कि कितने कोणीय परियोजनाएं नियंत्रकों के भीतर AJAX कॉल जैसी खराब प्रथाओं पर भरोसा करती हैं? निर्भरता इंजेक्शन के कारण, क्या डेवलपर्स राउटर मापदंडों को निर्देशों में इंजेक्ट कर रहे हैं? क्या नौसिखिया एंगुलरजेएस डेवलपर्स अपने कोड को इस तरह से संरचना करने जा रहे हैं कि एक अनुभवी एंगुलरजेएस डेवलपर का मानना ​​है कि यह मुहावरा है?

मैं वास्तव में $httpअपने Angular.js नियंत्रक से कॉल कर रहा हूं । यह एक बुरा अभ्यास क्यों है? $httpफिर कॉल करने के लिए सबसे अच्छा अभ्यास क्या है ? और क्यों?

Comments

एम्बर और एंगुलरज की तुलना करने वाले दिलचस्प पोस्ट के संदर्भ में +1।

— चंद्रमणि

मैंने

— एंगुलर

इसके अलावा एक पूरक उन चीज़ों के लिए भी एपीआई की जाँच करें जिन्हें आपने याद किया होगा: docs.angularjs.org/api/ng/service/$http

— Christophe Roussy

Answer 1

EDIT: यह उत्तर मुख्य रूप से 1.0.X संस्करण पर केंद्रित था। भ्रम की स्थिति को रोकने के लिए यह आज, 2013-12-05 के अनुसार कोणीय के सभी वर्तमान संस्करणों के लिए सर्वोत्तम उत्तर को प्रतिबिंबित करने के लिए बदला जा रहा है।

यह विचार एक ऐसी सेवा बनाने का है जो लौटाए गए डेटा के लिए एक वादा करता है, फिर अपने नियंत्रक में कॉल करें और अपनी $ गुंजाइश संपत्ति को आबाद करने के लिए वहां के वादे को संभालें।

सेवा

module.factory('myService', function($http) {
   return {
        getFoos: function() {
             //return the promise directly.
             return $http.get('/foos')
                       .then(function(result) {
                            //resolve the promise as the data
                            return result.data;
                        });
        }
   }
});

नियंत्रक:

वादा करने की then()विधि को संभालें और इससे डेटा प्राप्त करें। $ स्कोप प्रॉपर्टी सेट करें, और जो कुछ भी आपको करने की आवश्यकता हो वह करें।

module.controller('MyCtrl', function($scope, myService) {
    myService.getFoos().then(function(foos) {
        $scope.foos = foos;
    });
});

इन-प्रॉमिस रिज़ॉल्यूशन रिज़ॉल्यूशन (1.0.X केवल):

कोणीय 1.0.X में, यहां मूल उत्तर के लक्ष्य, वादों को व्यू द्वारा विशेष उपचार मिलेगा। जब वे हल करते हैं, तो उनका हल मूल्य दृश्य के लिए बाध्य होगा। यह 1.2.X में पदावनत किया गया है

module.controller('MyCtrl', function($scope, myService) {
    // now you can just call it and stick it in a $scope property.
    // it will update the view when it resolves.
    $scope.foos = myService.getFoos();
});

Comments

बस उल्लेख करने के लिए, यह केवल तब काम करता है जब आप $scope.foosकिसी टेम्पलेट में संपत्ति का उपयोग करते हैं। यदि आप टेम्पलेट के बाहर उसी संपत्ति का उपयोग करते थे (उदाहरण के लिए किसी अन्य फ़ंक्शन में), तो संग्रहित वस्तु अभी भी एक वादा वस्तु है।

— क्लार्क पैन

मैं वर्तमान में एक नए कोणीय ऐप में इस पैटर्न का उपयोग कर रहा हूं, हालांकि मैं एक क्रूड पेज में सोच रहा हूं कि मैं उस संपत्ति तक कैसे पहुंच सकता हूं जिसे मैं दायरे में बांधता हूं, इस उदाहरण में अगर मैं getFoos से डेटा लेना चाहता हूं और इसमें परिवर्तन करना चाहता हूं यह। अगर मैं कोशिश करता हूं और मेरे अपडेट में $ स्कोप का उपयोग करता हूं। तो मेरे पास वादा वस्तु है और डेटा नहीं है, मैं देख सकता हूं कि डेटा को ऑब्जेक्ट में कैसे प्राप्त किया जाए, लेकिन ऐसा लगता है कि यह वास्तव में हैक है।

— केली मिलिगन

@KellyMilligan, इस पैटर्न में, यह बाध्यकारी है जो जानता है कि वादे के साथ क्या करना है। यदि आपको कहीं और से वस्तु तक पहुंचने की आवश्यकता है, तो आपको .then()वादे को संभालना होगा और मूल्य को $ गुंजाइश में रखना होगा ...myService.getFoos().then(function(value) { $scope.foos = value; });

— बेन लेश

इस तकनीक पर सिर्फ एक अपडेट, 1.2.0-rc.3 के रूप में, वादों के ऑटो अन-रैपिंग को हटा दिया गया है, इसलिए यह तकनीक अब काम नहीं करेगी।

— क्लार्क पैन

हाल ही में यहां कुछ डाउनवोट मिले, शायद इसलिए क्योंकि यह अब कोणीय के नवीनतम संस्करण के अनुरूप नहीं था। मैंने उस उत्तर को प्रतिबिंबित करने के लिए अद्यतन किया है।

— बेन लश

Answer 2

सबसे अच्छा अभ्यास $httpएक 'सेवा' में कॉल को बाहर करना होगा जो आपके नियंत्रक को डेटा प्रदान करता है:

module.factory('WidgetData', function($http){
    return {
        get : function(params){
            return $http.get('url/to/widget/data', {
                params : params
            });
        }
    }
});

module.controller('WidgetController', function(WidgetData){
    WidgetData.get({
        id : '0'
    }).then(function(response){
        //Do what you will with the data.
    })
});

का सार $http इस तरह कॉल आप एकाधिक नियंत्रकों भर में इस कोड को पुन: उपयोग करने की अनुमति देगा। यह तब आवश्यक हो जाता है जब इस डेटा के साथ बातचीत करने वाला कोड अधिक जटिल हो जाता है, शायद आप अपने नियंत्रक में उपयोग करने से पहले डेटा को संसाधित करना चाहते हैं, और उस प्रक्रिया के परिणाम को कैश करें ताकि आपको इसे फिर से संसाधित करने में समय न बिताना पड़े।

आपके द्वारा उपयोग किए जा सकने वाले डेटा के प्रतिनिधित्व (या मॉडल) के रूप में आपको 'सेवा' के बारे में सोचना चाहिए।

Answer 3

स्वीकृत उत्तर मुझे $http is not definedत्रुटि दे रहा था इसलिए मुझे ऐसा करना पड़ा:

var policyService = angular.module("PolicyService", []);
policyService.service('PolicyService', ['$http', function ($http) {
    return {
        foo: "bar",
        bar: function (params) {
            return $http.get('../Home/Policy_Read', {
                params: params
            });
        }
    };
}]);

इस लाइन के मुख्य अंतर:

policyService.service('PolicyService', ['$http', function ($http) {

Answer 4

मैंने किसी ऐसे व्यक्ति के लिए एक उत्तर दिया, जो एंगुलर में पूरी तरह से सामान्य वेब सेवा चाहता था। मैं आपको इसे प्लग इन करने की सलाह दूंगा और यह आपके सभी वेब सर्विस कॉल का ध्यान रखे बिना उन सभी को कोड करने की आवश्यकता होगी। जवाब यहाँ है:

https://stackoverflow.com/a/38958644/5349719