web-dev-qa-db-fra.com

AngularJS - SOAP Intégration de service avec le modèle AngularJS

Je suis un développeur Flex expérimenté qui apprend AngularJS. C'est tellement déroutant !!! 

Quoi qu'il en soit, j'essaie de faire un appel de service à mon serveur principal (sur le même domaine) via une demande WSDL SOAP et de renseigner les données avec un objet de modèle AngularJS. J'essayais Ajax mais j'avais des problèmes pour récupérer les données réelles. Je pense qu'il y a quelque chose qui cloche dans la façon dont j'ai créé la balise SOAP. Je recevais une réponse réussie, mais pas de données. 

Après ne pas être capable de comprendre la méthode Ajax, je suis tombé sur soapclient.js et je l’ai trouvé extrêmement facile, avec moins de code que Ajax. soapclient.js effectue la plupart du travail à votre place, à l’instar de la méthode Ajax, qui produit beaucoup moins de code. De plus, en utilisant soapclient.js, je peux passer un appel SOAP et récupérer des données avec la réponse au format XML.

http://javascriptsoapclient.codeplex.com

Mon problème est que j'essaie d'utiliser AngularJS pour vider la réponse XML dans un objet de modèle AnularJS. Je ne suis pas sûr de savoir comment configurer le projet AngularJS pour ce que je fais, mais j'aimerais vraiment connaître la meilleure méthode pour que mes travaux restent découplés. J'ai cherché Google comme un fou, mais la plupart des exemples semblent trop compliqués pour un débutant.

Voici ce que j'ai

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

Maintenant, le service SOAP renvoie les données comme ceci:

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

Quelle est la "bonne" façon dans AngularJS de passer un appel de service, en supposant que je l’ai fait est ok, sinon laissez-moi savoir le meilleur moyen, puis dans le résultat, comment puis-je parcourir les données dans la réponse XML et analyser dans un objet modèle angulaire? Je veux éventuellement utiliser ces données dans un DataGrid.

Toute aide sera très appréciée.

javascriptajaxjqueryangularjs
19
anad2312

Deux ans de retard, mais j'ai construit un module angulaire spécialement conçu pour travailler avec les services Web SOAP et disponible sur GitHub.

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

Voici un article de blog sur son utilisation: http://mcgivery.com/soap-web-services-angular-ionic/

Bref, ça vous permet de faire quelque chose comme ça:

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

Je suppose que le meilleur moyen serait de l’implémenter en tant qu’intercepteur $ http . Je l'ai fait dans notre projet et cela a très bien fonctionné car les appels angulaires $ http restent les mêmes.

Ceci est un lien vers le fournisseur que j'ai créé pour notre projet: http://jsfiddle.net/gqp9m/
J'ai fait du copier-coller à partir de la bibliothèque de soapclient et l'ai déplacée dans un fournisseur. J'ai aussi changé un peu de syntaxe pour que le code passe jsHint. La plupart des fonctions modifiées sont commentées avec des notes de documentation. Il nécessite également jQuery (pour la fonction $ .parseXML - vous pouvez le refactoriser pour supprimer la dépendance dans jQuery).

La plus grande différence est que mon code ne charge pas le fichier wsdl à la première demande, mais nécessite plutôt que vous le mettiez en cache avant de passer un appel, comme ceci:

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 est l'instance soap-interceptor injectée. Vous appelez le wsdl puis appelez soap.setWSDL en lui transmettant l’URL de base et le wsdl résolu. Notez également l'argument isJSON transmis à l'appel $ http. Ceci est là car, par défaut, mon code traite chaque appel comme une requête SOAP. C'est ce que font les intercepteurs. isJSON: true vous permettra d'utiliser $ http comme il se doit;)

Après avoir appelé setWSDL, appelez simplement $ http comme vous le faites toujours:

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

N'oubliez pas que ce code a été écrit pour notre projet et qu'il ne s'agit pas d'un projet open source pris en charge ni de quelque chose. Il peut nécessiter un certain niveau de maintenance ou de refactorisation avant de pouvoir l'utiliser, mais c'est un bon début.

8
Yair Tavor

Vous pouvez y parvenir sans aucune bibliothèque wsdl SOAP. importez votre wsdl dans l'interface utilisateur SOAP et copiez l'enveloppe. Voici l'exemple dans AngularJS comment gérer le service Web SOAP. 

Un service:

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

appeler le service et gérer la sortie XML. vous pouvez capturer les attributs que vous voulez:

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