前回、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(); });