前回、AngularJSのresourceサービスを使ってサーバーのデータベースからデータを取得して表示しました。
今回は、サーバーに対する$resourceサービスのRESTアクション(create、index、show、update、destroy)をサービスとして定義します。
1)AngularJSの$resourceのRESTアクションをサービスとして定義
AngularJSの$resourceサービスを使ってサーバー側にアクセスするRESTアクションをサービスとして定義します。
$ vi app/assets/javascripts/mymodule.js.erb
var mymodule = angular.module("myModule", ['ngRoute','ngResource']);
mymodule.factory("userResource", function($resource) {
return $resource("/api/users/:id", { id: "@id" },
{
'create': { method: 'POST' },
'index': { method: 'GET', isArray: true },
'show': { method: 'GET', isArray: false },
'update': { method: 'PUT' },
'destroy': { method: 'DELETE' }
}
);
});
2)AngularJSのコントローラを修整
前回作成したuser一覧をサーバーから取得するAngularJSコントローラを上記で定義したサービスを使う形に変更します。
(修整前)
mymodule.controller("UsersIndexCtrl", function($scope,$resource) {
var rtn = $resource('/api/users');
$scope.users = rtn.query();
});
(修整後)
mymodule.controller("UsersIndexCtrl", function($scope,userResource) {
$scope.users = userResource.index();
});