Was ist eine AngularJS-Direktive?

181

Ich habe ziemlich viel Zeit damit verbracht, die AngularJS-Dokumentation und mehrere Tutorials durchzulesen, und ich war ziemlich überrascht, wie unnahbar die Dokumentation ist.

Ich habe eine einfache, beantwortbare Frage, die auch für andere nützlich sein kann, die AngularJS lernen möchten:

Was ist eine AngularJS-Direktive?

Es sollte irgendwo eine einfache, genaue Definition einer Richtlinie geben, aber die AngularJS-Website bietet diese überraschend nutzlosen Definitionen:

Auf der Homepage :

Direktiven sind eine einzigartige und leistungsstarke Funktion, die in AngularJS verfügbar ist. Mit Direktiven können Sie eine neue HTML-Syntax erfinden, die für Ihre Anwendung spezifisch ist.

In der Entwicklerdokumentation :

Direktiven sind eine Möglichkeit, HTML neue Tricks beizubringen. Während der DOM-Kompilierung werden Direktiven mit dem HTML-Code abgeglichen und ausgeführt. Dadurch können Anweisungen das Verhalten registrieren oder das DOM transformieren.

Und es gibt eine Reihe von Gesprächen über Richtlinien, die ironischerweise davon ausgehen, dass das Publikum bereits versteht, was sie sind.

Wäre jemand in der Lage, als eindeutige Referenz eine genaue Definition einer Richtlinie anzubieten, die erklärt:

  1. Was es ist (siehe die klare Definition von jQuery als Beispiel)
  2. Welche praktischen Probleme und Situationen sollen angegangen werden?
  3. Welches Designmuster es verkörpert oder alternativ, wie es in die angebliche MVC / MVW- Mission von AngularJS passt .
tohster
quelle
2
Sie hatten mich bei ... siehe die klare Definition von jQuery als Beispiel.
Joshuamabina
Ich bin mir nicht sicher, wie es 2012 bei Stack Overflow war, aber ich habe diese Frage gerade überarbeitet und das Tag "Angular-Directive" hinzugefügt. Die Tag-Informationen geben tatsächlich eine ziemlich klare Definition. Außerdem habe ich festgestellt, dass ich das zweite Zitat in den Entwicklerdokumenten nicht finden kann…
user4642212

Antworten:

142

Was ist das (siehe die klare Definition von jQuery als Beispiel)?

Eine Direktive ist im Wesentlichen eine Funktion , die ausgeführt wird, wenn der Angular-Compiler sie im DOM findet. Die Funktion (en) können fast alles, weshalb ich denke, dass es ziemlich schwierig ist zu definieren, was eine Direktive ist. Jede Direktive hat einen Namen (wie ng-repeat, tabs, make-up-your-own) und jede Direktive bestimmt, wo sie verwendet werden kann: Element, Attribut, Klasse, in einem Kommentar.

Eine Direktive hat normalerweise nur eine (Post-) Link-Funktion. Eine komplizierte Direktive könnte eine Kompilierungsfunktion, eine Vorverknüpfungsfunktion und eine Nachverknüpfungsfunktion haben.

Welche praktischen Probleme und Situationen sollen angegangen werden?

Das Mächtigste, was Direktiven tun können, ist, HTML zu erweitern. Ihre Erweiterungen sind eine domänenspezifische Sprache ( Domain Specific Language, DSL) zum Erstellen Ihrer Anwendung. Wenn Ihre Anwendung beispielsweise eine Online-Shopping-Site ausführt, können Sie HTML um Direktiven für "Warenkorb", "Gutschein", "Sonderangebote" usw. erweitern - unabhängig davon, welche Wörter, Objekte oder Konzepte in der ". Online-Shopping-Domain statt "div" und "span" (wie bereits erwähnt @WTK).

Direktiven können auch HTML komponieren - gruppieren Sie eine Reihe von HTML in eine wiederverwendbare Komponente. Wenn Sie ng-include verwenden, um viel HTML abzurufen, ist es wahrscheinlich an der Zeit, die Anweisungen umzugestalten.

Welches Entwurfsmuster verkörpert es oder wie passt es alternativ in die angebliche MVC / MVW-Mission von AngularJs?

In Direktiven können Sie das DOM bearbeiten und DOM-Ereignisse abfangen. Aus diesem Grund erhalten die Kompilierungs- und Verknüpfungsfunktionen der Direktive beide das "Element" als Argument. Sie können

  • Definieren Sie eine Reihe von HTML-Code (dh eine Vorlage), um die Direktive zu ersetzen
  • Ereignisse an dieses Element (oder seine untergeordneten Elemente) binden
  • Hinzufügen / Entfernen einer Klasse
  • Ändern Sie den Wert von text ()
  • Achten Sie auf Änderungen an Attributen, die im selben Element definiert sind (tatsächlich werden die Werte der Attribute überwacht - dies sind Bereichseigenschaften, daher überwacht die Direktive das "Modell" auf Änderungen).
  • etc.


In HTML haben wir Dinge wie <a href="...">, <img src="...">, <br>, <table><tr><th>. Wie würden Sie beschreiben, was a, href, img, src, br, table, tr und th sind? Das ist eine Richtlinie.

Mark Rajcok
quelle
2
Mark, danke. Ich denke, das ist klar und wahrscheinlich der genauen Antwort am nächsten. Ich denke, Direktiven sind immer an HTML-Tags gebunden, oder? Vielleicht ist es genauer zu sagen, dass eine Direktive eine Funktion ist, die an ein HTML-Tag gebunden ist. Auf diese Weise kann die HTML-Sprache deklarativ erweitert werden.
Tohster
Nun, eine Direktive kann in einem Kommentar verwendet werden, sodass nicht alle Direktiven an ein HTML-Tag gebunden sein müssen. ZB<!-- directive: my-directive exp -->
Mark Rajcok
Mark, wäre das eine unkonventionelle Verwendung einer Richtlinie? dh Direktiven werden herkömmlicherweise zur Erweiterung von HTML verwendet und dienen dazu.
tohster
9
OK, ich habe jetzt ein besseres Verständnis. Eine Möglichkeit, darüber nachzudenken, ist: 1. DSLs stellen normalerweise Syntaxbäume dar. 2. Das HTML-DOM ist ein DSL-Syntaxbaum, aber es ist starr: Die Tags sind meist starr gestaltet und zweckmäßig und nicht erweiterbar. 3. AngularJS und der Direktivenmechanismus machen das HTML-DOM flexibler, indem Entwickler benutzerdefinierte Baumknoten erstellen können. Diese Knoten können neue Verhaltensweisen oder Aggregationen vorhandener Verhaltensweisen (
Unterbäume
1
@ MarkRajcok Ich habe Probleme mit deinem letzten Absatz. Ist schlicht <div></div>eine Richtlinie? Du sagtest ja. Hier gibt es jedoch keine Dekoration (über Element, Klasse, Kommentar, Attribut). Die Leute hier sagen, dass dies neue Markierungen für ein HTML-DOM sind . Könntest Du das erläutern ? (Ich spreche nicht über die Ursache, wo Sie eine Direktive für ein einfaches Element wie erstellen können <div>)
Royi Namir
11

Vielleicht wäre eine wirklich einfache und anfängliche Definition für Winkelanweisungen

AngularJS-Direktiven (ng-Direktiven) sind HTML-Attribute mit einem ng-Präfix (ng-Modell, ng-App, ng-Repeat, ng-Bind), das von Angular zum Erweitern von HTML verwendet wird. ( aus: W3schools eckiges Tutorial )

Einige Beispiele hierfür wären

Die ng-app- Direktive definiert eine AngularJS-Anwendung.

Die Direktive ng-model bindet den Wert von HTML-Steuerelementen (Eingabe, Auswahl, Textbereich) an Anwendungsdaten.

Die Direktive ng-bind bindet Anwendungsdaten an die HTML-Ansicht.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Überprüfen Sie dieses Tutorial, zumindest für mich war es eine der besten Einführungen in Angular. Ein vollständigerer Ansatz wäre alles, was @ mark-rajcok zuvor gesagt hat.

jplozgom
quelle
4

In der Dokumentation sind Direktiven Strukturen, die Sie schreiben können, die anglejs analysiert, um Objekte und Verhaltensweisen zu erstellen. Mit anderen Worten, es handelt sich um eine Vorlage, in der Sie eine Mischung aus beliebigen Knoten und Pseudo-Javascript und Platzhaltern für Daten verwenden, um die Absichten auszudrücken, wie Ihr Widget (Komponente) ist strukturiert, wie es sich verhält und wie es mit Daten gespeist wird. Angularjs läuft dann gegen diese Anweisungen , um sie in funktionierenden HTML / Javascript-Code zu übersetzen.

Anweisungen dienen dazu, komplexere Komponenten (Widgets) mithilfe der richtigen Semantik zu erstellen. Schauen Sie sich einfach das eckige Beispiel für Direktiven an - sie definieren den Registerkartenbereich (der in normalem HTML natürlich nicht gültig ist). Es ist intuitiver als die Verwendung von Divs oder Spannen, um eine Struktur zu erstellen, die dann so gestaltet ist, dass sie wie ein Registerkartenfenster aussieht .

WTK
quelle
Ich fügte hinzu, was ich für etwas weniger technische Erklärung halte.
raam86
1
Danke das ist sehr hilfreich. Vielleicht kann ich es mir als eine Art dynamische Vorlage vorstellen (ähnlich einer Klasse in der OO-Programmierung), die eine Komponente kapselt, sie durch Eigenschaften und Verhaltensweisen beschreibt, instanziierbar ist und sich gegenüber dem DOM ausdrücken kann? Und der Grund, warum es existiert (im Vergleich zu Javascript-Objekten oder HTML-Vorlagen), besteht darin, dass HTML-Tags dynamischere, objektähnlichere Verhaltensweisen annehmen können, damit sie in der OO-Typ-Programmierung manipulierbar werden können.
Tohster
Ja und nein. Ich würde nicht sagen, dass der Grund, warum Direktiven existieren, viel damit zu tun hat, dass sie in der OO-Programmierung manipulierbar sind. Tatsächlich fühlt sich der gesamte Angularjs-Ansatz für das Framework stark mit HTML- und beliebigen DOM-Knotenattributen verbunden, anstatt OO-Javascript-Code zu schreiben. Ich bekomme diese Stimmung, wenn ich mir alle Beispiele ansehe, wie Angularjs alltägliche Probleme löst. Ich würde sagen, dass der Hauptgrund für Direktiven darin besteht, Verhaltensweisen und Daten in eine semantisch strukturierte Komponente einzubetten.
WTK
3

In AngularJS-Direktiven sind HTML-Zeichen für ein HTML-DOM-Element wie ein Attribut (Restrict-A), ein Elementname (Restrict-E), ein Kommentar (Restrict-M) oder eine CSS-Klasse (Restrict-C), die den HTML-Compiler von AngularJS ($) angeben kompilieren), um ein bestimmtes Verhalten für dieses DOM-Element auszuführen oder sogar das DOM-Element und seine untergeordneten Elemente zu transformieren. Einige Beispiele sind ng-bind, ng-hide / show usw.

Vivek Panday
quelle
2

Die Homepage ist darüber sehr klar: Wenn Sie im letzten Abschnitt mit der Maus über die Registerkarten fahren:

Wir haben das HTML-Vokabular um ein benutzerdefiniertes tabs Element erweitert. Das tabsabstrahiert die komplexe HTML-Struktur und das Verhalten, die zum Rendern von Registerkarten erforderlich sind. Das Ergebnis ist eine besser lesbare Ansicht und eine sehr leicht wiederverwendbare Syntax. "

Dann in der nächsten Registerkarte:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

Sie können also HTML-Elemente erfinden, dh tabsdas Rendern dieser Elemente durch Winkel ausführen lassen.

raam86
quelle
2
Danke für die schnelle Antwort! Der Zweck einer Direktive besteht also darin, das HTML-Vokabular durch die Erstellung benutzerdefinierter Tags und Attribute zu erweitern. Das scheint ziemlich mächtig zu sein, obwohl es einen viel breiteren Problembereich als "MVW" anzusprechen scheint. Übrigens mögen andere anderer Meinung sein, aber ich würde denken, dass es nicht gerade eine " sehr klare "Definition, was eine Richtlinie ist. Trotzdem schätzen Sie die schnelle Reaktion sehr.
Tohster
Ja! Sie können diese Geige überprüfen, die sie gemacht haben. Das tatsächliche HTML unterscheidet sich von dem im HTML-Bereich.
raam86