Come gestire i servizi XML in AngularJS?

Question

La mia azienda ha migliaia di servizi Web xml esistenti e sta iniziando ad adottare AngularJs per nuovi progetti.

Il tutorial su http://angularjs.org/ utilizza esclusivamente servizi json. Sembra che facciano una chiamata di servizio nel controller, analizzino il JSON risultante e passino l'oggetto risultante direttamente alla vista.

Cosa faccio con XML? Vedo quattro opzioni:

1. Analizzarlo e passare l'oggetto DOM direttamente all'interfaccia utente (visualizzazione).

2. Mettere un wrapper JSON attorno ai miei servizi XML sul lato server.

3. convertire l'oggetto DOM in JSON con qualche libreria sul lato client e riconvertirlo quando faccio le richieste post/put.

4. Convertire manualmente l'oggetto DOM in un oggetto JavaScript sul lato client.

Qual è l'approccio corretto e perché?

Answer 1

Se l'opzione 2 è relativamente semplice per te (ad esempio l'aggiunta di conversioni JSON su una sola riga nei controller back-end, ad esempio), probabilmente è un buon investimento, poiché il JSON è più snello, molto meno lavoro dal lato del cliente e generalmente preferito dai consumatori di API RESTful (nel caso in cui ci siano altri consumatori).

Avendo recentemente fatto questo tipo di lavoro, direi che il miglior percorso successivo (se l'opzione 2 è difficile) sarebbe quella di utilizzare risposta e richiedere transformers per eseguire le conversioni tra il XML e oggetti JavaScript, che è una variante da qualche parte tra le opzioni 3 e 4. L'oggetto DOMParser è codice nativo, quindi analizza molto velocemente l'XML. Trasformare il DOM XML in oggetti JavaScript e generare XML da oggetti JavaScript sono entrambi algoritmi ricorsivi abbastanza semplici. Questo approccio disaccoppia tutto il resto del codice lato client dalla rappresentazione back-end, il che non sarebbe il caso se venisse adottata l'opzione 1. Tale disaccoppiamento consentirebbe di utilizzare direttamente un'interfaccia RESTful basata su JSON , dovrebbe sorgere tale opportunità.

La selezione di qualsiasi opzione che implichi oggetti JSON/JavaScript implicherà spesso problemi di mancata corrispondenza dell'impedenza come attributi XML, raccolte XML vs array JS e rappresentazione di contenuto misto XML. Se i tuoi modelli di dati sono abbastanza semplici, o non ti dispiace vivere con le soluzioni fornite da trasformatori pronti all'uso tra XML e JSON (ad es. Contenimento di oggetti ridondanti, proprietà di testo numerate per rappresentare il testo disgiunto mescolato con gli elementi) , quindi questo potrebbe non essere un problema per te. Altrimenti, ci sono opportunità per personalizzare imperativamente il comportamento di trasformazione alle due estremità della richiesta (anche se purtroppo non in modo dichiarativo, per quanto ho visto).

Answer 2

Si consiglia di disporre di un convertitore xson a json. Eccone uno

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

Dopo la conversione, si ha un oggetto JS normale, in cui è possibile utilizzare le normali direttive angolari per analizzare attraverso di loro e li usa come si desidera.

Answer 3

Ho avuto lo stesso problema. Finito facendo un piccolo modulo per trasformare tutte le mie risposte XML in un oggetto ng.element.

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

Answer 4

Sto trovando x2js funziona abbastanza bene: https://code.google.com/p/x2js/

Il cliente prende in XML, non c'è bisogno di pasticciare con i servizi angolari. Una semplice conversione rapida e, voilà, hai un'API JSON che imita il documento XML. Sembra prendersi cura di tutti i casi d'uso in cui mi sono imbattuto.

Answer 5

ho creato un servizio denominato HttpService avere una funzione chiamata getRequestedContent in cui sto usando chiamata http angolare al mio servizio "http://localhost:8080/showserverstartupinfo", che restituisce un XML come segue:

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

... e io analizzare il sopra xml e popolare il mio div con il contenuto dell'elemento xml.

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 
}); 

funzione getRequestedContent in HTTPService (Angularjs) come segue:

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