Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

AngularJSとRails4でRestアプリ作成(4)RESTアクションをfactoryメソッドを使ってサービス化

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