AngularJSのngResourceモジュールをRestangularに置き換えてみた

いなば

2015.05.14

Web制作

ngResourceとRestangularでそれぞれモデルを実装してみる

サンプルコードも合わせてご紹介します。

ngResourceでモデルを作った場合

サンプルコード

angular.module('services').factory('MemberModel', [
    '$resource',
    'ApiUrlConstant',
    function ($resource,ApiUrlConstant) {
        var resource = $resource(ApiUrlConstant.member + '/:id',{
            id: '@id'
        }, {
            'save': {
                url: ApiUrlConstant.member,
                method: 'POST'
            },
            'get': {    // 単体を取得するとき
                method: 'GET',
                cache: true
            },
            'query': {  // 一覧を取得するとき（取得するjsonの一番外側が配列のとき）
                method: 'GET'
            },
            'update': {
                method: 'PUT',
                isArray: false
            },
            'delete': {
                method: 'DELETE'
            }
        });

        return resource;
    }
]);

Restangularでモデルを作った場合

サンプルコード

angular.module('services').factory('AccountModel', [
    'Restangular',
    function (Restangular) {
        var account = Restangular.all('account');
        return account;
    }
]);

記述量が減り大分スッキリとしました。
$resourceのquery()に相当するものがRestangularではgetList()になるなど、対応する関数の名前が多少違います。

使用例はドキュメントを参照してください。

RestangularはPromiseを返してくれるのでthenでコールバック関数を追加することができます。

.controller('member.IndexCtrl', [
    '$scope',
    'MemberModel',
    function($scope,MemberModel){
        // Promiseオブジェクトが返ってくる
        $scope.accounts = MemberModel.getList().then(function(res){
            $scope.accounts = res;
        });
    }
])
.controller('member.DetailCtrl', [
    '$scope',
    '$routeParams',
    '$location',
    'MemberModel',
    function($scope,$routeParams,$location,MemberModel){
        if(!$routeParams){
            $location.path('/member');
        }
        $scope.account = MemberModel.get($routeParams.id).$object;
    }
]);

Restangularの便利な機能をご紹介します。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る