AngularJS में XML सेवाओं को कैसे प्रबंधित करें?

Question

मेरी कंपनी के पास हजारों मौजूदा एक्सएमएल वेब सेवाएं हैं और नई परियोजनाओं के लिए एंगुलरजे को अपनाने शुरू कर रही हैं।

http://angularjs.org/ पर ट्यूटोरियल विशेष रूप से जेसन सेवाओं का उपयोग करता है। ऐसा लगता है कि वे नियंत्रक में एक सेवा कॉल करते हैं, परिणामी JSON को पार्स करते हैं, और परिणामस्वरूप ऑब्जेक्ट को सीधे दृश्य में पास करते हैं।

एक्सएमएल के साथ मैं क्या करूँ? मैं चार विकल्प देखें:

1. यह पार्स और यूआई (देखें) के लिए सीधे डोम वस्तु गुजरती हैं।

2. सर्वर की तरफ मेरी एक्सएमएल सेवाओं के आस-पास एक JSON wrapper रखो।

3. क्लाइंट पक्ष पर कुछ लाइब्रेरी के साथ DOM ऑब्जेक्ट को JSON में परिवर्तित करें और पोस्ट/पुट अनुरोध करते समय इसे वापस परिवर्तित करें।

4. DOM ऑब्जेक्ट को क्लाइंट साइड पर मैन्युअल रूप से जावास्क्रिप्ट ऑब्जेक्ट में कनवर्ट करें।

सही दृष्टिकोण और क्यों?

Answer 1

यदि विकल्प 2 आपके लिए अपेक्षाकृत आसान है (उदाहरण के लिए, आपके बैक-एंड नियंत्रकों में एक-पंक्ति JSON रूपांतरण जोड़ना), तो शायद यह एक अच्छा निवेश है, क्योंकि JSON तार पर दुबला है, बहुत कम काम ग्राहक पक्ष पर और आम तौर पर रीस्टफुल एपीआई उपभोक्ताओं द्वारा पसंद किया जाता है (यदि अन्य उपभोक्ता भी हैं)।

हाल ही में इस तरह के काम करने के बाद, मैं कहूंगा कि अगला सबसे अच्छा पथ (यदि विकल्प 2 मुश्किल है) प्रतिक्रिया का उपयोग करना होगा और transformers को अपने एक्सएमएल और जावास्क्रिप्ट ऑब्जेक्ट्स के बीच रूपांतरण करने के लिए अनुरोध करें, जो कहीं भिन्नता है आपके विकल्प 3 और 4 के बीच। DOMParser ऑब्जेक्ट मूल कोड है, इसलिए यह एक्सएमएल को बहुत तेज बनाता है। एक्सएमएल डीओएम को जावास्क्रिप्ट ऑब्जेक्ट्स में ट्रांसफॉर्म करना और जावास्क्रिप्ट ऑब्जेक्ट्स से एक्सएमएल उत्पन्न करना काफी सीधा रिकर्सिव एल्गोरिदम दोनों हैं। यह दृष्टिकोण आपके शेष क्लाइंट-साइड कोड को बैक-एंड प्रतिनिधित्व से हटा देता है, जो आपके विकल्प के साथ नहीं होने पर मामला नहीं होगा। इस तरह के decoupling आपको JSON- आधारित रीस्टफुल इंटरफेस का प्रत्यक्ष उपयोग करने की अनुमति देगा , ऐसा अवसर पैदा होना चाहिए।

जेएसओएन/जावास्क्रिप्ट ऑब्जेक्ट्स सहित किसी भी विकल्प का चयन करने में अक्सर एक्सएमएल एट्रिब्यूट्स, एक्सएमएल संग्रह बनाम जेएस एरे और एक्सएमएल मिश्रित सामग्री प्रतिनिधित्व जैसे प्रतिबाधा विसंगति के मुद्दों से निपटना शामिल होगा। यदि आपके डेटा मॉडल काफी सरल हैं, या आप एक्सएमएल और जेएसओएन (उदाहरण के लिए, अनावश्यक ऑब्जेक्ट कंटेंटेशन, तत्वों के साथ मिश्रित विवादित पाठ का प्रतिनिधित्व करने के लिए क्रमांकित टेक्स्ट गुणों के बीच आउट-ऑफ-द-बॉक्स ट्रांसफॉर्मर द्वारा प्रदान किए गए समाधानों के साथ रहने में कोई फर्क नहीं पड़ता) , तो यह आपके लिए कोई मुद्दा नहीं हो सकता है। अन्यथा, अनुरोध के किसी भी अंत में परिवर्तन व्यवहार को अनुकूलित करने के अवसर हैं (हालांकि दुख की बात नहीं है, जहां तक ​​मैंने देखा है)।

Answer 2

मैं कनवर्टर JSON करने के लिए एक एक्सएमएल के लिए आप की सिफारिश करेंगे। यहाँ एक है।

https://code.google.com/p/jquery-xml2json-plugin/

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

Answer 3

मुझे एक ही समस्या थी। मेरे सभी एक्सएमएल प्रतिक्रियाओं को ng.element ऑब्जेक्ट में बदलने के लिए एक छोटा मॉड्यूल बनाना समाप्त हो गया।

https://github.com/johngeorgewright/angular-xml

Answer 4

मैं x2js खोजने कर रहा हूँ बहुत अच्छी तरह से काम कर रहा है: https://code.google.com/p/x2js/

ग्राहक एक्सएमएल में ले जाता है, कोणीय सेवाओं के साथ गड़बड़ करने के लिए कोई जरूरत नहीं। एक साधारण त्वरित रूपांतरण और, वॉयला, आपके पास एक JSON API है जो XML दस्तावेज़ को नकल करता है। लगता है कि मैंने जिन सभी उपयोग मामलों में भाग लिया है, उनका ख्याल रखना लगता है।

Answer 5

मैं एक समारोह getRequestedContent कहा जाता है, जिसमें मैं अपने सेवा "http://localhost:8080/showserverstartupinfo" जो एक एक्सएमएल रिटर्न के रूप में इस के लिए कोणीय http कॉल उपयोग कर रहा हूँ होने HttpService नाम के एक सेवा बनाया:

<SERVERSTARTUPINFO> 
<SERVERNAME>########</SERVERNAME> 
<SERVERSTARTUPTIME>##########</SERVERSTARTUPTIME> 
</SERVERSTARTUPINFO> 

... और मुझे पार्स xml से ऊपर और xml तत्व की सामग्री के साथ मेरे div populate। के रूप में HttpService में

HttpService.getRequestedContent('/showserverstartupinfo').then(
    function(content) { 
    //successCallback 
    var xml = content.data; 
    document.getElementById('serverName').innerHTML = 
      xml.getElementsByTagName("SERVERNAME")[0].childNodes[0].nodeValue; 
    }, function(data) { 
    //errorCallback 
}); 

getRequestedContent समारोह (AngularJS) इस प्रकार है:

getRequestedContent : function(request) { 
    var url = this.getRootContextPath() + request; 
    return $http({ 
    method : 'GET', 
    url : url, 
    transformResponse : function(data) { 
     return $.parseXML(data); 
    } 
    }); 
}