AngularJS - SOAP服务集成随着AngularJS型号 [英] AngularJS - SOAP Service Integration With AngularJS Model
问题描述
我是一个经验丰富的Flex开发人员正在学习AngularJS。这是如此混乱！
I am a seasoned Flex Developer that is learning AngularJS. This is so confusing!!!
无论如何，我试图让一个服务调用我的后端通过SOAP WSDL请求的服务器（同一个域），并与AngularJS模型对象填充数据。我试图阿贾克斯，但在和获取的实际数据传回的一些问题。我觉得有什么不对，我创建了SOAP标签的方式。我得到一个成功的响应返回，但没有数据。
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.
在未能找出阿贾克斯方法，我碰到soapclient.js，并发现它是非常容易的，用量少，code比阿贾克斯。 soapclient.js做最适合你的工作，类似的Ajax方法，这使得少得多code的。此外，使用soapclient.js我能够使SOAP调用，也找回数据的XML格式的响应。
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.
HTTP：//javascriptsoapclient.$c$cplex.com
我的问题是，我想使用AngularJS转储XML响应到AnularJS模型对象。我不知道如何设置AngularJS项目，我在做什么，但我真的想知道最好的方法，以保持我的工作脱钩什么。我一直在寻找谷歌像疯了似的，但大多数例子似乎过于复杂的初学者。
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.
下面是我：
<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>
现在，SOAP服务返回的数据是这样的：
Now, the SOAP service returns the data like this:
<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>
什么是AngularJS正确的方式，使服务调用，假设我做的是确定的，如果不是让我知道最好的方法，然后在结果的方式，如何通过数据做我环XML响应，并解析成一个角模型对象？我最终想用这个数据在DataGrid中。
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.
任何帮助将大大AP preciated。
Any help will be much appreciated.
推荐答案
我想最好的办法是实现它作为一个的 $ HTTP拦截。我做到了，在我们的项目和它的工作太棒了，因为角$ HTTP调用保持不变。
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://jsfiddle.net/gqp9m/
我做了一些复制粘贴的SoapClient的图书馆和移动到一个供应商。我也改变了一下语法因此code将通过jsHint。大部分的修饰功能的标记有文档记录。它还要求的jQuery（为$ .parseXML功能 - 你可以重构它删除依赖jQuery的）。
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).
最大的区别是，我的code不加载第一次请求的WSDL，而是需要你做任何呼叫，像这样之前缓存它：
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 :
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);
});
}]);
肥皂的是注射的肥皂拦截的实例。你叫的WSDL，然后调用的 soap.setWSDL 的传递给它的基本URL和解决WSDL。还要注意传递给$ HTTP调用的 isJSON 的说法。这是因为有默认情况下，我的code对待每个呼叫作为SOAP请求。这就是拦截器做的。 isJSON：真正的的将允许您使用$ HTTP作为上帝希望;）
soap is the injected soap-interceptor instance. You call the wsdl and then call soap.setWSDL passing it the base url and the resolved wsdl. Also note the isJSON argument 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:true will allow you to use $http as god intended ;)
调用后的 setWSDL 的只需要调用$ HTTP就像你总是这样：
After calling setWSDL just call $http like you always do:
$http.get('http:/www.myveryfakedomain.com/CRMAPIWS74/action').then(function(result){
// do something...
});
请记住，这code是为我们的项目写的，它不是一个支持的开源项目什么的。它可能需要维护或重构之前，你可以用它一定水平，但它是一个良好的开端。
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.
这篇关于AngularJS - SOAP服务集成随着AngularJS型号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
