使用ngResource和Restangular的AngularJS RESTful JSON请求

时间:2013-05-29 07:56:53

标签: rest angularjs jersey

我在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。通过服务和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'}
                ]}
            });
    });

myController的:

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

如果我尝试加载数据,get functin将始终返回错误,状态始终为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']);

myController的:

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仍然无效(没有 repsonse数据因为CORPS?)

服务方

重要的是,服务器还使用JSONP fomat进行响应,并且可以处理回调请求。

@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对象从服务器返回到客户端?

1 个答案:

答案 0 :(得分:1)

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

function MyController($scope, hService) {