0

我对 angularJS 和 REST 请求/响应有一些问题。自从三周以来我一直在玩 AngularJS，现在我想做一些很酷的事情。首先，我创建了一个简单的jersey REST 服务，它返回一个简单的列表。

@Path("/hello")
public class Hello {


  @GET
  @Produces(MediaType.APPLICATION_JSON)
  public List<Medication> sayJsonHello() {
      List<Object1> objs = new ArrayList<Object1>();

      objs.add(new Object1("1", "HUHU"));
      objs.add(new Object1("2", "HUHU 2"));

      return objs;
  }
}

如您所见，没有什么大魔法。这是我的 web.xml 文件，用于配置 Jersey：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
     xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
     id="WebApp_ID" version="2.5">
<display-name>Jersey REST Example</display-name>
<servlet>
    <servlet-name>Jersey REST Service</servlet-name>
    <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
    <init-param>
        <param-name>com.sun.jersey.config.property.packages</param-name>
        <param-value>examples</param-value>
    </init-param>

    <init-param>
        <param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
        <param-value>true</param-value>
    </init-param>

    <init-param>
        <param-name>com.sun.jersey.config.feature.DisableWADL</param-name>
        <param-value>true</param-value>
    </init-param>

    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Jersey REST Service</servlet-name>
    <url-pattern>/rest/*</url-pattern>
</servlet-mapping>

经过一些测试，该服务将返回一个简单的 JSON 列表：

[
{
  "id": "1",
  "name": "HUHU"
},
{
  "id": "2",
  "name": "HUHU 2"
}
]

我将 web 服务部署到 Tomcat7 实例中。现在我想把这些数据放到我的 web 应用程序中。在阅读了一些教程和示例后，我开始创建一些实现。

在开始创建我的第一个服务后，我将这段代码剪切到我的 app.js 中：

app.config(['$httpProvider', function ($httpProvider) {
    delete $httpProvider.defaults.headers.common["X-Requested-With"];
}]);

这将从默认标头中删除 X-Request-With 请求标头。

1.通过Service和ngResource请求

angular.module('helloService', ['ngResource']).
    factory('hService', function ($resource) {

        return $resource('http://localhost\\:8180/rest/hello',
            {callback: 'JSON_CALLBACK'}, {
                get: {method: 'GET', headers: [
                    {'Content-Type': 'application/json'},
                    {'Accept': 'application/json'}
                ]}
            });
    });

我的控制器：

function MyController($scope, hService) {
    hService.get(function(result){
        alert(" Result of helloService");
    }, function error(response){
        alert(" Error during helloService "+response.status);
    }); 
}

如果我尝试加载数据，get 函数将始终返回错误并且状态始终为 0。

2. 尝试使用 Restangular

在了解如何使用 Restangular 之后，我开始配置 Restangular：

app.config(function (RestangularProvider) {
    RestangularProvider.setBaseUrl('http://localhost\\:8180/rest');
});

并将 RestangularProvider 添加到我的 angular.module 中：

var app = angular.module("html5App", ['helloService', 'restangular', 'ngResource']);

我的控制器：

function MyRestangularCtr($scope, Restangular){

    var all = Restangular.all('hello');
    $scope.allObjects = all.getList();

    all.getList().then(function (hellos) {
        console.log("Result "+ hellos);
    }, function errorCallback(response) {
        alert("Oops error from server :( status" + response.status);
        console.log("status: "+response);
    });
}

此处相同：无数据，状态 0。我不知道，为什么我没有从我的服务中获取任何数据。另外我有时会收到此错误：“错误：$digest 已经在进行中”。我不确定，问题出在哪里。如果球衣服务我错了或坏了，或者我的初学者 JavaScript 错了。

第一个解决方案

客户端

Angular 请求应如下所示：

$scope.myData = $resource('http://localhost\\:8180/rest/:action',
    {action: 'hello', callback:'JSON_CALLBACK'},
    {get: {method: 'JSONP'}});
$scope.datas = $scope.myData.get();

该方法需要 JSONP（GET 仍然无法正常工作（没有响应数据，因为 CORPS？）

服务端

这里重要的是，服务器还使用 JSONP 格式响应并且可以处理回调请求。

@GET
@Produces("application/x-javascript")
public JSONWithPadding sayJsonHello(@QueryParam("callback") String callback) {
    MyObjectList obList= new MyObjectList ();

    obList.getObjs().add(new MyObject(1, "HUHU"));
    obList.getObjs().add(new MyObject(2, "HUHU 2"));

    return new JSONWithPadding(obList, callback);
}

还不清楚

有什么方法可以将普通的 json 对象从服务器返回到客户端？

4

1 回答 1

1

控制器的第一个参数不应该是 $scope 吗？也许这就是问题所在？

function MyController($scope, hService) {
于 2013-05-29T08:25:37.210 回答