1. ホーム
  2. angularjs

[解決済み] Angular.jsでAJAXの呼び出しを行う際のベストプラクティスは何ですか?

2022-04-28 02:41:30

質問

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

と書いてあった。

規約がないため、どれだけのAngularプロジェクトがあるのでしょう。 コントローラ内で直接AJAXを呼び出すような悪い習慣に依存しているのでしょうか? 依存性注入のために、開発者はルータを注入しているのでしょうか? パラメータをディレクティブに組み込むことはできますか?初心者のAngularJS開発者が 経験豊富なAngularJS開発者のようにコードを構成することができます。 が慣用的であると信じているのでしょうか?

実際に作っているのは $http をAngular.jsのコントローラから呼び出します。なぜそれが悪い習慣なのでしょうか?を作成するためのベストプラクティスは何ですか? $http の呼び出しとその理由を教えてください。

どのように解決するのですか?

EDIT: この回答は主にバージョン 1.0.X に焦点を当てていました。混乱を避けるため、本日 2013-12-05 時点で現在のすべての Angular のバージョンに対するベストアンサーを反映するように変更しました。

アイデアは、返されたデータへのプロミスを返すサービスを作成し、コントローラでそれを呼び出し、そこでプロミスを処理して $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;
                        });
        }
   }
});

コントローラーです。

プロミスの then() メソッドを呼び、データを取り出します。scopeプロパティを設定し、他に必要なことを何でもします。

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

In-View Promise Resolution (1.0.Xのみ)。

Angular 1.0.Xでは、プロミスはビューで特別な扱いを受けることになります。それらが解決するとき、その解決された値はビューにバインドされます。 これは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();
});