AngularJS/TIPS集/$http のバックアップの現在との差分(No.1)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
AngularJS/TIPS集/$http へ行く。
- 1 (2016-02-06 (土) 08:58:12)
追加された行はこの色です。
削除された行はこの色です。


***サンプル [#f00b2868]
$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);
こんな感じでサービスを呼び出せるようにします。

***サービスの定義 [#mcdf0b8a]
 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);
             }
         };
     }]);

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


 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);
             });
         };
     }
     ]) ;