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

AngularJSの$resourceサービスを使ってRESTfulなクライアントを作成する事が出来ます。$resourceサービスの使用方法、使用例をまとめました。

デモとコードサンプルはこちら
 
※目次をクリックすると目次の下部にコンテンツが表示されます。

$resourceサービスの概要
$resourceサービスは内部でAngularJSの$httpサービスを使用していて、サーバーに対してHTTPの送受信を行う事ができ、RESTfulにサーバーサイドのデータソースとやり取りできます。
 
例えば、下記のようなURLの構成でサーバーとユーザー情報のやり取りを行うクライアントを作成する際に有用です。

URL          HTTPメソッド  処理内容
/users       GET           ユーザー一覧取得
/users       POST          新規ユーザー登録
/users/<id>  GET           指定したIDのユーザー情報取得
/users/<id>  PUT           指定したIDのユーザー情報変更
/users/<id>  DELETE        指定したIDのユーザー削除

$resourceサービスの使用方法
1)ngResourceモジュールを準備
 
①angular-resource.jsファイルを入手し、HTMLファイルでインポート。
<script src=”angular-resource.js”></script>
 
②スクリプト内で依存性の指定。
angular.module(“exampleApp”, [“ngResource”])
.controller(“myCtrl”, function ($scope, $resource) {
 
2)resource”クラス”オブジェクトを定義
 
・resource”クラス”オブジェクトを定義後、query、get、save、deleteなどのアクションを使ってHTTP送受信を行う事ができます。
 
・resource”クラス”オブジェクトのqueryやgetアクション実行後にリターンされるインスタンス(この記事では”resourceインスタンス”と呼びます”)のアクションを使ってHTTP送受信することも出来ます。(下記3)で説明)
 
構文
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:?, …},
…}
 
2)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)
 
3)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();
});

サンプルコード
1)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;
 }
);
 
2)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;
    }
  );
}

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

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です