19

私は AngularJS を学んでいるベテランの Flex 開発者です。これはとても紛らわしいです!!!

とにかく、SOAP WSDL リクエストを介してバックエンド (同じドメイン) サーバーにサービス呼び出しを行い、データに AngularJS モデル オブジェクトを入力しようとしています。私は Ajax を試していましたが、実際のデータを取り戻す際にいくつか問題がありました。SOAP タグの作成方法に問題があると思います。正常な応答が返されましたが、データがありません。

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

http://javascriptsoapclient.codeplex.com

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

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

<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 でサービス呼び出しを行うための「適切な」方法は何ですか?それをAngularモデルオブジェクトに解析しますか? 最終的には、このデータを DataGrid で使用したいと考えています。

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

4

3 に答える 3

19

2 年遅れましたが、GitHub にある SOAP Web サービスを操作するための Angular モジュールを構築しました。

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

})
于 2015-03-31T14:34:29.937 に答える
8

$http インターセプターとして実装するのが最善の方法だと思います。私たちのプロジェクトでそれを行いましたが、角度のある $http 呼び出しが同じままであるため、うまく機能しました。

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

最大の違いは、私のコードが最初の要求で wsdl をロードしないことですが、次のように、呼び出しを行う前に 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 インターセプターインスタンスです。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...
});

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

于 2014-01-08T06:49:40.370 に答える