AngularJS -Richtlinie
AngularJs erweitert HTML mit neuen Eigenschaften, die als Richtlinien bezeichnet werden.
AngularJS fügt der Anwendung durch integrierte Anweisungen Funktionen hinzu.
Mit AngularJS können Sie Richtlinien anpassen.
AngularJS -Richtlinie
Die AngularJS-Richtlinie ist ein erweitertes HTML-Attribut mit dem Präfix NG-.
Die NG-App-Direktive initialisiert eine AngularJS-Anwendung.
Die NG-Init-Richtlinie initialisiert Anwendungsdaten.
Die NG-Modell-Direktive bindet Elementwerte (z. B. den Wert des Eingangsfeldes) an die Anwendung.
Vollständige Anweisungen finden Sie im AngularJS Reference -Handbuch.
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init = "firstName = 'John'"> <p> Versuchen Sie, in das Eingabefeld einzugeben: </p> <p> Name: <Eingabe type = "text" ng-model = "firstName"> </p> <p> Sie sind tippt als: {{{Firstname}} </p> </div> </body> </body> </html>> </html>Auslaufergebnisse:
Versuchen Sie, in den Eingabefeld einzugeben:
Name:
Was Sie eingegeben haben, ist: John
Die NG-App-Richtlinie sagt AngularJS, dass das <Div> -Element der "Eigentümer" der AngularJS-Anwendung ist.
Hinweis: Eine Webseite kann mehrere AngularJS -Anwendungen enthalten, die in verschiedenen Elementen ausgeführt werden.
Datenbindung
Der Ausdruck von {{FirstName}} im obigen Beispiel ist ein Expression von AngularJS -Datenbindungen.
Datenbindung in AngularJs, synchronisieren AngularJS -Expressionen und AngularJS -Daten.
{{{FirstName}} wird von ng-model = "firstName" synchronisiert.
Im nächsten Beispiel werden die beiden Textfelder mit zwei NG-Model-Richtlinien synchronisiert:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" data-ng-init="quantity=1;price=5">Price calculator quantity: <input type="number" ng-model="quantity">Price: <input type="number" ng-model="price"><p><b>Total price:</b> {{quantity * price}}</p></div></body></html>Auslaufergebnisse:
Preisrechner
Menge: Preis:
Gesamtpreis: 5
Hinweis: Die Verwendung von NG-Init ist nicht sehr häufig. Sie lernen einen besseren Weg, um Daten im Controller -Kapitel zu initialisieren.
Wiederholen Sie HTML -Elemente
Die NG-Repeat-Anweisung wiederholt ein HTML-Element:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" Data-ng-init = "names = ['Jani', 'Hege', 'Kai']"> <p> Verwenden Sie NG-Repeat, um Arrays zu schleifen.
Verwenden Sie Ng- Wiederholen Sie, um das Array zu schleifen
Die NG-Repeat-Direktive wird für eine Reihe von Objekten verwendet:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"><p>Loop object:</p><ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div> </body> </html>Schleifenobjekt:
NoteAngularJS unterstützt die Datenbank -CRUD -Anwendungen perfekt (Erstellen, Lesen, Aktualisieren des Updates, Aktualisieren).
Stellen Sie sich Objekte in einer Instanz als Datensätze in einer Datenbank vor.
NG-App-Befehl
Die NG-App-Anweisung definiert das Wurzelelement einer AngularJS-Anwendung.
Die NG-App-Direktive startet die Anwendung automatisch (automatisch initialisiert), wenn die Webseite geladen wird.
Sie werden später erfahren, wie sich NG-App über einen Wert mit einem Codemodul verbindet (z. B. ng-App = "MyModule").
NG-Init-Richtlinie
Die NG-Init-Anweisung definiert den Anfangswert für die AngularJS-Anwendung.
Normalerweise wird NG-Init nicht verwendet. Sie verwenden stattdessen einen Controller oder ein Modul.
Sie erfahren später mehr über Controller und Module.
NG-Model-Befehl
NG-Modell Die Richtlinie bindet HTML -Elemente an Anwendungsdaten.
NG-Modell Anweisungen können auch sein:
Bietet die Typüberprüfung (Nummer, E -Mail, erforderlich) für Anwendungsdaten.
Bietet Status (ungültig, schmutzig, berührt, Fehler) für Anwendungsdaten.
Bietet eine CSS -Klasse für HTML -Elemente.
Binden Sie HTML -Elemente an HTML -Form.
NG-Repeat-Richtlinie
Die NG-Repeat-Richtlinienklone klone HTML-Elemente einmal für jedes Element in der Sammlung (in einem Array).
Erstellen Sie benutzerdefinierte Richtlinien
Zusätzlich zu den integrierten Richtlinien in AngularJs können wir auch benutzerdefinierte Richtlinien erstellen.
Sie können die .Directive -Funktion verwenden, um benutzerdefinierte Anweisungen hinzuzufügen.
Um eine benutzerdefinierte Anweisung anzurufen, müssen Sie dem HTML -Element einen benutzerdefinierten Richtungsnamen hinzufügen.
Verwenden Sie die Camel-Methode, um eine Runoobdirective-Anweisung zu nennen. Wenn Sie sie jedoch verwenden, müssen Sie sich trennen, runoob-direkte:
AngularJS -Instanz
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-app = "myApp"> <runoob-directive> </runoob-directive> <cript> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {Vorlage: "benutzerdefinierte Anweisung!"};});Auslaufergebnisse:
Benutzerdefinierte Befehle!
Sie können die Richtlinie auf folgende Weise anrufen:
Elementname
Eigentum
Klassenname
Kommentare
Die folgenden Beispiele können auch dasselbe Ergebnis ausgeben:
Elementname
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-app = "myApp"> <runoob-directive> </runoob-directive> <cript> var app = angular.module ("myApp", []); app.directive ("runoobdirective", function () {return {Vorlage: "benutzerdefinierte Anweisung!"};});Auslaufergebnisse:
Benutzerdefinierte Befehle!
Eigentum:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><body ng-app="myApp"><div RunoOB-Directive> </div> <script> var app = angular.module ("myApp", []); app.directive ("RunoObDirective", Funktion () {return {Vorlage: "benutzerdefinierte Anweisung!"};}); </script> </body> </body> </html>>;Auslaufergebnisse:
Benutzerdefinierte Befehle!
Klassenname:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app-app = "myapp" Angular.module ("MyApp", []); App.Directive ("Runoobdirective", Funktion () {retrict {einschränken: "C", Vorlage: "C"! "};}); </p> </body> </html>Benutzerdefinierte Befehle!
Hinweis: Sie müssen den Wert von Beschränkung auf "C" festlegen, um die Richtlinie unter dem Klassennamen aufzurufen.
Anmerkungen:
<! DocType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ngg-app = "myapp"> </script> </head> <body ngg = "myapp"> </script> </bodyng-app = "myapp"> </script> </body apply apply app = "myapp" app = angular.module ("myapp", []); app.directive ("runoobdirective", function () {retrict {einschränken: "m", ersetzen: true, template: "benutzerdefinierte Anweisungen!"};}); </p> <p> <strong> Hinweis: </strong> Sie müssen den Wert von <b> einschränken </b> auf "M" auf die Richtlinie durch Kommentare aufrufen. </p> </body> </html>Auslaufergebnisse:
Benutzerdefinierte Befehle!
HINWEIS: Wir müssen das Attribut ersetzen, der dieser Instanz ersetzen, andernfalls sind die Kommentare nicht sichtbar.
Hinweis: Sie müssen den Wert von Beschränkung auf "M" festlegen, um die Richtlinie durch Kommentare anzurufen.
Eingeschränkter Gebrauch
Sie können Ihre Richtlinien einschränken, um nur auf bestimmte Weise aufgerufen zu werden.
Beispiel
Durch Hinzufügen der Einschränkung der Eigenschaft und der Einstellung des Wertes zu "A" kann der Befehl nur durch Attribute aufgerufen werden:
Beispielcode:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-app="myApp"><runoob-directive></runoob-directive><div runoob-directive></div><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { restrict: "A", template : "Custom directive!" };}; </p> </body> </html>Auslaufergebnisse:
Benutzerdefinierte Befehle!
HINWEIS: Der Befehl Einstellung kann nur aufgerufen werden, indem der Begrenzungsattributwert auf "a" eingestellt wird.
Der einschränkende Wert kann der folgende sein:
Ich benutze nur Elementnamen
Eine Eigenschaften sind nur verfügbar
C Verwenden Sie nur Klassennamen
M ist nur für Kommentare verfügbar
Der Standardwert von Einschränkung ist EA, dh der Befehl kann durch den Elementnamen und den Attributnamen aufgerufen werden.
Das obige ist die Zusammenstellung von AngularJS -Anweisungsinformationen und wird später weiterhin ergänzt