AngularJSの$resourceサービスを使ってREST

１）ngResourceモジュールを準備
　
①angular-resource.jsファイルを入手し、HTMLファイルでインポート。
<script src=”angular-resource.js”></script>
　
②スクリプト内で依存性の指定。
angular.module(“exampleApp”, [“ngResource”])
.controller(“myCtrl”, function ($scope, $resource) {
　
２）resource”クラス”オブジェクトを定義
　
・resource”クラス”オブジェクトを定義後、query、get、save、deleteなどのアクションを使ってHTTP送受信を行う事ができます。
　
・resource”クラス”オブジェクトのqueryやgetアクション実行後にリターンされるインスタンス（この記事では”resourceインスタンス”と呼びます”）のアクションを使ってHTTP送受信することも出来ます。（下記３）で説明）
　
構文
var resrcObj = $resource(url, [paramDefaults], [actions]);
　
①url
　
・パラメータを含むURL。
・パラメータには”:”のプレフィックスがつく。/user/:username
　
②paramDefaults
　
・urlパラメータのデフォルト。
・actionsメソッドによって上書きされる。
・値に@が指定されている場合は、送信データ内の同じキー名の値から取得される。
　
③actions
　
・カスタムアクションを定義
下記のように指定する。[action]でアクションの名前で、それ以降に$httpサービスのconfigオブジェクトと同様な項目を設定。
{action1: {method:?, params:?, isArray:?, headers:?, …},
action2: {method:?, params:?, isArray:?, headers:?, …},
…}
　
２）resource”クラス”オブジェクトのメソッド（アクション）を実行
　
①デフォルトのメソッド
　
下記のようにmethodが定義された5つのデフォルト定義アクションがあります。
{ ‘get’: {method:’GET’},
　’save’: {method:’POST’},
　’query’: {method:’GET’, isArray:true},
　’remove’: {method:’DELETE’},
　’delete’: {method:’DELETE’} };
　
②アクション実行後のリターン
　
・アクションを実行すると、HTTPメソッド、あて先URL、パラメータが指定され、HTTP送受信が行われます。内部では$httpサービス使用されています。
　
・内部で$httpサービスが使用されているので、$httpサービスと同様にプロミスによって非同期処理が行われます。
　
・パラメータの設定でisArray:trueの場合は、JSONデータ配列がリターンされ、falseの場合は一つのオブジェクトがリターンされます。
　ユーザー一覧を取得する場合は、isArray:trueの’query’アクション、指定したユーザーIDの情報を取得する場合は、isArray:falseの’get’アクションを使用します。
　
③アクションメソッドのパラメータ
　
・POST、PUTリクエストなどデータを送信する場合
resrcObj.action([parameters], postData, [success], [error])
　
・GETリクエストなどデータを送信しない場合
resrcObj.action([parameters], [success], [error])
　
・successコールバックの引数は、(value, responseHeaders)
・errorコールバックの引数は、(httpResponse)
　
３）resourceインスタンス
　
・query、getなどのresource”クラス”オブジェクトを実行してリターンされたオブジェクトがresourceインスタンス。
　
・そのインスタンスは、$get、$save、$remove、$deleteなどのようにアクション名に”$”のプレフィックスをつけてアクションを実行する事が出来る。
　
構文
instance.$action([parameters], [success], [error])
　
・このresouceインスタンスを使用する事によって、簡単にサーバーサイドに対するCRUDアクションを実行できる。
　
例）ユーザーIDが123のユーザー情報を取得し、名前を変更して保存。
var User = $resource(‘/user/:userId’, {userId:’@id’});
User.get({userId:123}, function(user) {
　user.name = “xyz”;
　user.$save();
});

１）resourceオブジェクトのアクションを使った例
　
①resourceオブジェクトを定義
　
ここでは、Ruby on RailsのRESTスタイルに合わせたアクション名でカスタムアクションを定義しています。
　
var userResource = $resource(“users/:id”, { id: “@id” },{
　　’create’: { method: ‘POST’ },
　　’index’: { method: ‘GET’, isArray: true },
　　’show’: { method: ‘GET’, isArray: false },
　　’update’: { method: ‘PUT’ },
　　’destroy’: { method: ‘DELETE’ }
})
　
②resourceオブジェクトのアクションを実行
　
○ユーザー一覧を取得
userResource.query(function(data, headers){
　　$scope.users = data;
　},function(err) {
　　$scope.Result = “サーバーレスポンスエラー：” + err.statusText;
　}
);
　
○ユーザーを新規登録
新規登録なのでidは指定しません。
userResource.create(new_data,function(data, headers){
　　$scope.user_create = data;
　},function(err) {
　　$scope.Result = “サーバーレスポンスエラー：” + err.statusText;
　}
);
　
○指定したIDのユーザーの情報取得
userResource.show({ id: id },function(data, headers){
　　$scope.user = data;
　},function(err) {
　　$scope.Result = “サーバーレスポンスエラー：” + err.statusText;
　}
);
　
○指定したIDのユーザーの情報変更
送信するユーザー情報（chg_user）内のid属性でユーザーIDの値が指定されているのでパラメータにIDを指定していません。
userResource.update(chg_user,function(data, headers){
　　$scope.user_update = data;
　},function(err) {
　　$scope.Result = “サーバーレスポンスエラー：” + err.statusText;
　}
);
　
○指定したIDのユーザー削除
userResource.destroy({ id: id },function(data, headers){
　　$scope.user_delete = data;
　},function(err) {
　　$scope.Result = “サーバーレスポンスエラー：” + err.statusText;
　}
);
　
２）resourceインスタンスのアクションを使用した例
　
①resourceオブジェクトを定義
　
カスタムアクションは定義せず、デフォルトのアクションを使用します。
var userResource1 = $resource(“users/:id”, { id: “@id” });
　
②resourceオブジェクトのqueryアクションを実行
　
userResource1.query(function(data, headers){
　　$scope.users = data;
　},function(err) {
　　$scope.Result1 = “サーバーレスポンスエラー：” + err.statusText;
　}
);
　
③resourceインスタンスのアクションを実行
　
resourceオブジェクトのqueryアクションでユーザー一覧のresourceインスタンスの配列を取得し、HTML内のng-repeatで個々のユーザーに展開したインスタンスをng-click=”save(item)”の引数に渡しています。
　
スクリプト内で引数で取得したresourceインスタンスのアクションを実行しています。
　
resourceインスタンス内にユーザーIDの値が含まれているので、アクション実行時のパラメータには指定していません。

（HTML）
<tr ng-repeat="item in users">
  <td>{{item.id}}</td>
  <td>{{item.firstName}}</td>
  <td>{{item.lastName}}</td>
  <td>
    <button ng-click="save(item)">変更</button>
    <button ng-click="delete(item)">削除</button>
  </td>
</tr>
　
（スクリプト）
$scope.save = function (user) {
  user.$save(function(data, headers){
      $scope.user_save = data;
    },function(err) {
      $scope.Result1 = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
}
$scope.delete = function (user) {
  user.$delete(function(data, headers){
      $scope.user_delete = data;
    },function(err) {
      $scope.Result1 = "サーバーレスポンスエラー：" + err.statusText;
    }
  );
}

デモとコードサンプルはこちら。