How to consume a SOAP Webservice with Angularjs?

Asked

Viewed 3,999 times

6

Well, I have a SOAP Webservice that is consumed normally by a PHP client, working perfectly... by ajax this php consumption and populate my template..

My current application makes the following process Angular <-> PHP <-> service.wsdl

discovered the possibility of deleting this PHP bridge by directly consuming the Webservice SOAP, using angular-Soap.

But when playing the example, I cannot return any information.. nor error.

index.html

<html ng-app="myApp">
    <head>
        <script src="public/js/angular.js"></script>
        <script src="public/js/soapclient.js"></script>
        <script src="public/js/angular.soap.js"></script>

        <script>
            angular.module('myApp', ['angularSoap'])

            .factory("testService", ['$soap',function($soap){
                var base_url = "http://localhost/api/1/service.wsdl";

                return {
                    getEmpresa: function(){
                        var x =  $soap.post(base_url,"getEmpresas");
                        return x;
                    }
                }
            }])

            .controller('MainCtrl', function($scope, testService) {

              testService.getEmpresa().then(function(response){
                $scope.response = response;
              });

            })
        </script>

    </head>
    <body ng-controller="MainCtrl">
        {{response}}
    </body>
</html>

service wsdl

<!--  WSDL file generated by Zend Studio.  -->
<definitions xmlns:typens="urn:Service" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/" xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/" xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns="http://schemas.xmlsoap.org/wsdl/" name="Service" targetNamespace="urn:Service">
    <message name="getEmpresas">
        <part name="getEmpresas" type="xsd:string"/>
    </message>
    <message name="getEmpresasResponse">
        <part name="getEmpresasReturn" type="xsd:string"/>
    </message>
    <portType name="HomePortType">
        <operation name="getEmpresas">
            <input message="typens:getEmpresas"/>
            <output message="typens:getEmpresasResponse"/>
        </operation>
    </portType>
    <binding name="HomeBinding" type="typens:HomePortType">
        <soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/>
        <operation name="getEmpresas">
            <soap:operation soapAction="urn:HomeAction"/>
            <input>
                <soap:body namespace="urn:Service" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
            </input>
            <output>
                <soap:body namespace="urn:Service" use="encoded" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
            </output>
        </operation>
    </binding>
    <service name="ServiceService">
        <port name="HomePort" binding="typens:HomeBinding">
            <soap:address location="http://localhost/app/homeCrtl.php"/>
        </port>
    </service>
</definitions>

When he makes the requisition he sends a envelope via Request Payload.

<?xml version="1.0" encoding="utf-8"?>
    <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
       <soap:Body>
          <getEmpresas xmlns="urn:Service"></getEmpresas>
       </soap:Body>
    </soap:Envelope>

browser tools in network > Response he returns my own wsdl described above..

it is necessary/necessary to modify something on the server?

thank you

angularjs web-service soap

  • In browser developer tools, what is displayed about the SOAP request in the network tab? And in the console?

  • @Viníciusgobboa.deOliveira in the request he returns my wdsl and sends an envelope <?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><getEmpresas xmlns="urn:Service"></getEmpresas></soap:Body></soap:Envelope>

  • And what was the response received? See it also in the browser development tools. Please put it to the question, to facilitate ligibility.

1 answer

3


'use strict';

angular.module('myApp').service('Soap', ['$q', '$http',
    function($q, $http) {
         this.execute = function(metodo, params) {
            var envelope = '';
            var deferred = $q.defer();
            if (params) {
                envelope = '<ns1:'+metodo+'>'+
                                '<arg0>'+ JSON.stringify(params) +'</arg0>'+
                            '</ns1:'+metodo+'>';
            } else {
                envelope = '<ns1:'+metodo+'></ns1:'+metodo+'>';
            }
            $http({
                'url': 'http://localhost/api/1/service.wsdl',
                'method': 'POST', 
                'data': '<?xml version="1.0" encoding="UTF-8"?>'+
                    '<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ns1="http://connect.webservice.business.com.br/">'+
                        '<SOAP-ENV:Body>'+ envelope + '</SOAP-ENV:Body>'+
                    '</SOAP-ENV:Envelope>'
            })
            .then(function(response) {
                var result = response.data.substring(response.data.indexOf("<return>") + 8, response.data.indexOf("</return>"));
                // console.log(result);
                deferred.resolve(JSON.parse(result));
            }, function(response) {
                deferred.reject(response);
            }).catch(function(fallback) {
                console.log(fallback);
            });
            return deferred;
        };
    }
]).controller('MainCtrl', function($scope, Soap) {

    Soap.execute('getEmpresa').then(function(response){
        $scope.response = response;
    });
});

Next, I didn’t use angular-Soap, I only used $http and I built my own envelope, to mount the envelope string I installed the software https://www.soapui.org/ and when the request was correct I copied the envelope q he mounted and drafted mine, in my case the back-end was Java, I had to enable "CORS", if not the request neem would arrive there!

Note: Next try using SOAP only for small things because that ehh a gambiarra, use SOAP and Angularjs, like use only if you have no other option, more always q possible open a router on the Soap side with a beautiful Rest and everything will be better! own experience!

  • Thank you, it is, I had to change the structure of the webservice.. but it was worth the tip d+

Browser other questions tagged angularjs web-service soap

You are not signed in. Login or sign up in order to post.