web-dev-qa-db-fra.com

Comment gérer les services XML dans AngularJS?

Mon entreprise possède des milliers de services Web XML existants et commence à adopter AngularJs pour ses nouveaux projets.

Le tutoriel à l'adresse http://angularjs.org/ utilise exclusivement les services JSON. Il semble qu'ils effectuent un appel de service dans le contrôleur, analysent le JSON résultant et transmettent l'objet résultant directement à la vue.

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

  1. Analysez-le et passez l'objet DOM directement à l'interface utilisateur (vue).

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

  3. convertissez l'objet DOM en JSON avec une bibliothèque côté client et reconvertissez-le lorsque je fais les demandes de post/put.

  4. Convertissez l'objet DOM en objet JavaScript manuellement du côté client.

Quelle est la bonne approche et pourquoi?

xmlserviceangularjsbackend
52
Nick Vikeras

Si l'option 2 est relativement simple pour vous (par exemple, l'ajout de conversions JSON sur une ligne dans vos contrôleurs back-end), c'est probablement un bon investissement, car le JSON est plus léger, beaucoup moins de travail côté client. et généralement préféré par les utilisateurs d'API RESTful (s'il y a d'autres consommateurs).

Ayant récemment effectué ce type de travail, je dirais que le meilleur meilleur chemin (si l'option 2 est difficile) serait d'utiliser la réponse et la requête transformers pour effectuer des conversions entre vos objets XML et JavaScript, ce qui est: une variation quelque part entre vos options 3 et 4. L'objet DOMParser étant du code natif, il analyse beaucoup de XML rapidement. Transformer le DOM XML en objets JavaScript et générer du XML à partir d'objets JavaScript sont des algorithmes récursifs relativement simples. Cette approche dissocie tout le reste 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ésente.

La sélection d'une option impliquant des objets JSON/JavaScript implique souvent le traitement de problèmes de non-concordance d'impédance tels que les attributs 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 que vous ne craignez pas de vivre avec les solutions fournies par des transformateurs prêts à l'emploi entre XML et JSON (par exemple, confinement d'objet redondant, propriétés de texte numérotées pour représenter du texte disjoint mélangé à des éléments) alors ce n’est peut-être pas un problème pour vous. Sinon, il est possible de personnaliser impérativement le comportement de transformation à l'une des extrémités de la demande (mais malheureusement pas de manière déclarative, autant que je sache).

34
Jollymorphic

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 un objet ng.element.

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

16
johngeorgewright

Je vous recommanderais d’avoir un convertisseur xml en json . En voici un.

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

Après la conversion, vous avez un objet JS normal dans lequel vous pouvez utiliser vos directives angular) normales pour les analyser et les utiliser à votre guise.

16
Abilash

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

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

11
Michael Bushe

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

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

... et j'analyse 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);
    }
  });
}
0
Rohit Luthra