web-dev-qa-db-ja.com

AngularJS-SOAP AngularJSモデルとのサービス統合

私は、AngularJSを学んでいる経験豊富なFlex開発者です。これはとても紛らわしい!!!

とにかく、SOAP WSDL Request）を介して（同じドメイン上の）バックエンドサーバーにサービス呼び出しを行い、AngularJSモデルオブジェクトをデータに追加しようとしています。 SOAPタグを作成した方法に何か問題があると思います。正常な応答が返されましたが、データがありませんでした。

Ajaxメソッドを理解できなかった後、soapclient.jsに出会い、Ajaxよりも少ないコードで非常に簡単であることがわかりました。 soapclient.jsは、Ajaxメソッドに似たほとんどの作業を行います。さらに、soapclient.jsを使用して、SOAP呼び出しを行い、XML形式の応答にデータを戻すこともできます。

http://javascriptsoapclient.codeplex.com

私の問題は、AngularJSを使用してXML応答をAnularJSモデルオブジェクトにダンプしようとしていることです。私がやっていることのためにAngularJSプロジェクトをセットアップする方法はわかりませんが、私が取り組んでいるものを切り離しておくための最良の方法を本当に知りたいです。私はグーグルを狂ったように検索してきましたが、ほとんどの例は初心者には過度に複雑に思えます。

ここに私が持っているものがあります：

<html>
<head>
    <script language="JavaScript" type="text/javascript" src="jquery-1.10.1.js"></script>
    <script language="JavaScript" type="text/javascript" src="soapclient.js"></script>

    <script type="text/javascript">
        function getData() {
            var url2 = "https://myService";
            var pl = new SOAPClientParameters();

            pl.add("arg0", false);

            SOAPClient.invoke(url2, "methodToCall", pl, true, getDataCallback);
        }

        function getDataCallback(r, soapResponse) {
            alert(r.contents.payeeMailName);
        }
    </script>
</head>

<body>
<form>
    <input type="button" value="Click Here to Call Web Service" onClick="getData()" style="width: 192px">
</form>
<div id="result">Result?</div>
</body>
</html>

現在、SOAPサービスは次のようなデータを返します。

 <return>
    <contents>
       <eftAcctType>S</eftAcctType>
       <id>
          <djNumber>201-16-39063</djNumber>
          <djSequence>1</djSequence>
       </id>
       <payeeAddrLine1>124 Agate Drive</payeeAddrLine1>
    </contents>
    <contents>
       <eftAcctType/>
       <id>
          <djNumber>201-16-39201</djNumber>
          <djSequence>1</djSequence>
       </id>
       <payeeAddrLine1>c/o Kevin Martinez, Attorney at Law</payeeAddrLine1>
    </contents>
    <contents>
       <eftAcctType>C</eftAcctType>
       <id>
          <djNumber>201-16-38561</djNumber>
          <djSequence>1</djSequence>
       </id>
       <payeeAddrLine1>1360 South Highway 191</payeeAddrLine1>
    </contents>
    <status>0</status>
 </return>

サービス呼び出しを行うためのAngularJSの「適切な」方法は何ですか？私がそれを行った方法が大丈夫だと仮定して、最良の方法を教えていない場合は、結果として、どのようにXML応答のデータをループしますかそれを解析してAngularモデルオブジェクト？最終的にこのデータをDataGridで使用したいと思います。

どんな助けも大歓迎です。

javascriptajaxjqueryangularjs
19
anad2312

2年遅れですが、Angular GitHub上のWebサービスを使用するためのモジュールSOAP.

https://github.com/andrewmcgivery/angular-soap

使用方法に関するブログ投稿は次のとおりです。 http://mcgivery.com/soap-web-services-angular-ionic/

要するに、次のようなことができます。

angular.module('myApp', ['angularSoap'])

.factory("testService", ['$soap',function($soap){
    var base_url = "http://www.cooldomain.com/SoapTest/webservicedemo.asmx";

    return {
        HelloWorld: function(){
            return $soap.post(base_url,"HelloWorld");
        }
    }
}])

.controller('MainCtrl', function($scope, testService) {

  testService.HelloWorld().then(function(response){
    $scope.response = response;
  });

})
19
Andrew McGivery

最善の方法は、それを $ httpインターセプター として実装することだと思います。私たちのプロジェクトでそれをしましたが、angular $ http呼び出しは同じままなので、うまくいきました。

これは、プロジェクト用に作成したプロバイダーへのリンクです。 http://jsfiddle.net/gqp9m/
soapclientライブラリーからコピーアンドペーストを行い、プロバイダーに移動しました。コードがjsHintを渡すように、構文も少し変更しました。変更された機能のほとんどは、ドキュメントノートでコメントされています。また、jQueryが必要です（$ .parseXML関数用-jQueryの依存関係を削除するためにリファクタリングできます）。

最大の違いは、私のコードは最初のリクエストでwsdlをロードせず、呼び出しを行う前にキャッシュする必要があることです。

myModule.service(['myModule.soap-interceptor', function(soap){
    $http.get('http://www.myveryfakedomain.com/CRMAPIWS74?wsdl', 
    { isJSON: true }).then(function(result){
        soap.setWSDL('http:/www.myveryfakedomain.com/CRMAPIWS74', result.data);
    });
}]);

soapは、挿入されたsoap-interceptorインスタンスです。 wsdlを呼び出してから、soap.setWSDLを呼び出して、ベースURLと解決されたwsdlを渡します。また、$ http呼び出しに渡されるisJSON引数にも注意してください。これは、デフォルトで私のコードがすべての呼び出しをSOAPリクエストとして処理するためです。インターセプターが行うことです。isJSON：true神が意図した$ http;）

setWSDLを呼び出した後、いつものように$ httpを呼び出すだけです：

$http.get('http:/www.myveryfakedomain.com/CRMAPIWS74/action').then(function(result){
    // do something...
});

このコードはプロジェクト用に作成されたものであり、サポートされているオープンソースプロジェクトなどではないことに注意してください。それを使用する前に、ある程度のメンテナンスまたはリファクタリングが必要になる場合がありますが、良いスタートです。

8
Yair Tavor

SOAP wsdlライブラリなしでこれを実現できます。 wsdlをSOAP UIにインポートして、エンベロープをコピーします。以下は、AngularJSのSOAP Webサービスの処理方法の例です。

サービス：

app.service('service', function($http) {
this.soapService = function(_anydata) {
    var _url = 'soap_service_endpoint_url';
    var soapRequest = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:jn=""><soapenv:Header/><soapenv:Body><=== xxx ===></soapenv:Body></soapenv:Envelope>';
    var soapAction = '<=== soap action ===>';
    var headers = {
        'SOAPAction': soapAction,
        'Content-Type': 'text/xml; charset=utf-8'
    };
    return $http.post(_url, soapRequest, {
        "headers": headers
    });
}
});

サービスを呼び出して、XML出力を処理します。必要な属性をキャプチャできます。

service.soapService(data).then(function success(response) {
var _dataArr = [];
$(response.data).find('Transaction').each(function() {
    _dataArr.Push({
        name: $(this).find('<=== your attributes ===>').text()
    });
});
return _dataArr;
}, function error(response) {
console.log('<==== soap error: ' + response);
return response;
});
0
Raj Malakpet