it-swarm.com.de

AngularJS - SOAP Service-Integration mit dem AngularJS-Modell

Ich bin ein erfahrener Flex-Entwickler, der AngularJS lernt. Das ist so verwirrend !!! 

Ich versuche jedoch, über eine WSDL-Anforderung SOAP einen Service-Aufruf an meinen Backend-Server (in derselben Domäne) auszuführen und die Daten mit einem AngularJS-Modellobjekt zu füllen. Ich habe Ajax ausprobiert, hatte aber Probleme mit der Rückgabe der tatsächlichen Daten. Ich denke, mit der Art, wie ich das SOAP -Tag erstellt habe, stimmt etwas nicht. Ich erhielt eine erfolgreiche Antwort, aber keine Daten. 

Nachdem ich die Ajax-Methode nicht herausfinden konnte, stieß ich auf soapclient.js und fand es extrem einfach, mit weniger Code als Ajax. soapclient.js erledigt die meiste Arbeit für Sie, ähnlich wie die Ajax-Methode, die wesentlich weniger Code erzeugt. Außerdem kann ich mithilfe von soapclient.js den SOAP - Aufruf ausführen und auch die XML-formatierte Antwort zurückholen.

http://javascriptsoapclient.codeplex.com

Mein Problem ist, dass ich versuche, AngularJS zu verwenden, um die XML-Antwort in ein AnularJS-Modellobjekt zu kopieren. Ich bin mir nicht sicher, wie ich das AngularJS-Projekt für das, was ich mache, einrichten möchte, aber ich würde wirklich gerne die beste Methode kennen, um das, was ich arbeite, entkoppelt zu halten. Ich habe Google wie verrückt gesucht, aber die meisten Beispiele scheinen für einen Anfänger zu kompliziert zu sein.

Folgendes habe ich:

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

Nun gibt der SOAP -Dienst die Daten folgendermaßen zurück:

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

Was ist der "richtige" Weg in AngularJS, um den Dienst anzurufen, vorausgesetzt, es ist in Ordnung, wenn Sie mir nicht den besten Weg mitteilen, und dann im Ergebnis, wie kann ich die Daten in der XML-Antwort durchlaufen und in ein Angular-Modellobjekt parsen? Ich möchte diese Daten schließlich in einem DataGrid verwenden.

Jede Hilfe wird sehr geschätzt.

19
anad2312

Zwei Jahre später, aber ich habe ein Angular-Modul speziell für die Arbeit mit SOAP - Webdiensten entwickelt, das sich auf GitHub befindet.

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

Hier ist ein Blogbeitrag über die Verwendung: http://mcgivery.com/soap-web-services-angular-ionic/

Um es kurz zu machen, können Sie so etwas tun:

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

Ich denke, der beste Weg wäre, es als $ http Interceptor zu implementieren. Ich habe es in unserem Projekt gemacht und es hat super funktioniert, weil die eckigen $ http-Aufrufe gleich bleiben.

Dies ist ein Link zu dem Anbieter, den ich für unser Projekt erstellt habe: http://jsfiddle.net/gqp9m/
Ich habe einige Copy-Paste aus der soapclient-Bibliothek erstellt und in einen Anbieter verschoben. Ich habe auch ein bisschen von der Syntax geändert, so dass der Code jsHint übergeben wird. Die meisten der geänderten Funktionen sind mit Dokumentationshinweisen kommentiert. Es erfordert auch jQuery (für die $ .parseXML-Funktion - Sie können sie umgestalten, um die Abhängigkeit in jQuery zu entfernen).

Der größte Unterschied besteht darin, dass mein Code die Wsdl-Datei nicht bei der ersten Anforderung lädt, sondern dass Sie ihn zwischenspeichern müssen, bevor Sie einen Anruf tätigen.

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 ist die injizierte soap-interceptor -Instanz. Sie rufen die wsdl auf und rufen dann soap.setWSDL auf, übergeben dabei die Basis-URL und die aufgelöste wsdl. Beachten Sie auch das Argument isJSON, das an den Aufruf von $ http übergeben wird. Dies ist dort, weil mein Code standardmäßig jeden Aufruf als SOAP -Anforderung behandelt. Das ist was Interzeptoren tun. isJSON: Mit true können Sie $ http als beabsichtigten Zweck verwenden;)

Nach dem Aufruf von setWSDL rufen Sie einfach $ http auf, wie Sie es immer tun:

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

Bitte denken Sie daran, dass dieser Code für unser Projekt geschrieben wurde und es sich nicht um ein unterstütztes Open-Source-Projekt handelt. Es kann ein gewisses Maß an Wartung oder Umgestaltung erforderlich sein, bevor Sie es verwenden können, aber es ist ein guter Anfang.

8
Yair Tavor

Sie können dies ohne SOAP wsdl-Bibliotheken erreichen. Importieren Sie Ihre WSDL-Datei in die SOAP - Benutzeroberfläche und kopieren Sie den Umschlag. Unten ist das Beispiel in AngularJS, wie der Webdienst SOAP gehandhabt wird. 

Bedienung:

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

rufen Sie den Dienst auf und behandeln Sie die XML-Ausgabe. Sie können die gewünschten Attribute erfassen:

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