0

angularJS と REST のリクエスト/レスポンスに問題があります。3 週間以来、私は AngularJS で遊んでいますが、今はクールなことをしたいと思っています。最初に、単純なリストを返す単純なジャージー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;
  }
}

ご覧のとおり、大きな魔法はありません。ここで、Jersey を構成するための私の web.xml ファイル:

<?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 インスタンスにデプロイします。今、私はこのデータを私の webapplication に入れたいと思います。いくつかのチュートリアルと例を読んだ後、いくつかの実装を作成し始めました。

最初のサービスの作成を開始した後、このコードを app.js に切り取りました。

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

これにより、ヘッダーのデフォルトから X-Request-With request-header が削除されます。

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 i の使用方法を取得したら、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);
    });
}

ここでも同じです: No Data, Status 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