☰

Angular.js で AJAX 呼び出しを行うためのベストプラクティスは何ですか? 質問する

tag-icon • tag-icon angularjs
Angular.js で AJAX 呼び出しを行うためのベストプラクティスは何ですか? 質問する

私はこの記事を読んでいました:http://eviltrout.com/2013/06/15/ember-vs-angular.html

そしてこう言った。

慣習がないため、コントローラー内で直接 AJAX を呼び出すなどの悪い習慣に頼っている Angular プロジェクトがいくつあるのだろうか。依存性注入のため、開発者はルーター パラメーターをディレクティブに注入しているのだろうか。初心者の AngularJS 開発者は、経験豊富な AngularJS 開発者が慣用的だと考える方法でコードを構造化しているのだろうか。

私は実際に$httpAngular.js コントローラーから呼び出しを行っています。なぜそれが悪い習慣なのでしょうか?$httpでは、呼び出しを行うためのベスト プラクティスは何でしょうか? また、その理由は何でしょうか?

ベストアンサー1

編集: この回答は主にバージョン 1.0.X に焦点を当てています。混乱を避けるために、2013 年 12 月 5 日現在の Angular のすべての現在のバージョンに対する最適な回答を反映するように変更されています。

アイデアは、返されたデータに対する Promise を返すサービスを作成し、それをコントローラーで呼び出して、そこで Promise を処理し、$scope プロパティにデータを設定することです。

サービス

module.factory('myService', function($http) {
   return {
        getFoos: function() {
             //return the promise directly.
             return $http.get('/foos')
                       .then(function(result) {
                            //resolve the promise as the data
                            return result.data;
                        });
        }
   }
});

コントローラー:

Promise のthen()メソッドを処理して、そこからデータを取得します。$scope プロパティを設定し、必要なその他の処理を実行します。

module.controller('MyCtrl', function($scope, myService) {
    myService.getFoos().then(function(foos) {
        $scope.foos = foos;
    });
});

ビュー内 Promise 解決 (1.0.X のみ):

ここでの元の回答の対象である Angular 1.0.X では、Promise は View によって特別な処理を受けます。Promise が解決されると、解決された値が View にバインドされます。これは1.2.Xでは非推奨になりました

module.controller('MyCtrl', function($scope, myService) {
    // now you can just call it and stick it in a $scope property.
    // it will update the view when it resolves.
    $scope.foos = myService.getFoos();
});

おすすめ記事