Comment gérer les services XML dans AngularJS?

Mon entreprise dispose de milliers de services Web xml existants et commence à adopter AngularJs pour de nouveaux projets.

Le tutoriel sur http://angularjs.org/ utilise exclusivement les services json. Il semble qu’ils effectuent un appel de service dans le contrôleur, parsingnt le JSON résultant et transmettent l’object obtenu directement à la vue.

Qu’est-ce que je fais avec XML? Je vois quatre options:

  1. Analyser et passer l’object DOM directement à l’interface utilisateur (vue).

  2. Placez un wrapper JSON autour de mes services XML du côté serveur.

  3. Convertissez l’object DOM en JSON avec une bibliothèque du côté client et reconvertissez-le lorsque je lance les requêtes post / put.

  4. Convertissez l’object DOM en object JavaScript manuellement du côté client.

Quelle est la bonne approche et pourquoi?

Si l’option 2 est relativement facile pour vous (par exemple, en ajoutant des conversions JSON d’une ligne dans vos contrôleurs dorsaux), alors c’est probablement un bon investissement, car le JSON est plus léger sur le réseau, beaucoup moins de travail côté client. et généralement préféré par les consommateurs d’API RESTful (s’il y a d’autres consommateurs).

Ayant récemment effectué ce genre de travail, je dirais que le prochain meilleur chemin (si l’option 2 est difficile) serait d’utiliser des transformateurs de réponse et de requête pour effectuer des conversions entre vos objects XML et JavaScript, ce qui est une variation entre vos options. et 4. L’object DOMParser est un code natif, il parsing donc XML rapidement. Transformer le DOM XML en objects JavaScript et générer du XML à partir d’objects JavaScript sont des algorithmes récursifs relativement simples. Cette approche dissocie tout le rest de votre code côté client de la représentation back-end, ce qui ne serait pas le cas si vous utilisiez l’option 1. Ce découplage vous permettrait d’utiliser directement une interface RESTful basée sur JSON. , si une telle opportunité se présentait.

La sélection de n’importe quelle option impliquant des objects JSON / JavaScript implique souvent de traiter des problèmes d’incompatibilité d’impédance tels que les atsortingbuts XML, les collections XML par rapport aux tableaux JS et à la représentation de contenu mixte XML. Si vos modèles de données sont assez simples ou si cela ne vous dérange pas de vivre avec les solutions fournies par les transformateurs prêts à l’emploi entre XML et JSON (par exemple, contention d’objects redondants, propriétés de texte numérotées pour représenter un texte disjoint mélangé à des éléments) , alors cela peut ne pas être un problème pour vous. Sinon, il existe des possibilités de personnalisation du comportement de transformation à chaque extrémité de la requête (mais malheureusement pas de manière déclarative, pour autant que je sache).

Je vous recommande d’avoir un convertisseur XML vers JSON . En est un.

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

Après la conversion, vous avez un object JS normal dans lequel vous pouvez utiliser vos directives angulars normales pour les parsingr et les utiliser comme vous le souhaitez.

J’ai eu le même problème. Nous avons fini par créer un petit module pour transformer toutes mes réponses XML en object ng.element.

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

Je trouve que x2js fonctionne assez bien: https://code.google.com/p/x2js/

Le client prend en XML, pas besoin de jouer avec les services angulars. Une simple conversion rapide et, voilà, vous avez une API JSON qui imite le document XML. Semble prendre soin de tous les cas d’utilisation que j’ai rencontrés.

J’ai créé un service nommé HttpService ayant une fonction appelée getRequestedContent dans laquelle j’utilise un appel HTTP angular à mon service ” http: // localhost: 8080 / showserverstartupinfo ” qui renvoie un fichier XML comme suit:

  ######## ##########  

… et j’parsing le xml ci-dessus et remplis mon div avec le contenu de l’élément 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 }); 

Fonction getRequestedContent dans HttpService (Angularjs) comme suit:

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