AngularJS-Anweisungen: ng-init, ng-app, ng-model und ng-repeat
James Hartmann
โก Intelligente Zusammenfassung
AngularJS-Direktiven erweitern einfaches HTML um neue Verhaltensweisen. Die Marker ng-app, ng-init, ng-model und ng-repeat initialisieren eine Anwendung, initialisieren lokale Daten, binden Formularsteuerelemente an das Modell und klonen Elemente einmal pro Sammlungselement.
Was ist eine Direktive in AngularJS?
A Direktive In AngularJS ist `ng-model` ein Befehl, der HTML neue Funktionalitรคt hinzufรผgt. Beim Durchlaufen des HTML-Codes sucht AngularJS zunรคchst nach den Direktiven auf der Seite und parst die HTML-Seite anschlieรend entsprechend. Ein einfaches Beispiel fรผr eine AngularJS-Direktive, die wir bereits in frรผheren Kapiteln kennengelernt haben, ist die โng-model-Direktiveโ. Diese Direktive dient dazu, unser Datenmodell an unsere Ansicht zu binden.
Hinweis: Sie kรถnnen grundlegenden AngularJS-Code in einer HTML-Seite mit den Direktiven `ng-init`, `ng-repeat` und `ng-model` verwenden, ohne dass Controller erforderlich sind. Die Logik fรผr diese Direktiven befindet sich in der AngularJS-Datei, die von [Name der Bibliothek/des Frameworks] bereitgestellt wird. GoogleController sind die nรคchste Stufe der AngularJS-Programmierkonstrukte, die Geschรคftslogik ermรถglichen. Wie bereits erwรคhnt, ist es jedoch nicht zwingend erforderlich, dass eine Anwendung einen Controller besitzt, um eine AngularJS-Anwendung zu sein.
Aber wie kommt es, dass ein Browser eine solche Datei ausfรผhrt?
Wie AngularJS-Direktiven in HTML funktionieren
Wie wir in der Einleitung definiert haben, ist eine AngularJS-Direktive eine Mรถglichkeit, die Funktionalitรคt von HTMLBeim Laden der Seite durchlรคuft der AngularJS-Compiler das DOM, gleicht jedes Element mit den registrierten Direktiven ab und fรผgt das gefundene Verhalten hinzu.
AngularJS Das Programm enthรคlt Dutzende integrierte Direktiven sowie weitere, die Sie selbst registrieren kรถnnen. Die vier unten anhand von Beispielen erlรคuterten Direktiven โ ng-app, ng-init, ng-model und ng-repeat โ sind die, mit denen Anfรคnger zuerst in Berรผhrung kommen. Beachten Sie vor diesen Beispielen die vier Mรถglichkeiten, eine Direktive zu schreiben.
Welche vier Arten von AngularJS-Direktiven gibt es?
Eine Direktive ist nicht immer ein Attribut. Der AngularJS-Compiler kann sie anhand von Elementnamen, Attributnamen, Klassennamen oder Kommentaren identifizieren, und jede Direktive deklariert รผber ihren Namen, welche Formen sie akzeptiert. restrict Eigenschaft. Der Standardwert ist EAElement- und Attributsyntax funktionieren also beide, sofern nichts anderes angegeben ist. Der Wert ist besonders wichtig, wenn Sie eine eigene Direktive schreiben, da der Compiler alle Formen ignoriert, die durch den `restrict`-Wert ausgeschlossen werden.
| Wert einschrรคnken | Abgestimmt durch | Beispiel-Markup | Typische Verwendung |
|---|---|---|---|
| E | Elementname | Eigenstรคndige Blรถcke, die eine Vorlage besitzen | |
| A | Attribut | Hinzufรผgen von Verhalten zu einem bestehenden Element | |
| C | Klassenname | Legacy-Markup, das keine neuen Attribute aufnehmen kann | |
| M | Kommentar | Selten, wird aus Grรผnden der Abwรคrtskompatibilitรคt aufbewahrt. |
๐ก TIPP: Bevorzugen Sie die Element- und Attributsyntax. offizielle AngularJS-Direktivenreferenz Behandelt Klassen- und Kommentarformen als veraltete Optionen. Die folgenden Beispiele verwenden alle die Attributsyntax.
ng-App in AngularJS
Dies dient zur Initialisierung einer AngularJS-Anwendung. Wenn diese Direktive in einer HTML-Seite vorhanden ist, teilt sie AngularJS im Grunde mit, dass diese HTML-Seite eine AngularJS-Anwendung ist.
Beispiel fรผr ng-app
Das folgende Beispiel zeigt, wie man eine normale HTML-Anwendung in eine AngularJS-Anwendung umwandelt.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app=""> Tutorial Name : {{ "Angular" + "JS"}} </div> </body> </html>
โ ๏ธ Warnung: Die Anzeige behรคlt das Original bei chrset="UTF 8", genau wie verรถffentlicht. Das korrekte Attribut ist charset="UTF-8".
Code Erlรคuterung:
- Die โng-appโ-Direktive wird unserem div-Tag hinzugefรผgt, um anzuzeigen, dass es sich bei dieser Anwendung um eine AngularJS-Anwendung handelt. Beachten Sie, dass die ng-app-Direktive auf jedes beliebige Tag angewendet werden kann, also beispielsweise auch auf den body-Tag.
- Da wir diese Anwendung als AngularJS-Anwendung definiert haben, kรถnnen wir nun die AngularJS-Funktionalitรคt nutzen. In unserem Fall verwenden wir Ausdrรผcke, um einfach zwei Zeichenketten zu verketten.
Wenn der Code erfolgreich ausgefรผhrt wird, erscheint die unten stehende Ausgabe.
Ausgang:
Die Ausgabe zeigt deutlich das Ergebnis des Ausdrucks, was nur mรถglich war, weil wir die Anwendung als AngularJS-Anwendung definiert haben. Die nรคchste Direktive liefert ihre Daten.
ng-init in AngularJS
Dies dient zur Initialisierung von Anwendungsdaten. Gelegentlich benรถtigen Sie mรถglicherweise lokale Daten fรผr Ihre Anwendung; dies kann mit der ng-init-Direktive erfolgen.
Beispiel fรผr ng-init
In diesem Beispiel erstellen wir mithilfe der ng-init-Direktive eine Variable namens โTutorialNameโ und zeigen den Wert dieser Variablen auf der Seite an.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="TutorialName='Angular JS'"> Tutorial Name : {{ TutorialName}} </div> </body> </html>
Code Erlรคuterung:
- Die ng-init-Direktive wird zu unserem div-Tag hinzugefรผgt, um eine lokale Variable namens โTutorialNameโ zu definieren, und der ihr zugewiesene Wert ist โAngularJSโ.
- Wir verwenden Ausdrรผcke in AngularJS, um die Ausgabe der Variablen mit dem Namen โTutorialNameโ anzuzeigen, die in unserer ng-init-Direktive definiert wurde.
Wenn der Code erfolgreich ausgefรผhrt wird, erscheint die unten stehende Ausgabe.
Ausgang:
In der Ausgabe
- Das Ergebnis zeigt deutlich die Ausgabe des Ausdrucks, der den String โAngularJSโ enthรคlt. Dies ist darauf zurรผckzufรผhren, dass die Zeichenfolge โAngularJSโ der Variablen โTutorialNameโ im Abschnitt โng-initโ zugewiesen wurde.
Die nรคchste Anweisung sendet Daten vom Bildschirm zurรผck an das Modell.
ng-Modell in AngularJS
Und schlieรlich gibt es noch die ng-model-Direktive, mit der der Wert eines HTML-Steuerelements an Anwendungsdaten gebunden wird.
Beispiel eines NG-Modells
In diesem Beispiel
- Wir werden zwei Variablen namens โMengeโ und โPreisโ erstellen. Diese Variablen werden an zwei Texteingabesteuerelemente gebunden.
- Anschlieรend zeigen wir den Gesamtbetrag basierend auf der Multiplikation der Preis- und Mengenwerte an.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="quantity=1;price=5"> People : <input type="number" ng-model="quantity"> Registration Price : <input type="number" ng-model="price"> Total : {{quantity * price}} </div> </body> </html>
Code Erlรคuterung:
- Die ng-init-Direktive wird zu unserem div-Tag hinzugefรผgt, um zwei lokale Variablen zu definieren; Das eine heiรt โMengeโ und das andere โ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 das Gesamtergebnis รผber einen Ausdruck an, der die Multiplikation der Mengen- und Preisvariablen darstellt.
Wenn der Code erfolgreich ausgefรผhrt wird, erscheint die unten stehende Ausgabe.
Ausgang:
- Die Ausgabe zeigt deutlich die Multiplikation der Werte fรผr Personen und Registrierungspreis.
Wenn Sie nun die Werte fรผr Personen und Registrierungspreis in den Textfeldern รคndern, รคndert sich der Gesamtbetrag automatisch.
- Die obige Ausgabe verdeutlicht die Leistungsfรคhigkeit der Datenbindung in AngularJS, die durch die Verwendung von โฆ erreicht wird. ng-model-Direktive.
Der letzte der vier verarbeitet viele Werte gleichzeitig.
ng-repeat in AngularJS
Dies wird verwendet, um ein HTML-Element zu wiederholen. Das folgende Beispiel zeigt die Verwendung von ng-repeat-Direktive.
Beispiel fรผr ng-repeat
In diesem Beispiel
- Wir werden ein Array von Kapitelnamen in einer Array-Variablen haben und
- Verwenden Sie dann die Direktive ng-repeat, um jedes Element des Arrays als Listenelement anzuzeigen
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="" ng-init="chapters=['Controllers','Models','Filters']"> <ul> <li ng-repeat="names in chapters"> {{names}} </li> </ul> </div> </body> </html>
Code Erlรคuterung:
- Die ng-init-Direktive wird zu unserem div-Tag hinzugefรผgt, um eine Variable namens โchaptersโ zu definieren, bei der es sich um eine Array-Variable mit 3 Zeichenfolgen handelt.
- Das ng-repeat-Element wird verwendet, indem eine Inline-Variable namens โnamesโ deklariert und jedes Element im Kapitelarray durchgegangen wird.
- Abschlieรend zeigen wir den Wert der lokalen Inline-Variable โNamenโ.
Wenn der Code erfolgreich ausgefรผhrt wird, erscheint die unten stehende Ausgabe.
Ausgang:
- Die obige Ausgabe zeigt lediglich, dass die ng-repeat-Direktive jeden Wert im Array namens โChaptersโ รผbernommen und HTML-Listenelemente fรผr jedes Element im Array erstellt hat.
Diese vier Aspekte umfassen Start, Daten, Bindung und Wiederholung. Die folgende Liste zeigt, was als Nรคchstes kommt.
Weitere hรคufig verwendete integrierte AngularJS-Direktiven
Die vier oben genannten Direktiven bilden den Ausgangspunkt, nicht die gesamte Bibliothek. Jeder Eintrag unten ist ein Attribut, das Sie direkt dem jeweiligen Element zuweisen.
- ng-bind: Schreibt einen Bereichswert in den Text eines Elements, ohne beim Laden kurz die geschweiften Klammern anzuzeigen.
- ng-if: Entfernt das Element aus dem DOM, wenn sein Ausdruck falsch ist, und baut es neu auf, wenn er wahr ist.
- ng-show und ng-hide: TogglDie Sichtbarkeit kann mit CSS angepasst werden. Das Element bleibt im DOM erhalten, wodurch wiederholte Umschaltungen weniger Aufwand bedeuten.
- ng-class: Fรผgt CSS-Klassen zu einem Ausdruck hinzu oder entfernt sie, sodass das Styling dem Modell folgt.
- ng-click: Fรผhrt einen Ausdruck oder eine Bereichsfunktion aus, wenn der Benutzer auf das Element klickt.
- ng-controller: Fรผgt einem Markup-Block einen Controller hinzu, sobald die Seite zu groร fรผr ng-init ist.
- ng-disabled und ng-readonly: Setzen Sie das entsprechende Formularattribut, wenn der zugehรถrige Ausdruck wahr ist.
Die folgenden FAQs beantworten die am hรคufigsten gestellten Fragen im Anschluss an diese Liste.
