複数のウィジェットのデータ取得に関するアーキテクチャ上の質問があります。
AngularJSを使用して大規模なJavaScriptアプリケーション（ミニSPA）を構築しています。ユーザーがレイアウトシステムのコンテナーに含める、除外する、または再配置することを選択できるインタラクティブなウィジェットを備えた、非常にモジュール化されたダッシュボードアプリケーションを作成したいと思います。ユーザーは各ウィジェットを操作して、ウィジェットのデータなどを個別に更新できます。各ウィジェットは、他のウィジェットとは非常に異なるデータを表示します。
これまでのアーキテクチャでは、各ウィジェットは次のAngularJSコンポーネントで表されます。
したがって、各ウィジェットには、特定のエンドポイントを呼び出すAngularServiceを介して独自のデータをプルする機能があります。
これで、ユーザーが5つのウィジェットを含む可能性のあるダッシュボードページに到達したときに、5つの異なるサーバーエンドポイントに対して5つの個別の並列AJAX呼び出しを行いたくありません。それは効率的ではありません。サーバーへの並列リクエストを減らしたいのですが。
代わりに、ページに到着したら、5つのウィジェットのすべてのデータを集約したエンドポイントを呼び出すことによって単一のAJAX呼び出しを行いたいと思います。
質問：サーバーが5つのウィジェットからのすべてのデータを巧妙なラッパーで1つのJSONペイロードにバンドル/マージできると仮定すると、AngularJSアプリケーションで、そのデータを取得して5つのウィジェットコントローラーに配布する方法を教えてください。新しいサーバーデータで自分自身を初期化しますか？
もちろん、単一のウィジェットが自分自身だけを更新する機能を保持したいと思います。ダッシュボードページに到達する以外の動作は、この質問で私が尋ねていることではありませんが。
たぶんこれについて話している記事がそこにあるかもしれません、しかし私はまだそれを見つけていません。
私はすでに「良い」と思うアーキテクチャのアイデアを1つ考えましたが、もっと良い解決策があるのではないかと思います。
可能性）AJAX呼び出しを行うための5つのAngularサービスに加えて、WidgetAggregateServiceと呼ばれる6番目のサービスを導入します。それの場合はretrieveAllAndBroadcast()メソッドが実行され、このサービスは、成功コールバック自体を処理してから使用して5つのコントローラにペイロードを公開します$rootScope.$emit()。したがって、WidgetAggregateServiceは、5つのコントローラーがサブスクライブできる$ rootScopeのメディエーターパターン（またはPubSubパターン）を使用し$rootScope.$on()ます。各ウィジェットのコントローラーは、集約データペイロード内の関連情報を取得できます。
私のチームと私は解決策を思いつきました…
API契約
JSONラッパーで1つ以上のウィジェット応答を返す1つ以上のウィジェット（関連する要求引数の受け渡しを含む）をサーバーに要求できるようにするAPIコントラクトを開発しました。したがって、次の方法で検索を実行できます。
サーバーへの1回の呼び出しで。
1）集約検索：ページの読み込み時にページ上のすべてのウィジェットの集約検索を行うAngualrJS「ページ」コントローラーがあります。データ取得を処理するためにAJAXリクエストをNgファクトリに委任することにより、ページ上の5つのウィジェットすべてに対してリクエストを行います。これを「PageResourceFactory」と呼びます。
2）個々のウィジェットResourceFactoriesへの転送：「PageResourceFactory」にデータが正常に返されると、別のファクトリヘルパーを呼び出して、設定されたメソッドを呼び出す個々のウィジェットリソースファクトリに関連する応答を転送します。したがって、この時点で、5つのウィジェットリソースファクトリすべてにデータセットがあります。
3）ウィジェットコントローラーが新しいデータをサブスクライブする：ページの初期化中に、各ウィジェットコントローラーは、（リソースファクトリのsetメソッドを介して）新しいデータが設定されたときに基本的にリッスンするために、独自のリソースファクトリへのサブスクリプションを既にセットアップしています。したがって、コントローラーは、データがいつ変更されたか（ウィジェットコントローラーが取得を開始したかどうか）を知ることができます。
4）ウィジェットコントローラーがデータをバインドする：各ウィジェットコントローラーはデータの変更を「通知」されるため、ビューにバインドするスコープに配置することで、それに応じて応答できます。
これは、標準のAJAX検索でのみ機能します。
1）コントローラーはリソースファクトリを介して要求を行います。
2）$ httpを使用するリソースファクトリはAJAX要求を実行し、promiseオブジェクトをコントローラに戻します。
3）コントローラーは（promise呼び出しが成功した後）データを取得し、ビューに表示するためにデータをバインドします。
これが私たちが問題に取り組んだ方法です。他にも可能性があると思います。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加