1

私は大規模なAngularJSアプリに取り組んでおり、コントローラーがデータを取得するさまざまなサービスにすべてのAjaxコードをカプセル化しようとしています。問題は、ajax呼び出しのステータスを知る必要があり、ユーザーに正しい情報を表示することを中心に展開します。データが見つからないか、データが現在ロードされているか、データのロードを妨げるエラーが発生した可能性があります。ユーザーには、読み込み中のメッセージ、「データが見つかりません」というメッセージ、またはエラーメッセージが表示される必要があります。

私が持っているとしましょうProjectService。理想的には、呼び出されたメソッドがあればgetAllProjects、プロジェクトの配列を返します。しかし、そうすれば、サーバー通信で何が起こっているのかわかりません。

では、データがロードされているか、ロードされているか、エラーが発生したかをコントローラーに通知するにはどうすればよいですか？私が思いつくことができる最善の方法は、以下の擬似コードのようなコールバックを使用することです。そのようなことや私が見落としているかもしれない何かを達成するためのより良い方法はありますか？

ありがとう。

app.controller( "ProjectController", function( $scope, ProjectService ){

  // Set the initial / default status
  $scope.loadStatus = "loading";

  // Return an empty array initially that will be filled with
  // any data that is returned from the server
  // The callback function will be executed when the ajax call is finished
  $scope.projects = ProjectService.getProjects(function( status ){

    // Alert the controller of a status change
    setStatus( status );

  });

  function setStatus( ){
    $scope.loadStatus = status;

    // ... update the view or whatever is needed when the status changes....
  }

});

app.service( "ProjectService", function( $resource ){

  return {
    getAllProjects: function(){

      // ... load and return the data from the server ...

    }
  };

});
4

1 に答える 1

0

私たちのコードベースでは、今やっている

$scope.flags.loading = true;
$http(...).success(function(){
  $scope.flags.loading = false;
});

はい、これは単純化したものですが、すべてのクエリで読み込みオーバーレイが必要なわけではありません (ページネーションや更新中など)。これが、単純にデコレータを使用しないことを選択した理由です。

ただし、そうしたい場合は、これを行う方法がいくつか考えられます。あなたが私たちのように、旗をオブジェクトにまとめるとしましょう。次に、関連付けを有利に使用できます。

MyService.flags = $scope.flags
... (inside the service) ...
this.flags.loading = true/false;

サービスのプロパティとして参照を確立することにより、サービス内からすべての状態の切り替えを行うことができ、コントローラーが煩雑になるのを避けることができます。ただし、これにより、2 つ以上の近接したクエリが競合するという欠点が生じる可能性があります (最初のクエリが終了し、2 番目のクエリが完了する前に読み込み状態が削除されます)。

このため、フラグを設定することで発見されました。「ロード済み」を実際にチェックするのではなく、データをチェックするか、成功のコールバックを使用するだけです。

于 2012-09-25T00:40:00.670 に答える