[解決済み] AngularJS $resource RESTful の例
質問
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;
});
関連
-
vue ディレクティブ v-html と v-text
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] RESTリソースの命名規則はSingularとPluralのどちらを使用すべきですか?
-
[解決済み】REST APIでのPUTメソッドとPATCHメソッドの使い分け 実生活でのシナリオ
-
[解決済み] restfulなPOSTレスポンスのための「ベスト」プラクティス
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
要素ツリー制御によるvueTreeテーブル
-
jsを使った簡単な照明スイッチのコード
-
Vueにシンプルなメモ帳機能を実装
-
Vueのクラススタイルの使い方の詳細
-
Vueでルートネスティングを実装する例
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方