AngularJS/TIPS集/$resource の変更点

追加された行はこの色です。
削除された行はこの色です。
AngularJS/TIPS集/$resource へ行く。
AngularJS/TIPS集/$resource の差分を削除
#topicpath
----


#contents



***サンプル [#gb08de87]
$resourceを使ったサンプルです。というかまだ殴り書きメモ。

RESTの仕様は[[$httpのときのサンプル>AngularJS/TIPS集/$http]]とおなじく、
 /api/hoge/ にHTTP GETすると一覧(JSON配列)
 /api/hoge/[id].json にGETすると詳細
 /api/hoge/ にHTTP POST すると登録
こんなよくある仕様だとします。これらに対して、[[$httpのときのサンプル>AngularJS/TIPS集/$http]] のときのようにサービスを定義しますが、$resourceはあらかじめ定義済みのメソッドがあり、それをそのまま利用するとして

 hogeService.query();
 hogeService.get(data);
 hogeService.save(postData);
こんな感じでサービスを呼び出せるようにします。

***サービスの定義 [#i3b1c894]

 angular.module(APP_NAME)
     .factory('hogeService', ['$resource', function ($resource) {
         // Public API here
         return $resource('/api/hoge/:key.:ext',
             {},
             {}
         )
     }]);

引数の
 /api/hoge/:key.:ext
については
 $resource.get({key: '012345', ext: 'json'}
とメソッドを呼び出した場合
 http://xxx/api/hoge/012345.json
が呼び出されるという意味です。

メソッド引数のプロパティと異なる場合は、たとえば
 $resource.get({key1: '012345', ext1: 'json'}
などとなる場合は、$resourceのメソッドの定義を以下のように書きかえます。
 $resource('/api/hoge/:key.:ext',
             {key: '@key1',ext: '@ext1'}, ←ここで紐付けを定義する
             {}
 )

2016/03/07追記: コレ、POSTとかでBodyでJSONを飛ばす場合だけ有効っぽい。

2016/04/26追記: コレについて、ちゃんと調査した結果は[[こちら>AngularJS/TIPS集/$resource/パラメタの操作について]]。



***コントローラからの呼び出し方 [#tf7e9d0f]


 angular.module(APP_NAME)
     .controller('PasswordCtrl', ['hogeService', '$scope', function (hogeService, $scope) {
          // $resourceのサンプル
         $scope.hoges = hogeService.query();  // あらかじめ定義されたqueryを呼び出す
 
         $scope.addRow = function () {
             $scope.hoges.push($scope.postData);
             hogeService.save($scope.postData); // あらかじめ定義されたsaveを呼び出す
         };
 
         $scope.delete = function (id) {
             console.log(id);
             var result = hogeService.get({key: id, ext: 'json'},
                 function () {
                     alert(result.key);
                 }); // あらかじめ定義されたgetを呼び出す。コールバックを指定して戻ってきたらダイアログを出す。
         };
 
 
     }
     ])
 ;



**関連リンク [#xa828190]
-[[$resource | AngularJS 1.2 日本語リファレンス | js STUDIO>http://js.studio-kingdom.com/angularjs/ngresource_service/$resource]]
paramDefaults
**関連リンク [#pd80c051]

----
この記事は
#vote(おもしろかった,そうでもない)

#comment

#topicpath

SIZE(10){現在のアクセス:&counter;}