AngularJS サービス Restangularの紹介

はじめに

好物はインフラとフロントエンドのかじわらゆたかです。(ご挨拶)

今回はAngularJSでRestを扱うRestangularの紹介です。

AngularJSでRestを扱う際に使うのはngResourceを使うケースがほとんどとは思いますが、 Swiip/generator-gulp-angularで雛形を作ろうとした際に、 ngResouceとRestangularどっちつかうん？みたいなことを聞かれたので触ってみました。

実装内容

今回はGoogleカレンダーから祝日を取得し、日付をキーとするオブジェクトとして取得するといった例を作成しました。

PHPで作成している例があったので、そちらをRestangularで作ったといった形になります。

PHPで日本の祝日のJSONをGoogleカレンダーから取得する（API認証等不要） - きじとら

HolidayService.js

angular.module('angularGetHoliday').factory('HolidayService', function(Restangular) {
        var calenderId = encodeURIComponent('japanese__ja@holiday.calendar.google.com');
        var nowDate = new Date();
        var startDate = (nowDate.getFullYear() - 1).toString() + '-01-01T00:00:00Z';
        var endDate = (nowDate.getFullYear() + 1).toString() + '-12-31T00:00:00Z';
        var url = 'https://www.google.com/calendar/feeds/' + calenderId + '/public/basic?start-min=' + startDate + '&start-max=' + endDate + '&max-results=30&alt=json-in-script';
        Restangular.setJsonp(true);
        Restangular.addResponseInterceptor(function(data) {
            var retData = {};
            var dateIdRegexp = /^.*?(2\d{7})[^/]*$/;
            angular.forEach(data.feed.entry, function(dateData) {
                if (angular.isDefined(dateData.id)) {
                    var ids = dateData.id.$t.match(dateIdRegexp);
                    if (ids.length) {
                        retData[ids[1].toString()] = dateData.title.$t; 
                    } 
                } 
            });
            
            return retData; 
        });
        Restangular.setDefaultRequestParams('jsonp', {
            callback: 'JSON_CALLBACK' 
        });

        return Restangular.oneUrl('calendar', url);

    });

Restangular化で気をつけた点はハイライトしている点になります。

今回はクライアントサイドから別ドメインへのアクセスになるため、jsonではなくjsonpでの取得になります。 そのため、GoogleカレンダーへのAPIアクセスの際にalt=json-in-scriptといったパラメータを付与しています。 また、jsonpで送付する際にcallbackの指定を行うため、22~24行目において、callbackパラメータを付与しています。

動作デモ

下記のURLにて、実際に上記のサービスを実装した例を動かせるようにしてあります。

Restangular Get Holiday From Google Calendar Sample

まとめ

普段ngResourceを使っていた身としては、 Restangularに書き換えたりすることはそんなに大変といった印象はありませんでした。

Restangularの解説 ^*1にも記載してある通り、 リクエストやレスポンスの加工が必要な際にはこちらの方が容易にできるのではなといった印象を受けました。

外部から提供されるAPIとつないだりする際はこちらを使うといったケースが多くなるのかもしれません。

脚注