80

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

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

編集

参考資料:

4

2 に答える 2

60

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

アプリとウィジェットをどのように設計する必要がありますか?個別の AngularJS モジュールを用意する必要がありますか?それとも、各ウィジェットをメイン モジュールへのディレクティブにする必要がありますか?

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

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

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

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

なぜこれをやりたいのか、どうすればいいのかわかりません。ディレクティブとサービスは、Angular で使用される前に初期化されません。ディレクティブ (ウィジェット) の巨大なライブラリがあり、すべてではなく一部を使用する可能性が高いことがわかっている場合でも、アプリケーションが初期化されたときにどのディレクティブが使用されるかがわからない場合は、実際に「遅延」することができます。モジュールがロードされた後にディレクティブをロードします。ここに例を作成しました

利点は、必要になる前にスクリプトをロードする必要がないため、大量のコードがある場合でもアプリケーションを高速にロードできることです。欠点は、新しいディレクティブが最初に読み込まれるときにかなりの遅延が発生する可能性があることです。

コントローラーをどのように設計すればよいですか - おそらくウィジェットごとに1つのコントローラーですか?

ウィジェットにはおそらく独自のコントローラーが必要です。コントローラーは一般的に小さくする必要があります。コントローラーが大きくなった場合は、サービスにより適した機能があるかどうかを検討できます。

ビューに同じタイプのウィジェットが複数ある場合、状態 (スコープ) をどのように分離すればよいですか?

スコープ変数を必要とするウィジェットは、間違いなく独自の分離スコープ (scope:{ ... }ディレクティブ構成内) を持つ必要があります。

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

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

Brian Ford は、Angular で巨大なアプリケーションを作成することについての記事も書いています。

于 2013-05-29T16:41:11.027 に答える