एंगुलर के साथ $ http में एक्सएचआर तक पहुंच कैसे प्राप्त करें?

Question

वर्तमान में मैं कोणीय के साथ अपलोड फ़ंक्शन को लागू करने का प्रयास कर रहा हूं। सबसे पहले मैंने XmlHttpRequest का उपयोग किया लेकिन बाद में मैंने इसे $ http में बदल दिया। तो मैंने पाया कि मुझे $ http के साथ प्रगति पट्टी बनाने के लिए XmlHttpRequest तक पहुंच नहीं मिल सका। नीचे मेरा कोड है। छवियों को अपलोड करते समय प्रगति पट्टी बनाने के बारे में कोई सुझाव? धन्यवाद।

$http({ 
      method: 'POST', 
      url: upload_url, 
      data: fd, 
      headers: {'Content-Type': undefined}, 
      transformRequest: angular.identity 
      }) 

Answer 1

यह आपको सेवा कर सकते हैं:

  $http.post('http://url.com', {parameter1:'parameter', parameter2: 'secondparameter'}).success(function (result) { 
       console.log(result.data); 
      }).error(function(data, status, headers, config) { 
       console.log(status); 
      })); 

Answer 2

यहाँ XHR वस्तु होने का रास्ता:

http://boylesoftware.com/blog/angular-tip-using-the-xmlhttprequest-object/

कॉपी/पेस्ट:

आम तौर पर, एक AngularJS एप्लिकेशन $ http servi का उपयोग करता है को बैक-एंड सेवाओं को कॉल करने के लिए सीई बनाना है। कभी-कभी, हम अंतर्निहित XMLHttpRequest ऑब्जेक्ट तक पहुंच प्राप्त करना चाहते हैं। मैं कुछ उपयोग-मामलों के साथ आ सकता हूं, लेकिन सबसे प्रमुख व्यक्ति शायद फ़ाइल अपलोड जैसे लंबे अनुरोध की प्रगति को ट्रैक करने में सक्षम है। ऐसा करने के लिए, हमें "प्रगति पर" होने वाली घटना के लिए XMLHttpRequest ऑब्जेक्ट पर एक ईवेंट श्रोता पंजीकृत करने की आवश्यकता है। आश्चर्यजनक रूप से पर्याप्त, कोणीय की $ http सेवा अंतर्निहित XMLHttpRequest ऑब्जेक्ट को किसी भी तरह से प्रकट नहीं करती है। तो, हमें रचनात्मक होना है। इसे करने का एक तरीका यहां है ...

$ http सेवा की कॉन्फ़िगरेशन ऑब्जेक्ट हमें अपने "शीर्षलेख" संपत्ति के माध्यम से HTTP अनुरोध में शीर्षलेख जोड़ने की अनुमति देता है। इसका मतलब है कि किसी बिंदु पर $ http को उन हेडर को XMLHttpRequest ऑब्जेक्ट पर सेट करना होगा जो इसका उपयोग करता है। ऐसा करने का तरीका XMLHttpRequest की setRequestHeader विधि का उपयोग करना है। तो विचार XMLHttpRequest प्रोटोटाइप पर setRequestHeader विधि को ओवरराइड करना है और एक हुक पेश करने के लिए एक विशेष शीर्षलेख नाम का उपयोग करना है। उस के साथ शुरू करते हैं और एक सरल कोणीय मॉड्यूल इसके विन्यास चरण में विधि प्रतिस्थापन करता है बनाने के लिए:

angular.module("bsworksXHR", []).config([ 
    function() { 
     XMLHttpRequest.prototype.setRequestHeader = (function(sup) { 
      return function(header, value) { 
       if ((header === "__XHR__") && angular.isFunction(value)) 
        value(this); 
       else 
        sup.apply(this, arguments); 
      }; 
     })(XMLHttpRequest.prototype.setRequestHeader); 
    } 
]); 

अब, जब हम एक $ http सेवा फोन करना, हम एक शीर्ष लेख कहा जाता है जोड़ सकते हैं "एक्सएचआर" एक फ़ंक्शन वैल्यू के साथ जो XMLHttpRequest ऑब्जेक्ट को एकमात्र तर्क के रूप में प्राप्त करेगा। उदाहरण के लिए, कहीं और आवेदन में:

$http({ 
    … 
    headers: { 
     … 
     __XHR__: function() { 
      return function(xhr) { 
       xhr.upload.addEventListener("progress", function(event) { 
        console.log("uploaded " + ((event.loaded/event.total) * 100) + "%"); 
       }); 
      }; 
     }, 
     … 
    }, 
    … 
}).success(…); 

उम्मीद है, AngularJS के भविष्य के संस्करणों कुछ सरकारी रास्ता निम्न स्तर XMLHttpRequest ऑब्जेक्ट तक पहुँचने के लिए, शामिल होंगे भले ही इस तरह होने के रूप में, सीमित ईवेंट श्रोताओं को पंजीकृत करने या XMLHttpRequest घटनाओं को कोणीय घटनाओं में अनुवाद करने में सक्षम। तब तक, मैं अपने ऐप्स में ऊपर दृष्टिकोण का उपयोग कर रहा हूं।