AngularJS- Anweisungen

AngularJS ermöglicht es Ihnen, mit dem Namen "Anweisungenneue Eigenschaften, um HTML zu erweitern.

AngularJS verfügt über eine Reihe von eingebauten Direktiven, die Ihre Anwendung mit Funktionen ausstatten können.

AngularJS 还允许您定义自己的指令。

AngularJS- Anweisungen

AngularJS ermöglicht es dir auch, deine eigenen Anweisungen zu definieren. AngularJS-Anweisungen sind erweiterte HTML-Attribute mit dem Präfix.

ng-app ng-

ng-init Anweisung initialisiert die AngularJS-Anwendung.

ng-model Anweisungen binden den Wert von HTML-Kontrollen (input, select, textarea) an Anwendungsdaten.

Anweisung initialisiert Anwendungsdaten.

Instanz

Bitte lies unsere Referenz zu AngularJS-Anweisungen, um Informationen über alle AngularJS-Anweisungen zu erhalten.
<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
</div>

Versuchen Sie es selbst

ng-app <p>Du hast geschrieben: {{ firstName }}</p>

Anweisung teilt AngularJS auch mit, dass das <div>-Element der "Eigentümer" der AngularJS-Anwendung ist.

Datenbindung Die Datenbindung in AngularJS bindet AngularJS-Ausdrücke an AngularJS-Daten. Im obigen Beispiel

Ein Ausdruck ist ein AngularJS-Datenbindungsausdruck.

Die Datenbindung in AngularJS bindet AngularJS-Ausdrücke an AngularJS-Daten. {{ firstName }} mit ng-model="firstName"

verknüpft.

Instanz

Im nächsten Beispiel sind zwei Textfelder durch zwei ng-model-Anweisungen verbunden:
<div ng-app="" ng-init="quantity=1;price=5">
Menge: <input type="number" ng-model="quantity">
Kosten:    <input type="number" ng-model="price">
</div>

Versuchen Sie es selbst

Gesamt in Dollar: {{ quantity * price }} ng-init Verwendung

sind nicht sehr häufig. Du wirst im Kapitel über Controller lernen, wie du Daten initialisierst.

ng-repeat Wiederholte HTML-Elemente

Instanz

Anweisung wiederholte HTML-Elemente:
  <ul>
    <li ng-repeat="x in names">
      <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
    </li>
  </ul>
</div>

Versuchen Sie es selbst

ng-repeat {{ x }}wirklich für jedes Element im Satz.

wird verwendet, um HTML-Elemente für Objekt-Arrays zu duplizieren ng-repeat Anweisung:

Instanz

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

Versuchen Sie es selbst

AngularJS ist sehr gut geeignet für Datenbank-CRUD (Erstellen, Lesen, Aktualisieren, Löschen) Anwendungen.

Stellen Sie sich vor, wenn diese Objekte aus Datenbanken stammen.

ng-app Anweisung

ng-app ng-init definiert die AngularJS-AnwendungWurzelelement.

wenn die Webseite geladen wird,ng-app Anweisungen bindenAutomatische Initialisierung(automatische Initialisierung) Anwendung.

ng-init Anweisung

ng-init ng-init definiert die AngularJS-AnwendungInitialwert.

Normalerweise verwenden Sie nicht ng-init. Sie werden Controller oder Module verwenden.

Später werden Sie mehr über Controller und Module erfahren.

ng-model Anweisung

ng-model Anweisungen binden den Wert von HTML-Kontrollen (input, select, textarea) an Anwendungsdaten.

ng-model Anweisungen können auch:

  • Typenvalidierung für Anwendungsdaten bereitstellen (Zahl, E-Mail, Pflichtfeld)
  • Zustände für Anwendungsdaten bereitstellen (ungültig, dirty, touched, error)
  • CSS-Klassen für HTML-Elemente bereitstellen
  • HTML-Elemente an HTML-Formulare binden

Lesen Sie im nächsten Kapitel mehr über ng-model Informationen über die Anweisung.

Erstellen Sie eine neue Anweisung

Neben allen eingebauten AngularJS-Anweisungen können Sie auch Ihre eigenen Anweisungen erstellen.

Eine neue Anweisung wird durch die Verwendung von .directive von einer Funktion erstellt.

Um eine neue Anweisung aufzurufen, erstellen Sie bitte ein HTML-Element mit dem gleichen Markennamen.

Bei der Benennung von Anweisungen muss ein Kammelliniennamen verwendet werden:w3TestDirective, aber wenn Sie sie aufrufen, müssen Sie den Namen durch einen Bindestrich getrennt angeben:w3-test-directive:

Instanz

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Mit einer Anweisung erstellt!</h1>"
  });
});
</script>
</body>

Versuchen Sie es selbst

Sie können die Anweisung auf die folgenden Weise aufrufen:

  • Elementname
  • Eigenschaft
  • Klasse
  • Kommentar

Die folgenden Beispiele erzeugen alle dasselbe Ergebnis:

Elementname

<w3-test-directive></w3-test-directive>

Versuchen Sie es selbst

Eigenschaft

<div w3-test-directive></div>

Versuchen Sie es selbst

Klasse

<div class="w3-test-directive"></div>

Versuchen Sie es selbst

Kommentar

<!-- directive: w3-test-directive -->

Versuchen Sie es selbst

Einschränkung

Sie können Ihre Anweisung so einschränken, dass sie nur über bestimmte Methoden aufgerufen werden kann.

Instanz

durch Hinzufügen eines Wertes "A" des restrict Eigenschaft, die Anweisung kann nur über Attribute aufgerufen werden:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Mit einer Anweisung erstellt!</h1>"
  });
});

Versuchen Sie es selbst

Gültige Werte für restrict sind:

  • E stellt den Elementnamen dar
  • A stellt ein Attribut dar
  • C stellt eine Klasse dar
  • M stellt einen Kommentar dar

Standardmäßig ist der Wert EA, was bedeutet, dass sowohl der Elementname als auch der Attributname Anweisungen aufrufen können.