AngularJS/TIPS集/$resource

サンプル †

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

RESTの仕様は$httpのときのサンプルとおなじく、

/api/hoge/ にHTTP GETすると一覧(JSON配列)
/api/hoge/[id].json にGETすると詳細
/api/hoge/ にHTTP POST すると登録

こんなよくある仕様だとします。これらに対して、$httpのときのサンプル のときのようにサービスを定義しますが、$resourceはあらかじめ定義済みのメソッドがあり、それをそのまま利用するとして

hogeService.query();
hogeService.get(data);
hogeService.save(postData);

こんな感じでサービスを呼び出せるようにします。

サービスの定義 †

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追記: コレについて、ちゃんと調査した結果はこちら。

コントローラからの呼び出し方 †

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を呼び出す。コールバックを指定して戻ってきたらダイアログを出す。
        };


    }
    ])
;

関連リンク †

この記事は

現在のアクセス:1875