web-dev-qa-db-ja.com

AngularJSでXMLサービスを処理する方法は？

私の会社には何千もの既存のxml Webサービスがあり、新しいプロジェクトにAngularJsを採用し始めています。

http://angularjs.org/ のチュートリアルでは、jsonサービスのみを使用しています。コントローラでサービス呼び出しを行い、結果のJSONを解析し、結果のオブジェクトをビューに直接渡すようです。

XMLで何をしますか？次の4つのオプションがあります。

  1. それを解析し、DOMオブジェクトを直接UI（view）に渡します。

  2. サーバー側のXMLサービスをJSONラッパーで囲みます。

  3. クライアント側のライブラリを使用してDOMオブジェクトをJSONに変換し、ポスト/プットリクエストを行うときに元に戻します。

  4. クライアント側でDOMオブジェクトをJavaScriptオブジェクトに手動で変換します。

正しいアプローチとその理由は何ですか？

xmlserviceangularjsbackend
52
Nick Vikeras

オプション2が比較的簡単な場合（たとえば、バックエンドコントローラーに1行のJSON変換を追加する場合）、JSONはネットワーク上で無駄がなく、クライアント側での作業がはるかに少ないため、おそらく良い投資になるでしょう。一般にRESTful APIコンシューマーが好む（他のコンシューマーがある場合）。

この種の作業を最近行ったので、次の最適なパス（オプション2が難しい場合）は、応答と要求を使用することです transformers を使用して、XMLオブジェクトとJavaScriptオブジェクト間の変換を実行します。オプション3と4の間のバリエーションです。DOMParserオブジェクトはネイティブコードであるため、XMLを非常に高速に解析します。 XML DOMをJavaScriptオブジェクトに変換し、JavaScriptオブジェクトからXMLを生成することは、どちらも非常に簡単な再帰アルゴリズムです。このアプローチにより、クライアント側のコードのすべてがバックエンド表現から分離されます。オプション1を使用した場合はそうではありません。このような分離により、JSONベースのRESTfulインターフェースを直接使用できます。 、そのような機会が生じた場合。

JSON/JavaScriptオブジェクトを含むオプションを選択すると、多くの場合、XML属性、XMLコレクションとJS配列、XML混合コンテンツ表現などのインピーダンスミスマッチの問題に対処する必要があります。データモデルが十分に単純である場合、またはXMLとJSONの間ですぐに使用できるトランスフォーマーによって提供されるソリューション（たとえば、冗長オブジェクトの包含、要素と混合されたばらばらのテキストを表す番号付きテキストプロパティ） 、これはあなたにとって問題ではないかもしれません。それ以外の場合は、要求の両端で変換動作を強制的にカスタマイズする機会があります（残念ながら、私が見た限りでは宣言的にではありません）。

34
Jollymorphic

同じ問題がありました。すべてのXML応答をng.elementオブジェクトに変換する小さなモジュールを作成することになりました。

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

16
johngeorgewright

xml to jsonコンバーターを使用することをお勧めします。ここに一つあります。

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

変換後、通常のJSオブジェクトが得られ、通常のangularディレクティブを使用してそれらを解析し、必要に応じて使用できます。

16
Abilash

私はx2jsが非常にうまく機能していることを発見しています： https://code.google.com/p/x2js/

クライアントはXMLを受け取ります。angularサービスをいじる必要はありません。簡単な迅速な変換と、できれば、XMLドキュメントをmimcsするJSON APIがあります。私が遭遇したユースケース。

11
Michael Bushe

HttpServiceという名前のサービスを作成しました。getRequestedContentという関数を使用しています。このサービスでは、angular http call to my service " http ：// localhost：8080/showserverstartupinfo "は、次のようにxmlを返します。

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

...そして、上記のxmlを解析し、xml要素のコンテンツをdivに追加します。

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

次のHttpService（Angularjs）のgetRequestedContent関数：

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