1. ホーム
  2. javascript

[解決済み] AngularJS $resource RESTful の例

2022-05-11 15:01:03

質問

RESTfulなウェブサービスを呼び出すために$resourceを使いたいのですが(まだ作業中です)、まずAngularJSスクリプトが正しいかどうかを調べたいです。

todoのDTOには {id, order, content, done}

:cmd を呼び出すことができます。 api/1/todo/reset を呼び出して、データベースのTodoテーブルをクリアすることができます。

以下は、私が理解したコメント付きのコードです。

function TodoService($resource) {
    var src = $resource('api/1/todo/:id:cmd',
              {id: "@id", cmd: "@cmd"}, //parameters default
              {
                ListTodos: { method: "GET", params: {} },
                GetTodo: { method: "GET", params: { id: 0 } },                            
                CreateTodo: { method: "POST", params: { content: "", order: 0, done: false } },
                UpdateTodo: { method: "PATCH", params: { /*...*/ } },
                DeleteTodo: { method: "DELETE", params: { id: 0 } },
                ResetTodos: { method: "GET", params: { cmd: "reset" } },
              });

    //Usage:

    //GET without ID
    //it calls -> api/1/todo
    src.ListTodos();

    //GET with ID
    //it calls -> api/1/todo/4
    src.GetTodo({ id: 4 });

    //POST with content, order, done
    //it calls -> api/1/todo
    src.CreateTodo({ content: "learn Javascript", order: 1, done: false });

    //UPDATE content only
    //it calls -> api/1/todo/5
    src.UpdateTodo({ id: 5, content: "learn AngularJS" }); 

    //UPDATE done only
    //it calls -> api/1/todo/5
    src.UpdateTodo({ id: 5, done: true });

    //RESET with cmd
    //it calls -> api/1/todo/reset
    src.ResetTodos();
}

私はすべてを更新したいわけではなく、1つのフィールドだけを更新することができるのでしょうか?このコード片は正しく構成されていますか?

どのように解決するのですか?

$resource はエンドポイントからデータを取得し、それを操作して送り返すためのものでした。あなたが持っている いくつか を持っていますが、そのために作られたものを実際に活用していません。

リソースにカスタムメソッドを持つのは良いことですが、OOTBに付属するクールな機能を逃したくはないでしょう。

EDIT : 元々説明が足りなかったと思うのですが $resource は返り値でいくつかのファンキーなことをします。 Todo.get()Todo.query() ともに 戻る リソースオブジェクトを返します。 に渡します。 コールバック に渡してください。これは舞台裏でプロミスを使った派手なことをやっていて、つまりは $save() の前に get() のコールバックが実際に起動する前に、を実行し、待ちます。おそらく、プロミスの内部でリソースを処理するのが最善でしょう。 then() またはコールバックメソッドの内部でリソースを処理するのが最善でしょう。

標準的な使用方法

var Todo = $resource('/api/1/todo/:id');

//create a todo
var todo1 = new Todo();
todo1.foo = 'bar';
todo1.something = 123;
todo1.$save();

//get and update a todo
var todo2 = Todo.get({id: 123});
todo2.foo += '!';
todo2.$save();

//which is basically the same as...
Todo.get({id: 123}, function(todo) {
   todo.foo += '!';
   todo.$save();
});

//get a list of todos
Todo.query(function(todos) {
  //do something with todos
  angular.forEach(todos, function(todo) {
     todo.foo += ' something';
     todo.$save();
  });
});

//delete a todo
Todo.$delete({id: 123});

同様に、OPに投稿されたものの場合、リソースオブジェクトを取得し、それに対して任意のカスタム関数を呼び出すことができます(理論的には)。

var something = src.GetTodo({id: 123});
something.foo = 'hi there';
something.UpdateTodo();

しかし、私なら、自分で発明する前に、OOTBの実装を試してみるでしょう。 そして、もしあなたが $resource のデフォルトの機能を何も使っていないとわかったら、おそらく $http を単独で使うべきでしょう。

更新:Angular 1.2とプロミス

Angular 1.2より、リソースがプロミスをサポートしました。しかし、それ以外の動作は変更されませんでした。

でプロミスを活用するために $resource を使うには $promise プロパティを返します。

プロミスを使った例

var Todo = $resource('/api/1/todo/:id');

Todo.get({id: 123}).$promise.then(function(todo) {
   // success
   $scope.todos = todos;
}, function(errResponse) {
   // fail
});

Todo.query().$promise.then(function(todos) {
   // success
   $scope.todos = todos;
}, function(errResponse) {
   // fail
});

ただ、注意していただきたいのは $promise プロパティは、上で返していたのと同じ値に対するプロパティであることに注意してください。だから、変なことになることもある。

これらは等価です

var todo = Todo.get({id: 123}, function() {
   $scope.todo = todo;
});

Todo.get({id: 123}, function(todo) {
   $scope.todo = todo;
});

Todo.get({id: 123}).$promise.then(function(todo) {
   $scope.todo = todo;
});

var todo = Todo.get({id: 123});
todo.$promise.then(function() {
   $scope.todo = todo;
});