jQuery AngularJS - SOAP 服务与 AngularJS 模型的集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17490483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - SOAP Service Integration With AngularJS Model
提问by anad2312
I am a seasoned Flex Developer that is learning AngularJS. This is so confusing!!!
我是一名经验丰富的 Flex 开发人员，正在学习 AngularJS。这太混乱了！！！
Anyway, I am trying to make a service call to my backend (on the same domain) server via a SOAP WSDL Request, and populate the data with an AngularJS model object. I was trying Ajax but was having some issues with getting the actual data back. I think there is something wrong with the way I created the SOAP tag. I was getting a successful response back, but no data.
无论如何，我正在尝试通过 SOAP WSDL 请求对我的后端（在同一域上）服务器进行服务调用，并使用 AngularJS 模型对象填充数据。我正在尝试 Ajax，但在获取实际数据时遇到了一些问题。我认为我创建 SOAP 标记的方式有问题。我得到了成功的回复，但没有数据。
After not being able to figure out the Ajax method, I came across soapclient.js and found it to be extremely easy, with less code than Ajax. soapclient.js does most of the work for you, similar to the Ajax method, which makes much less code. Additionally, using soapclient.js I am able to make the SOAP call and also get data back the XML formatted response.
在搞不懂Ajax的方法之后，我遇到了soapclient.js，发现它非常简单，代码比Ajax少。soapclient.js 为您完成大部分工作，类似于 Ajax 方法，代码量少得多。此外，使用soapclient.js，我可以进行SOAP 调用，还可以将数据取回XML 格式的响应。
http://javascriptsoapclient.codeplex.com
http://javascriptsoapclient.codeplex.com
My issue is that I am trying to use AngularJS to dump the XML response into an AnularJS model object. I am not sure how to setup the AngularJS project for what I am doing, but I would really like to know the best method in order to keep what I am working on decoupled. I have been searching Google like crazy, but most examples seem overly complicated for a beginner.
我的问题是我正在尝试使用 AngularJS 将 XML 响应转储到 AnularJS 模型对象中。我不确定如何为我正在做的事情设置 AngularJS 项目，但我真的很想知道最好的方法，以保持我正在处理的工作分离。我一直在疯狂地搜索 Google，但是对于初学者来说，大多数示例似乎过于复杂。
Here is what I have:
这是我所拥有的：
<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>
Now, the SOAP service returns the data like this:
现在，SOAP 服务返回这样的数据：
<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>
What is the "proper" way in AngularJS to make the service call, assuming the way I did it is ok, if not let me know the best way, and then in the result, how do I loop through the data in the XML response and parse it into an Angular model object? I eventually want to use this data in a DataGrid.
在 AngularJS 中进行服务调用的“正确”方式是什么，假设我这样做的方式没问题，如果没有让我知道最好的方式，然后在结果中，我如何遍历 XML 响应中的数据并将其解析为 Angular 模型对象？我最终想在 DataGrid 中使用这些数据。
Any help will be much appreciated.
任何帮助都感激不尽。
回答by Andrew McGivery
Two years late, but I have built a Angular module specifically for working with SOAP web services that is on GitHub.
晚了两年，但我已经构建了一个 Angular 模块，专门用于处理 GitHub 上的 SOAP Web 服务。
https://github.com/andrewmcgivery/angular-soap
https://github.com/andrewmcgivery/angular-soap
Here is a blog post on how to use it: http://mcgivery.com/soap-web-services-angular-ionic/
这是一篇关于如何使用它的博客文章：http: //mcgivery.com/soap-web-services-angular-ionic/
Long story short, it allows you to do something like this:
长话短说，它允许你做这样的事情：
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;
});
})
回答by Yair Tavor
I guess the best way would be to implement it as a $http interceptor. I did it in our project and it worked great because the angular $http calls stay the same.
我想最好的方法是将它实现为$http 拦截器。我在我们的项目中做到了，而且效果很好，因为有角度的 $http 调用保持不变。
This is a link to the provider I created for our project : http://jsfiddle.net/gqp9m/
I did some copy-paste from the soapclient library and moved it into a provider. I also changed a bit of the syntax so the code will pass jsHint. Most of the modified function are commented with documentation notes. It also requires jQuery (for the $.parseXML function - you can refactor it to remove dependency in jQuery).
这是我为我们的项目创建的提供程序的链接：http: //jsfiddle.net/gqp9m/
我从soapclient 库中进行了一些复制粘贴并将其移动到提供程序中。我还更改了一些语法，因此代码将通过 jsHint。大多数修改后的函数都带有文档注释。它还需要 jQuery（对于 $.parseXML 函数 - 您可以重构它以删除 jQuery 中的依赖项）。
The biggest difference is that my code does not load the wsdl on first request, but rather needs you to cache it before making any call, like so :
最大的区别是我的代码不会在第一次请求时加载 wsdl，而是需要您在进行任何调用之前对其进行缓存，如下所示：
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);
});
}]);
soapis the injected soap-interceptorinstance. You call the wsdl and then call soap.setWSDLpassing it the base url and the resolved wsdl. Also note the isJSONargument passed to the $http call. This is there because by default my code treats every call as a SOAP request. That's what interceptors do. isJSON:truewill allow you to use $http as god intended ;)
肥皂是注入的肥皂拦截器实例。您调用 wsdl，然后调用soap.setWSDL将基本 url 和解析的 wsdl 传递给它。还要注意传递给 $http 调用的isJSON参数。这是因为默认情况下我的代码将每个调用视为 SOAP 请求。这就是拦截器的作用。isJSON:true将允许您按照上帝的意愿使用 $http ;)
After calling setWSDLjust call $http like you always do:
调用setWSDL 后，只需像往常一样调用 $http：
$http.get('http:/www.myveryfakedomain.com/CRMAPIWS74/action').then(function(result){
// do something...
});
Please remember that this code was written for our project and it's not a supported open source project or something. It may need of some level of maintenance or refactoring before you can use it, but it's a good start.
请记住，这段代码是为我们的项目编写的，它不是一个受支持的开源项目或其他东西。在您使用它之前，它可能需要某种程度的维护或重构，但这是一个好的开始。
回答by Raj Malakpet
You can achieve this without any SOAP wsdl libraries. import your wsdl into SOAP UI and copy the envelope. below is the example in AngularJS how to handle SOAP Web Service.
您可以在没有任何 SOAP wsdl 库的情况下实现这一点。将您的 wsdl 导入 SOAP UI 并复制信封。下面是 AngularJS 中如何处理 SOAP Web 服务的示例。
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
});
}
});
call the service and handle the XML output. you can capture the attributes you want:
调用服务并处理 XML 输出。您可以捕获所需的属性：
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;
});
