Was ist eine AngularJS-Direktive?

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 .

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.

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.

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 .

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.

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.