How to consume a WebService SOAP with AngularJS?

Question

How to consume a WebService SOAP with AngularJS?

Navigation

#1 by (3 votes)

6

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

I discovered the possibility of deleting this PHP bridge, consuming directly the WebService SOAP, using angular-soap .

But when playing the example, I can not return any information .. nor an 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 requesting, it sends 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>

In the browser tools in network > Response it returns my own wsdl described above ..

Is it necessary / need to modify something on the server?

Thank you

angularjs web-service soap

asked by anonymous 25.11.2015 / 19:54

1 answer

What is the difference between the concept of static and dynamic typing and the concept of strongly and weakly typed? [duplicate] What is the "behavior" attribute in CSS?

score 3 · Accepted Answer

'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 did not use the angular-soap, I just used $ http and I put my own envelope, to mount the envelope string I installed the software link and when the request was correct I copied the envelope that he set up and made mine, in my case the backend was Java, I had to enable "CORS", otherwise the neem request would get there!

and everything would have been better! experience!