Was ist eine AngularJS-Direktive?
Eine Direktive in AngularJS ist ein Befehl, der HTML neue Funktionen verleiht. Wenn Angular den HTML-Code durchläuft, werden zuerst die Anweisungen auf der Seite gefunden und dann die HTML-Seite entsprechend analysiert.
Ein einfaches Beispiel für eine AngularJS-Direktive, die wir in früheren Kapiteln gesehen haben, ist die "ng-model-Direktive". Diese Direktive wird verwendet, um unser Datenmodell an unsere Ansicht zu binden.
Hinweis: Sie können einen einfachen Winkelcode in einer HTML-Seite mit den Anweisungen ng-init, ng-repeat und ng-model verwenden, ohne dass Controller erforderlich sind. Die Logik für diese Anweisungen befindet sich in der Datei Angular.js, die von Google bereitgestellt wird. Controller sind die Winkelprogrammierkonstrukte der nächsten Ebene, die Geschäftslogik ermöglichen. Wie bereits erwähnt, ist es jedoch nicht zwingend erforderlich, einen Controller zu haben, damit eine Anwendung eine Winkelanwendung ist.
In diesem Tutorial lernen Sie:
- So erstellen Sie eine Richtlinie
- ng-app
- ng-init
- ng-Modell
- ng-wiederholen
So erstellen Sie eine Richtlinie
Wie wir in der Einleitung definiert haben, sind AngularJS-Direktiven eine Möglichkeit, die Funktionalität von HTML zu erweitern.
In AngularJS sind 4 Anweisungen definiert.
Nachfolgend finden Sie eine Liste der AngularJS-Anweisungen sowie Beispiele, die zur Erläuterung der einzelnen Anweisungen bereitgestellt werden.
1) ng-app
Dies wird verwendet, um eine Angular.JS-Anwendung zu initialisieren. Wenn diese Anweisung in einer HTML-Seite vorhanden ist, teilt sie Angular grundsätzlich mit, dass es sich bei dieser HTML-Seite um eine angular.js-Anwendung handelt.
Das folgende Beispiel zeigt, wie die ng-app-Direktive verwendet wird. In diesem Beispiel zeigen wir einfach, wie eine normale HTML-Anwendung zu einer AngularJS-Anwendung gemacht wird.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Code Erläuterung:
- Die Direktive "ng-app" wird unserem div-Tag hinzugefügt, um anzuzeigen, dass es sich bei dieser Anwendung um eine angle.js-Anwendung handelt. Beachten Sie, dass die ng-app-Direktive auf jedes Tag angewendet werden kann, sodass sie auch in das body-Tag eingefügt werden kann.
- Da wir diese Anwendung als Angular.js-Anwendung definiert haben, können wir jetzt die Angular.js-Funktionalität verwenden. In unserem Fall verwenden wir Ausdrücke, um einfach 2 Zeichenfolgen zu verketten.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Die Ausgabe zeigt deutlich die Ausgabe des Ausdrucks, die nur möglich war, weil wir die Anwendung als AngularJS-Anwendung definiert haben.
2) ng-init
Dies wird verwendet, um Anwendungsdaten zu initialisieren. Manchmal benötigen Sie möglicherweise lokale Daten für Ihre Anwendung. Dies kann mit der Anweisung ng-init erfolgen.
Das folgende Beispiel zeigt, wie die Direktive ng-init verwendet wird.
In diesem Beispiel erstellen wir eine Variable mit dem Namen "TutorialName" mithilfe der Anweisung ng-init und zeigen den Wert dieser Variablen auf der Seite an.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Code Erläuterung:
- Die ng-init-Direktive wird unserem div-Tag hinzugefügt, um eine lokale Variable namens "TutorialName" zu definieren. Der dafür angegebene Wert ist "AngularJS".
- Wir verwenden Ausdrücke in AngularJs, um die Ausgabe des Variablennamens "TutorialName" anzuzeigen, der in unserer ng-init-Direktive definiert wurde.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
In der Ausgabe
- Das Ergebnis zeigt deutlich die Ausgabe des Ausdrucks, der die Zeichenfolge "AngularJS" enthält. Dies ist darauf zurückzuführen, dass die Zeichenfolge "AngularJS" der Variablen 'TutorialName' im Abschnitt ng-init zugewiesen wurde.
3) ng-Modell
Und schließlich haben wir die Direktive ng-model, mit der der Wert eines HTML-Steuerelements an Anwendungsdaten gebunden wird. Das folgende Beispiel zeigt, wie die Direktive ng-model verwendet wird.
In diesem Beispiel ist
- Wir werden 2 Variablen erstellen, die als "Menge" und "Preis" bezeichnet werden. Diese Variablen werden an 2 Texteingabesteuerelemente gebunden.
- Wir werden dann den Gesamtbetrag basierend auf der Multiplikation von Preis- und Mengenwerten anzeigen.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Code Erläuterung:
- Die ng-init-Direktive wird unserem div-Tag hinzugefügt, um 2 lokale Variablen zu definieren. eine heißt "Menge" und die andere ist "Preis".
- Jetzt verwenden wir die ng-model-Direktive, um die Textfelder "Personen" und "Registrierungspreis" an unsere lokalen Variablen "Menge" bzw. "Preis" zu binden.
- Schließlich zeigen wir die Summe über einen Ausdruck, der die Multiplikation der Mengen- und Preisvariablen darstellt.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
- Die Ausgabe zeigt deutlich die Multiplikation der Werte für Personen und Registrierungspreis.
Wenn Sie nun zu den Textfeldern gehen und den Wert des Personen- und Registrierungspreises ändern, ändert sich die Gesamtsumme automatisch.
- Die obige Ausgabe zeigt nur die Leistung der Datenbindung in eckigen Js, die mit der Verwendung der ng-Modell-Direktive erreicht wird.
4) ng-wiederholen
Dies wird verwendet, um ein HTML-Element zu wiederholen. Das folgende Beispiel zeigt, wie die Anweisung ng-repeat verwendet wird.
In diesem Beispiel ist
- Wir werden ein Array von Kapitelnamen in einer Array-Variablen und haben
- Verwenden Sie dann die Anweisung ng-repeat, um jedes Element des Arrays als Listenelement anzuzeigen
Event Registration Guru99 Global Event
- {{names}}
Code Erläuterung:
- Die ng-init-Direktive wird unserem div-Tag hinzugefügt, um eine Variable namens "Kapitel" zu definieren, bei der es sich um eine Array-Variable handelt, die 3 Zeichenfolgen enthält.
- Das ng-repeat-Element wird verwendet, indem eine Inline-Variable mit dem Namen "names" deklariert und jedes Element im Kapitel-Array durchlaufen wird.
- Schließlich zeigen wir den Wert der lokalen Inline-Variablen 'names'.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
- Die obige Ausgabe zeigt nur, dass die Anweisung ng-repeat jeden Wert im Array namens "Kapitel" verwendet und HTML-Listenelemente für jedes Element im Array erstellt hat.
Zusammenfassung
- Direktiven werden verwendet, um die Funktionalität von HTML zu erweitern. Angular bietet eingebaute Anweisungen wie
- ng-app - Hiermit wird eine Winkelanwendung initialisiert.
- ng-init - Hiermit werden Anwendungsvariablen erstellt
- ng-model - Hiermit werden HTML-Steuerelemente an Anwendungsdaten gebunden
- ng-repeat - Wird verwendet, um Elemente mit einem Winkel zu wiederholen.