AJAX呼び出しが成功してデータを返すと、ビューが更新されます

Question

私は、ユーザーが検索バーに入れた材料に基づいてレシピのリストを返すレシピ検索アプリケーションで作業している初心者です。私はAngularを使いこなすことを学んでいます。便利で、コードを管理しやすいからです。

これまでのところ、私は自分のデータベースのAPIにjQuery Ajax GETリクエストを作成し、JSONオブジェクトのリストを返すことに成功しました。

は、ここに私の角度コントローラの宣言です：

var recipesData = []; // variable that will hold the returned data 
    angular 
     .module("awesomeapp") 
     .controller("listController", listController); 

    function listController() { 
     var vm = this; 
     vm.data = recipesData; 
    } 

そして私は、私の見解では他の場所で表示さvm.dataで何かを持っています。

vm.dataがrecipesDataに設定されている場合、ページがロードされたばかりで、ユーザーは何も入れておらず、まだ返されていないデータがあるため、何も表示されません。

vim.dataをAjaxコールの後に設定できるようにするにはどうすればよいですか？または、listController関数の外部で設定することはできますか？

私はこのための優雅なソリューションを探していますので、すべてを簡単に保守することができます。ありがとう:)

Answer 1

これを行う適切な方法は、jQueryを使用せず、Angularの$ httpサービスを使用してデータを取得することです。これを行うさらに適切な方法は、Angularの$ httpサービスを内部的に使用してデータを取得する独自のサービスを作成することです。

まず、サービスを作成します。このような何か：

angular 
     .module("awesomeapp") 
     .service("recipeService", recipeService); 

function recipeService($http) { 
    return $http.get(**url**) 
} 

次に、あなたのコントローラーが何かのようにこのなります

function listController (recipeService) { 
    var vm = this; 
    recipeService.then(response) { 
     vm.data = response.data 
    } 
} 

は、おそらく最終的にはあなたのサービスでより多くのものを持っているでしょうが、それはあなたが正しい方向に軌道に乗る必要があります。私は非常にジョンパパのAngularjsスタイルのガイドhttps://github.com/johnpapa/angular-styleguide/blob/master/a1/README.mdあなたのアプリの構造の方法についての指針を参照することをお勧めしたいと思います。 jQueryを一般的にAngularで使用することを避けようとしますが、特にAngularがネイティブに使用することを避けたいとします。