[解決済み] 動的なモジュール群によるAngularJSアプリの開発

質問

私は、ユーザーがウィジェットを置く（ドラッグ/ドロップ）ことができる複雑なレイアウトのアプリケーションを持っています（100以上のウィジェットの事前定義セットから選択する）、すべてのウィジェットは、特定の方法でデータのセット（REST呼び出しで取得）を表示するカスタム実装です。ブログ記事、stackoverflowの質問、AngularJSの公式ドキュメントを大量に読みましたが、この要件を処理するためにアプリケーションをどのように設計すればよいのかがわかりません。デモアプリを見ると、単一のモジュール（ng-app）があり、.jsファイルでそれを構築するときに、依存モジュールはその依存関係として宣言されています。しかし、私はウィジェットの大きなセットを持っており、どういうわけかそれらをすべてそこに記述することは得策ではありません。私は次の質問のための提案を必要とします。

• アプリとウィジェットをどのように設計したらよいでしょうか。別のAngularJSモジュールを持つべきか、各ウィジェットはメインモジュールへのディレクティブであるべきでしょうか。
• ウィジェットをディレクティブとして設計する場合、ディレクティブ内の依存関係を定義する方法はありますか。例えば、私のディレクティブは、その実装でng-calenderを使用することを言うために？
• 各ウィジェットを個別のモジュールとして設計する場合、ウィジェットモジュールをメインモジュールへの依存関係として動的に追加する方法はありますか?
• コントローラはどのように設計すればよいのでしょうか?
• 同じタイプの複数のウィジェットがビューにある場合、どのように状態（スコープ）を分離すればよいですか？
• AngularJSで再利用可能なウィジェットを設計するためのベストプラクティスはありますか？

EDIT

役に立つ参考資料です。

• ocLazyLoad - AngularJSのための素晴らしい遅延ロードライブラリ。
• シードプロジェクト - モジュール + ルート変更時のレイジーローディング (ES6, systemjs, ocLazyLoad)
• AngularJSでのレイジーローディング
• AngularJSとRequireJSによるコントローラとビューの動的なロード
• アプリケーションのブートストラップ後に RequireJS を使用して AngularJS コンポーネントをロードする。
• AngularJSリソースの遅延ロードに関するデモプロジェクトはGitHubにあります。
• ロードオンデマンドプロジェクト
• 必要な場合のみ、モジュールを動的にインジェクトする
• Angularの別の遅延ロードの記事
• 大規模なAngularJSとJavaScriptアプリケーションにおけるコード構成

どのように解決するのですか？

これらは一般的なアドバイスです。

アプリとウィジェットをどのように設計したらよいでしょうか。別のAngularJSモジュールを持つべきでしょうか、それとも各ウィジェットはメインモジュールへのディレクティブにすべきでしょうか。

何百ものウィジェットを話しているのですから、いくつかのモジュールに分割するのは自然なことだと思います。いくつかのウィジェットは、他のウィジェットよりも共通点が多いかもしれません。あるものは非常に一般的で他のプロジェクトに適合するかもしれませんし、他のものはより特殊です。

ウィジェットをディレクティブとして設計する場合、ディレクティブの中で依存関係を定義する方法はありますか? 例えば、私のディレクティブは、その実装でng-calenderを使用すると言うことですか？

他のモジュールへの依存は、モジュールレベルで行われますが、モジュール A がモジュール B と A と B は、モジュール C . ディレクティブは、Angularでウィジェットを作成するための自然な選択です。ディレクティブが他のディレクティブに依存する場合、それらを同じモジュールで定義するか、モジュールレベルで依存関係を作成します。

各ウィジェットを個別のモジュールとして設計する場合、ウィジェットモジュールをメインモジュールの依存関係として動的に追加する方法はありますか？

なぜこのようなことをしたいのか、その方法はよくわかりません。ディレクティブとサービスは、Angularで使用される前に初期化されることはありません。もし、巨大なディレクティブ（ウィジェット）のライブラリを持っていて、それらのうちのいくつかを使うだろうが、すべてではないことがわかっている場合、アプリケーションが初期化されるときにどれが使われるかがわからない場合、モジュールがロードされた後に実際にディレクティブを "lazy load" することが可能です。以下に例を示します。 ここで

利点は、必要な前にスクリプトを読み込む必要がないので、コードがたくさんあっても、アプリケーションを速く読み込むことができることです。デメリットは、新しいディレクティブが最初にロードされるときに、かなり遅延が発生する可能性があることです。

どのようにコントローラを設計すればよいのでしょうか?

ウィジェットには、おそらく独自のコントローラが必要でしょう。コントローラは一般的に小さくあるべきで、もし大きくなったら、サービスに適した機能があるかどうか考えることができます。

ビューに同じ種類のウィジェットが複数ある場合、どのように状態（スコープ）を分離すればよいですか？

スコープ変数を必要とするウィジェットは、間違いなく独自の分離されたスコープを持つべきです ( scope:{ ... } ディレクティブの設定) を持つべきです。

AngularJSで再利用可能なウィジェットを設計するためのベストプラクティスはありますか？

スコープを分離し、依存関係を必要最低限に抑える。 AngularのベストプラクティスについてのMiskoのビデオを見てください。

Brian Fordもまた Angularで巨大なアプリケーションを書く