2013-07-05 18 views
18

Jestem doświadczonym programistą Flex, uczącym się AngularJS. To jest takie mylące !!!AngularJS - Integracja usług SOAP z AngularJS Model

W każdym razie próbuję wykonać wywołanie usługi do mojego serwera zaplecza (na tej samej domenie) za pomocą żądania WSDL SOAP i zapełnić dane obiektem modelu AngularJS. Próbowałem Ajax, ale miałem problemy z odzyskaniem rzeczywistych danych. Myślę, że coś jest nie tak ze sposobem, w jaki utworzyłem tag SOAP. Otrzymałem pomyślną odpowiedź, ale brak danych.

Po nie jest w stanie zorientować się w sposób Ajax, natknąłem soapclient.js i okazał się być bardzo łatwe, z mniej kodu niż Ajax. soapclient.js wykonuje większość pracy za ciebie, podobnie jak w przypadku metody Ajax, która sprawia, że ​​jest znacznie mniej kodu. Dodatkowo, używając soapclient.js, jestem w stanie wykonać wywołanie SOAP, a także odzyskać dane w formacie XML.

http://javascriptsoapclient.codeplex.com

Mój problem jest to, że staram się używać angularjs zrzucić odpowiedź XML do modelu obiektowego AnularJS. Nie jestem pewien, jak skonfigurować projekt AngularJS do tego, co robię, ale naprawdę chciałbym poznać najlepszą metodę, aby zachować to, nad czym pracuję. Szukałem Google'a jak szalonego, ale większość przykładów wydaje się zbyt skomplikowana dla początkujących.

Oto co mam:

<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> 

Teraz usługa SOAP zwraca dane jak poniżej:

<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> 

Co to jest "właściwy" sposób w angularjs dokonać zgłoszenia serwisowego, zakładając, że zrobiłem to jest ok, jeśli nie daj mi znać najlepszy sposób, a następnie w wyniku, w jaki sposób pętli danych w odpowiedzi XML i parsować go do obiektu modelu kątowego? W końcu chcę użyć tych danych w DataGrid.

Każda pomoc będzie doceniana.

Odpowiedz

8

Chyba najlepszym sposobem byłoby wdrożyć go jako $http interceptor. Zrobiłem to w naszym projekcie i działało świetnie, ponieważ kątowe połączenia HTTP nie zmieniły się.

To jest link do dostawcy utworzonego dla naszego projektu: http://jsfiddle.net/gqp9m/
zrobiłem jakieś kopiuj-wklej z soapclient biblioteki i przeniósł go do dostawcy. Zmieniłem też nieco składnię, aby kod mógł przejść przez jsHint. Większość zmodyfikowanej funkcji jest komentowana za pomocą uwag do dokumentacji. Wymaga również jQuery (dla funkcji $ .parseXML - możesz ją zmodyfi- kować, aby usunąć zależność w jQuery).

Największą różnicą jest to, że mój kod nie załadować WSDL na pierwsze żądanie, ale potrzebuje do pamięci podręcznej przed dokonaniem połączenia, tak jak poniżej:

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

mydła jest wstrzykiwany mydło -interceptor wystąpienie. Wywołujesz wsdl, a następnie wywołujesz soap.setWSDL przekazując mu podstawowy adres URL i rozwiązany wsdl. Zauważ także, że argument isJSON przekazany do wywołania $ http. Jest tak, ponieważ domyślnie mój kod traktuje każde połączenie jako żądanie SOAP. Tak robią przechwyty.isJSON: true pozwoli Ci używać $ http jak Bóg chciał;)

Po wywołaniu setWSDL zadzwoń $ http jak zawsze:

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

Należy pamiętać, że kod ten został napisany dla nasz projekt i nie jest to wspierany projekt typu open source lub coś takiego. Może to wymagać pewnego poziomu konserwacji lub refaktoryzacji, zanim będzie można go użyć, ale to dobry początek.

+0

Dzięki za to. Było trudne, ale dostałem wsdl z serwera mydła. Jak uruchomić w nim polecenie getPrice()? ' < wsdl: nazwa części = "return" type = "xsd: float" /> ' –

+0

Nie jestem ekspertem SOAP, javascript jest bardziej moją sprawą, ale zazwyczaj wywołujesz akcje SOAP, odnosząc się do adresu URL usługi SOAP i dodanie akcji na końcu - na przykład: http // www.fakedomain.com/api/getPriceRequest Możesz to zrobić za pomocą testu POST i wysłać komunikat opisany w dokumencie WSDL w treści żądania. –

+0

Dzięki. W jaki sposób przekazujesz dane za pomocą wywołania SOAP? – anad2312

18

Dwa lata za późno, ale zbudowałem moduł Angular specjalnie do pracy z usługami sieciowymi SOAP, które są na GitHub.

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

Oto blogu na jak go używać: http://mcgivery.com/soap-web-services-angular-ionic/

Krótko mówiąc, pozwala zrobić coś takiego:

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

}) 
+0

Czy to działa z serwerem mydła w tym [pytanie] (http://stackoverflow.com/questions/24516280/where-is-the-correct-place-to-enable-cors)? – rapvelopment

+0

To działa pięknie. Dzięki – TheEYL

+0

@Andrew Otrzymuję błąd w tej linii angular.module ('myApp', ['angularSoap']) Błąd: Uncaught ReferenceError: kątowa nie jest zdefiniowana –