AngularJS/TIPS集/$http

サンプル †

$httpを使ったサンプルです。というかまだ殴り書きメモ。 RESTの仕様は

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

こんなよくある仕様だとします。これらに対して、

hogeService.getHoges();
hogeService.getHoge(id);
hogeService.saveHoge(postData);

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

サービスの定義 †

angular.module(APP_NAME)
    .factory('hogeService', ['$http', function ($http) {
        function callAjax(method, url, data) {
            console.log(data);
            var promise = $http({
                method: method,
                url: url,
                data: data
            });
            return promise;
        }

        return {
            getHoges: function () {
                var method = 'GET';
                var url = '/api/hoge/';
                return callAjax(method, url);
            },
            getHoge: function (id) {
                var method = 'GET';
                var url = '/api/hoge/' + id + '.json';
                return callAjax(method, url);
            },
            saveHoge: function (postData) {
                var method = 'POST';
                var url = '/api/hoge/';

                console.log(postData);
                return callAjax(method, url, postData);
            }
        };
    }]);

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

angular.module(APP_NAME)
    .controller('HogeCtrl', ['hogeService',  '$scope', function (hogeService, $scope) {
        hogeService.getHoges()
            .success(function (result) { // 値が戻ってきたときのコールバック処理。
                // 画面のhogesというオブジェクトに値をセット。
                $scope.hoges = result;
            });

        $scope.addRow = function () { // たとえばボタンにaddRow()メソッドを紐付けたとして
            //  画面のhogesというオブジェクトにpostDataを追加して、そのJSONデータをセット。
            $scope.hoges.push($scope.postData);
            hogeService.saveHoge($scope.postData)
                .success(function (result) {
                    $scope.postData = null;
                });
        };

        $scope.delete = function (id) {
            hogeService.getHoge(id).success(function (result) { // getHogeしてるけどサーバで削除処理して // 削除しました、なんてダイアログを出す、など。
                alert(result);
            });
        };
    }
    ]) ;