AngularJS Basic Learning Notes Anleitungen_AngularJS

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 dc6dce4a544fdca2df29d5ac0ea9906b-Element, in dem es sich befindet, das Stammelement der AngularJS-Anwendung ist, also der Bereich.

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.