Was ist der Unterschied zwischen Service, Direktive und Modul?

Ich habe viele Dokumente gelesen und bin immer verwirrter. Ich kann den Unterschied zwischen a im Grunde nicht herausfinden

• Bedienung
• Richtlinie
• Modul

Ich sehe viele benutzerdefinierte Komponenten. Manchmal verwenden sie Anweisungen, manchmal Dienste. Es beginnt immer mit einem Modul. Kann jemand anhand eines Beispiels erklären, was der Unterschied zwischen diesen drei Typen ist?

Stellen Sie sich ein Modul als einen Ort vor, an dem Sie eine Reihe anderer Dinge wie Direktiven, Dienste, Konstanten usw. verkabeln können. Module können in andere Module injiziert werden, wodurch Sie einen hohen Grad an Wiederverwendung erhalten.

Wenn Sie eine eckige App schreiben, haben Sie ein Modul der obersten Ebene, das Ihr Anwendungscode ist (ohne Vorlagen).

Dienste sind hauptsächlich eine Möglichkeit zur Kommunikation zwischen Controllern. Sie können jedoch einen Dienst in einen anderen einfügen. Dienste werden häufig verwendet, um zu Ihren Datenspeichern zu gelangen, und die eckigen APIs wie ngResource werden von Personen umbrochen. Diese Technik ist nützlich, da sie das Testen (insbesondere das Verspotten) ziemlich einfach macht. Sie können Dienste für andere Aufgaben wie Authentifizierung, Protokollierung usw. haben.

Direktiven werden zum Erstellen von Widgets oder zum Umschließen vorhandener Elemente wie JQuery-Plugins verwendet. Das Umschließen vorhandener Plugins kann eine Herausforderung sein. Der Grund dafür ist, eine bidirektionale Datenbindung zwischen den Plugins und Angular herzustellen. Wenn Sie keine bidirektionale Datenbindung benötigen, müssen Sie diese nicht umbrechen.

Eine Direktive ist auch ein Ort, an dem DOM-Manipulationen durchgeführt, DOM-Ereignisse abgefangen usw. werden. Sie sollten keine DOM-bezogenen Aufgaben in Controllern oder Diensten ausführen. Das Erstellen von Anweisungen kann sehr komplex werden. IMHO empfehle ich, zuerst die API nach etwas zu durchsuchen, das das tun kann, wonach Sie suchen, oder die Google-Gruppe von Angular um Rat zu fragen.

Aus meinen persönlichen Notizen (meistens Ausschnitte aus den Dokumenten, Google-Gruppenposts und SO-Posts):

Module

• bieten eine Möglichkeit zu Namespace- / Gruppendiensten, Anweisungen, Filtern, Konfigurationsinformationen und Initialisierungscode
• Vermeiden Sie globale Variablen
• werden verwendet, um den $ injor zu konfigurieren, sodass die vom Modul (oder das gesamte Modul selbst) definierten Dinge an anderer Stelle injiziert werden können (Dependency Injection stuff).
• Winkelmodule sind nicht mit CommonJS oder Require.js verbunden. Im Gegensatz zu AMD- oder Require.js-Modulen versuchen Angular-Module nicht, das Problem der Reihenfolge beim Laden von Skripten oder des verzögerten Abrufs von Skripten zu lösen. Diese Ziele sind orthogonal und beide Modulsysteme können nebeneinander leben und ihre Ziele erfüllen (so behaupten die Dokumente).

Dienstleistungen

• sind Singletons, daher gibt es nur eine Instanz jedes von Ihnen definierten Dienstes. Als Singletons sind sie nicht von Bereichen betroffen und können daher von mehreren Ansichten / Controllern / Anweisungen / anderen Diensten aufgerufen (gemeinsam genutzt) werden
• Sie können (und sollten wahrscheinlich) benutzerdefinierte Dienste erstellen, wenn
  • Zwei oder mehr Dinge benötigen Zugriff auf dieselben Daten (verwenden Sie nicht den Root-Bereich), oder Sie möchten Ihre Daten nur ordentlich kapseln
  • Sie möchten Interaktionen mit beispielsweise einem Webserver kapseln (erweitern Sie $ resource oder $ http in Ihrem Dienst).
• Integrierte Services beginnen mit '$'.
• Um einen Dienst zu verwenden, ist eine Abhängigkeitsinjektion von der abhängigen Person erforderlich (z. B. von der Steuerung oder einem anderen Dienst oder einer Direktive).

Richtlinien (einige der folgenden Punkte sagen im Wesentlichen dasselbe aus, aber ich habe festgestellt, dass manchmal ein etwas anderer Wortlaut sehr hilfreich ist)

• sind für die Aktualisierung des DOM verantwortlich, wenn sich der Status des Modells ändert
• HTML-Vokabular erweitern = HTML neue Tricks beibringen.
  Angular enthält eine Reihe integrierter Anweisungen (z. B. ng- * stuff), die zum Erstellen von Webanwendungen nützlich sind. Sie können jedoch eigene Anweisungen hinzufügen, sodass HTML in eine deklarative domänenspezifische Sprache (DSL) umgewandelt werden kann. ZB die Elemente <tabs> und <pane> auf der Angular-Homepage-Demo "Komponenten erstellen".
  • Nicht offensichtliche integrierte Anweisungen (da sie nicht mit "ng" beginnen): a, Formular, Eingabe, Skript, Auswahl, Textbereich. Unter Angular machen diese alle mehr als normal!
• Mit Direktiven können Sie "HTML komponieren". Richtlinien sind oft besser als ng-include. Wenn Sie beispielsweise anfangen, viel HTML mit hauptsächlich Datenbindung zu schreiben, überarbeiten Sie dieses HTML in (wiederverwendbare) Anweisungen.
• Mit dem Angular-Compiler können Sie jedem HTML-Element oder -Attribut Verhalten hinzufügen und sogar neue HTML-Elemente oder -Attribute mit benutzerdefiniertem Verhalten erstellen. Angular Anrufe diese Verhalten Erweiterungen Richtlinien .
  • Wenn Sie alles auf den Punkt bringen, ist eine Direktive nur eine Funktion, die ausgeführt wird, wenn der Angular-Compiler im DOM darauf stößt.
• Eine Direktive ist ein Verhalten oder eine DOM-Transformation, die durch das Vorhandensein eines Attributs, eines Elementnamens, eines Klassennamens oder eines Namens in einem Kommentar ausgelöst wird. Direktive ist ein Verhalten, das ausgelöst werden sollte, wenn beim Kompilierungsprozess (HTML) bestimmte HTML-Konstrukte auftreten. Die Anweisungen können in Elementnamen, Attributen, Klassennamen sowie Kommentaren platziert werden.
  • Die meisten Anweisungen sind nur auf Attribute beschränkt. Beispielsweise verwendet DoubleClick nur benutzerdefinierte Attributanweisungen.
• siehe auch Was ist eine Angularjs-Direktive?

Definieren und gruppieren Sie Winkeldinge (Abhängigkeitsinjektionsmaterial) in Modulen.
Daten austauschen und Webserver-Interaktion in Dienste einbinden.
Erweitern Sie HTML und führen Sie DOM-Manipulationen in Direktiven durch.
Und machen Sie Controller so "dünn" wie möglich.