テンプレートで同じ角度コントローラーを2回ロードしますが、2回目のAJAXコールはありませんか？

Question

私は新しいAngularプロジェクトを継承し、すべてのページで何らかの奇妙なAJAXリクエストが繰り返されることを発見しました。私はこれがテンプレートでは、ヘッダーとフッターのテンプレートアセットにいくつかのng-includeがあるからです。

これには、ユーザアイテムのリストを取得する要求を行う同じコントローラ（ItemController）を使用することが含まれます。ヘッダーとフッターの両方の項目に基づいて情報を表示します。理想的には、コントローラの使用回数に関係なく、ページロード時に1回だけ発生します。

2つのテンプレート（ヘッダーとフッター）の間でコントローラーを共有する方法はありますか？または、誰かがこれを正しく行うためのアドバイスを持っていますか？

Answer 1

テンプレート間でコントローラを共有する方法はありません。つまり、2つのテンプレートで同じコントローラを使用できますが、コントローラのインスタンスは2つに分かれます。

コントローラは、データの取得を処理するサービスを呼び出す必要があります。これは基本的な角度です。

サービスはシングルトンです。 Angularアプリの実行ごとに1回だけインスタンス化されます。複数のAJAX呼び出しが外出するのを防ぐには、サービスにajax呼び出しの結果を格納するか、キャッシュを使用するのが良い方法です。そうすれば、多くのコントローラがデータを要求できますが、AJAX呼び出しを1回だけ行う必要があります。

新しいデータを取得する必要がある場合は、オプションのパラメータを渡してキャッシュを無効にすることができます。

function DataService($http, $q, apiUrl) { 
    var DataService = this; 
    var data = []; 
    var promiseKeeper = {}; 

    DataService.getData = function(invalidateCache) { 
    var deferred = $q.defer(); 
    if(data.length > 0 && !invalidateCache) { 
     deferred.resolve(data); 
     return deferred.promise; 
    } 
    else { 
     if(promiseKeeper["getData"]) { 
     return promiseKeeper["getData"]; 
     } 
     else { 
     $http.get(apiUrl) 
      .then(function(response) { 
      data = response.data; 
      promiseKeeper["getData"] = undefined; 
      deferred.resolve(response.data); 
      }); 
     promiseKeeper["getData"] = deferred.promise; 
     return promiseKeeper["getData"]; 
     } 
    } 
} 

dataパラメータがまだ読み込まれていない場合promiseKeeperオブジェクトは、データに対する複数の要求を処理します。同じデータをほぼ同時に要求している複数のコントローラがあると、各要求に対して複数の約束を作成するのではなく、同じ約束が解決されるのを待つことになります。