AngularJS - Интеграция сервисов SOAP с моделью AngularJS

Я опытный разработчик Flex, который изучает AngularJS. Это так запутанно!!!

В любом случае, я пытаюсь сделать вызов службы на моем сервере (на том же домене) с помощью запроса 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 для вызова службы, предполагая, что я сделал это нормально, если не дать мне знать наилучший способ, а затем в результате, как я прокручиваю данные в ответ XML и проанализировать его в объект модели Angular? В конечном итоге я хочу использовать эти данные в DataGrid.

Любая помощь будет очень оценена.

Ответы

Ответ 1

Два года спустя, но я создал модуль Angular специально для работы с веб-службами SOAP, находящимися в GitHub.

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

})

Ответ 2

Я думаю, лучший способ - реализовать его как $http interceptor. Я сделал это в нашем проекте, и он отлично поработал, потому что angular $http calls остались прежними.

Это ссылка на провайдера, созданного мной для нашего проекта: 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);
    });
}]);

мыло представляет собой инъецируемый мыльный перехватчик. Вы вызываете wsdl, а затем вызываете soap.setWSDL, передавая ему базовый url и разрешенный wsdl. Также обратите внимание на аргумент isJSON, переданный на вызов $http. Это происходит потому, что по умолчанию мой код обрабатывает каждый вызов как запрос SOAP. Что делают перехватчики. isJSON: true позволит вам использовать $http как предназначенный бог;)

После вызова setWSDL просто вызовите $http, как вы всегда:

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

Помните, что этот код был написан для нашего проекта, и это не поддерживаемый проект с открытым исходным кодом или что-то в этом роде. Возможно, вам понадобится некоторый уровень обслуживания или рефакторинга, прежде чем вы сможете его использовать, но это хороший старт.