angularjs を使用し、必要に応じて ui-router を使用して、非常に大きな単一ページ アプリケーションを最適に構成する方法に関する質問があります。
私のシナリオはこれです。
- トレンド モジュール、「ビジネス」アナライザー、ダッシュ ボード/ワークスペース、その他多数のコンポーネントが複数あります。
- 古い学校の MDI Windows アプリケーションのように、ランチャー サイドバーからモジュールを個別のタブで 1 回以上開くことができます。
- 一部のモジュールは完全に独立しており、一部のモジュールは、ページのどこかにある共通のフィルタリング ウィジェットを使用/共有する場合があります。
一般的な考え方は、これらの各コンポーネントを個別のタブで複数回開くことができるため、ユーザーはワークフローの一部として簡単に切り替えることができます。もう 1 つのことは、それらすべてに対して URL リンクをサポートする必要があることです。URL を開くには、すべての「タブ」を再度開く必要はなく、URL がリンクしているタブだけを開きます。
angularjs を使用する場合、これまでの私の限られた理解では、これを達成するための最良の方法は、プロジェクトを大規模なアプリケーションに推奨される個別のビジネス モジュールに分割することであることが示されました。関連するテンプレート、サービス、ディレクティブなどを含む各ビジネス モジュール。
次に、ng-include を使用してテンプレートをインクルードし、各ビジネス モジュールのコントローラーをインスタンス化します。同じコントローラーを複数回インスタンス化して、独自のデータを別々に保持できることをテストしました。特定のコントローラーが作成されるたびに、必要なテンプレートを含める必要もあります。これは、同じモジュールを別々のタブで複数回インスタンス化したい場合をカバーします。
これはURLリンクの問題を解決しませんが、この問題を解決する可能性のある複数のui-viewをサポートするui-routerの代替案に私を導きますが、私はまだそれについて十分に知りません. ui-router を使用すると、各ビューの「インスタンス」を含む URL 構文を含めることができると思いますが、それをどのように行うかはわかりません。手動でブートストラップされた複数のアプリを使用するという考えは問題外のようです。これは、異なるモジュール間の通信の可能性を減らし、一般的な意見ではこれは悪い考えであることを示しているようです。
この状況での良いアプローチについて、フィードバックや建設的なコメントをいただければ幸いです。