webentwicklung-frage-antwort-db.com.de

Was ist eine AngularJS-Direktive?

Ich habe ziemlich viel Zeit damit verbracht, die AngularJS-Dokumentation und einige 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 Direktive 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, für Ihre Anwendung spezifische HTML-Syntax erfinden.

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. Auf diese Weise können Direktiven das Verhalten registrieren oder das DOM transformieren.

Und es gibt eine Reihe von Vorträgen über Direktiven, die ironischerweise davon ausgehen, dass das Publikum bereits versteht, was sie sind.

Wäre jemand in der Lage, zur Veranschaulichung eine genaue Definition einer Richtlinie anzubieten, die Folgendes erklärt:

  1. Was es ist (siehe das klare Definition von jQuery als Beispiel)
  2. Welche praktischen Probleme und Situationen sollen angesprochen werden?
  3. Welches Entwurfsmuster verkörpert es oder alternativ, wie es in die vorgebliche MVC/ MVW Mission von AngularJS passt.
178
tohster

Vielleicht wäre eine wirklich einfache und anfängliche Definition für angular Direktiven)

AngularJS-Direktiven (ng-Direktiven) sind HTML-Attribute mit dem Präfix ng (ng-model, ng-app, ng-repeat, ng-bind), die von Angular zur Erweiterung von HTML verwendet werden. (- von: W3schools angular Tutorial )

Einige Beispiele hierfür wären

Die Direktive ng-app definiert eine AngularJS-Anwendung.

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

Die Anweisung 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>

Sehen Sie sich dieses Tutorial an, 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.

11
jplozgom

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

Es gibt Direktiven, mit denen Sie komplexere Komponenten (Widgets) mit der richtigen Semantik erstellen können. Schauen Sie sich einfach das Beispiel der Anweisungen an - sie definieren den Registerkartenbereich (was in normalem HTML natürlich nicht gültig ist). Es ist intuitiver als die Verwendung von div-s oder spans, um eine Struktur zu erstellen, die dann so gestaltet wird, dass sie so aussieht eine Registerkarte ist.

4
WTK

In AngularJS-Direktiven sind HTML-Markierungen für ein HTML-DOM-Element wie ein Attribut (Einschränkung A), ein Elementname (Einschränkung E), ein Kommentar (Einschränkung M) oder eine CSS-Klasse (Einschränkung C), die AngularJS den HTML-Compiler ($) mitteilen compile), 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.

3
Vivek Panday

Die Homepage macht dies sehr deutlich: Wenn Sie im letzten Abschnitt den Mauszeiger über die Registerkarten halten:

Wir haben das Vokabular von HTML um ein benutzerdefiniertes tabs - Element erweitert. Das tabs abstrahiert die komplexe HTML-Struktur und das Verhalten, die zum Rendern von Registerkarten erforderlich sind. Das Ergebnis ist eine besser lesbare Ansicht und eine sehr einfach 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;
        }

So können Sie HTML-Elemente erfinden, d. H. tabs und angular das Rendern dieser Elemente handhaben lassen.

2
raam86