サービス、ディレクティブ、モジュールの違いは何ですか？

たくさんのドキュメントを読んでいますが、どんどん混乱しています。私は基本的に違いを理解できません

• サービス
• 指令
• モジュール

カスタムコンポーネントがたくさんあります。ディレクティブを使用していることもあれば、サービスを使用していることもあります。それは常にモジュールから始まります。誰かがこれらの3つのタイプの違いを例で説明できますか？

モジュールは、ディレクティブ、サービス、定数など、他の多くのものを結び付ける場所であると考えてください。モジュールを他のモジュールに挿入して、高度な再利用を実現できます。

Angularアプリを作成する場合、アプリケーションコード（テンプレートなし）であるトップレベルモジュールが存在します。

サービスは主にコントローラー間で通信する方法ですが、あるサービスを別のサービスに注入することもできます。サービスはデータストアにアクセスする方法としてよく使用され、人々はngResourceなどのAngular APIをラップします。この手法は、テスト（特にモック）を非常に簡単にするので便利です。認証、ロギングなど、他のことを実行するためのサービスを持つことができます。

ディレクティブは、ウィジェットの作成や、jqueryプラグインなどの既存のもののラップに使用されます。既存のプラグインをラップすることは難しい場合があります。これを行う理由は、プラグインとAngularの間の双方向のデータバインディングを確立するためです。双方向のデータバインディングが必要ない場合は、それらをラップする必要はありません。

ディレクティブは、DOM操作を行ったり、DOMイベントをキャッチしたりするための場所でもあります。コントローラーまたはサービスでDOM関連のことを行うべきではありません。ディレクティブの作成はかなり複雑になる可能性があります。私見、私はあなたが探していることを実行できる何かのために最初にAPIを見るか、またはAngularのGoogleグループに助言を求めることをお勧めします。

私自身の個人的なメモから（主にドキュメント、Googleグループの投稿、SOの投稿からのスニペット）：

モジュール

• 名前空間/グループサービス、ディレクティブ、フィルター、構成情報、および初期化コードへの方法を提供する
• グローバル変数を回避するのに役立ちます
• $ injectorを設定するために使用され、モジュール（またはモジュール全体）によって定義されたものを他の場所に注入できるようにします（依存性注入に関するもの）
• AngularモジュールはCommonJSやRequire.jsとは関係ありません。AMDまたはRequire.jsモジュールとは対照的に、Angularモジュールはスクリプトのロード順序または遅延スクリプトフェッチの問題を解決しようとしません。これらの目標は直交しており、両方のモジュールシステムが並んで生活し、それらの目標を達成することができます（したがって、ドキュメントが主張します）。

サービス

• シングルトンなので、定義する各サービスのインスタンスは1つだけです。シングルトンとして、それらはスコープの影響を受けないため、複数のビュー/コントローラー/ディレクティブ/その他のサービスからアクセス（共有）できます。
• 次の場合にカスタムサービスを作成できます（おそらくそうする必要があります）
  • 2つ以上のものが同じデータにアクセスする必要がある（ルートスコープを使用しない）か、データを適切にカプセル化したい
  • たとえば、Webサーバーとのやり取りをカプセル化したい（サービスで$ resourceまたは$ httpを拡張する）
• 組み込みサービスは「$」で始まります。
• サービスを使用するには、依存関係（コントローラー、別のサービス、またはディレクティブなど）に依存関係の注入が必要です。

ディレクティブ（以下の項目のいくつかは基本的に同じことを言いますが、わずかに異なる表現が時々役立つことがわかりました）

• モデルの状態が変化したときにDOMを更新する責任があります
• HTML語彙を拡張する= HTMLに新しいトリックを教える。
  Angularには、ウェブアプリケーションの構築に役立つ組み込みのディレクティブセット（ng- *など）が付属していますが、独自のディレクティブを追加して、HTMLを宣言的なドメイン固有言語（DSL）に変えることができます。たとえば、Angularホームページのデモ「コンポーネントの作成」の<tabs>要素と<pane>要素。
  • 非自明な組み込みディレクティブ（「ng」で始まらないため）：a、form、input、script、select、textarea。Angularでは、これらはすべて通常よりも多くのことをします！
• ディレクティブを使用すると、「HTMLをコンポーネント化」できます。多くの場合、ディレクティブはng-includeよりも優れています。たとえば、主にデータバインディングを使用して大量のHTMLを記述し始めたら、そのHTMLを（再利用可能な）ディレクティブにリファクタリングします。
• Angularコンパイラでは、任意のHTML要素または属性に動作を関連付けたり、カスタム動作で新しいHTML要素または属性を作成したりすることもできます。Angularはこれらの動作拡張ディレクティブを呼び出します。
  • すべてを煮詰めると、ディレクティブは、AngularコンパイラがDOMでそれを検出したときに実行される関数にすぎません。
• ディレクティブは、属性、要素名、クラス名、またはコメント内の名前の存在によってトリガーされる動作またはDOM変換です。ディレクティブは、（HTML）コンパイルプロセスで特定のHTMLコンストラクトが検出されたときにトリガーされる動作です。ディレクティブは、要素名、属性、クラス名、およびコメントに配置できます。
  • ほとんどのディレクティブは属性のみに制限されています。たとえば、DoubleClickはカスタム属性ディレクティブのみを使用します。
• angularjsディレクティブとは何ですか？も参照してください。

Angularのもの（依存性注入のもの）をモジュールに定義してグループ化します。
データを共有し、Webサーバーの相互作用をサービスにラップします。
HTMLを拡張し、ディレクティブでDOM操作を行います。
また、コントローラを可能な限り「薄く」します。