AngularJS erweitert HTML-Attribute durch Anweisungen.
AngularJS-Anweisungen
AngularJS-Direktiven sind erweiterte HTML-Attribute mit dem Präfix ng-.
Die ng-app-Direktive wird zum Initialisieren der AngularJS-Anwendung verwendet.
Die ng-init-Direktive wird zum Initialisieren von Anwendungsdaten verwendet.
Die ng-model-Direktive wird verwendet, um die Werte von HTML-Steuerelementen (wie Eingabe, Auswahl, Textbereich usw.) an Anwendungsdaten zu binden.
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Die ng-app-Direktive teilt AngularJS auch mit, dass das
Datenbindung
Im obigen Beispiel ist {{ firstName }} ein AngularJS-Datenbindungsausdruck.
Bei der AngularJS-Datenbindung verwenden AngularJS-Ausdrücke AngularJS-Daten zur synchronen Aktualisierung.
{{ firstName }} aktualisiert Daten synchron über ng-model="firstName".
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
Hinweis: Die Verwendung der ng-init-Direktive ist in der AngularJS-Entwicklung sehr verbreitet. Im Abschnitt „Controller“ sehen Sie bessere Möglichkeiten zum Initialisieren von Daten.
Wiederholen Sie das HTML-Element
Die ng-repeat-Direktive wird verwendet, um wiederholt ein HTML-Element zu erstellen:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Verwenden Sie die ng-repeat-Direktive für ein Array von Objekten:
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Hinweis: AngularJS eignet sich sehr gut für Datenbank-CRUD-Vorgänge (d. h. Erstellen, Lesen, Aktualisieren und Löschen). Stellen Sie sich vor, diese Objekte kämen aus einer Datenbank?
ng-app-Direktive
Die ng-app-Direktive definiert das Stammelement der AngularJS-Anwendung.
Wenn die Webseite geladen wird, führt die ng-app-Anweisung einen automatischen Bootstrap (automatische Initialisierung) der Anwendung durch. Das heißt, die AngularJS-Anwendung wird automatisch initialisiert und bei der Ausführung gesteuert.
In den folgenden Kapiteln erfahren Sie, wie Sie der ng-app-Direktive einen Wert zuweisen (z. B. ng-app="myModule"), um sie mit dem Modul zu verknüpfen.
ng-init-Direktive
Die ng-init-Direktive wird verwendet, um Werte für die AngularJS-Anwendung zu initialisieren.
Im Allgemeinen ist es nicht erforderlich, die ng-init-Anweisung zu verwenden. Verwenden Sie stattdessen einen Controller oder ein Modul, um Initialisierungsarbeiten durchzuführen.
In den folgenden Kapiteln erfahren Sie mehr über Controller und Module.
ng-model-Direktive
Die ng-model-Direktive wird verwendet, um die Werte von HTML-Steuerelementen (wie Eingabe, Auswahl, Textbereich usw.) an Anwendungsdaten zu binden.
Die ng-model-Direktive kann auch verwendet werden:
Stellen Sie eine Datenverifizierung bereit (z. B. Verifizierungsnummer, E-Mail-Adresse, Pflichtfelder).
Geben Sie den Status der Daten an (z. B. ungültig, verschmutzt, berührt, Fehler).
Stellt CSS-Stilklassen für HTML-Elemente bereit.
Binden Sie HTML-Elemente an HTML-Formulare.
ng-repeat-Anweisung
Die ng-repeat-Direktive wird verwendet, um für jedes Element in der Datensammlung (oder im Array) ein entsprechendes HTML-Element zu generieren.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
