Freunde, die mit HTML vertraut sind, wissen, dass HTML viele Attribute hat. Das HREF -Attribut des <a> Tags kann beispielsweise die URL -Adresse des Links angeben, und das Typ -Attribut des <eingabe> -Tags kann verwendet werden, um den Typ der Eingabe anzugeben. Die AngularJS -Direktive fügt Funktionen zu AngularJS -Anwendungen hinzu, indem HTML -Attribute erweitert werden.
Die AngularJS -Richtlinie wird verwendet, um HTML zu erweitern. Dies sind alles besondere Eigenschaften, die mit dem NG-Präfix beginnen. Wir werden die folgenden Anweisungen diskutieren:
Häufig verwendete AngularJS -Richtlinien
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.
NG-App-Befehl
Die NG-App-Anweisung startet eine AngularJS-Anwendung. Es definiert das Stammelement. Es initialisiert oder startet automatisch eine Anwendung, die die Webseiten der AngularJS -Anwendung lädt. Es wird auch verwendet, um verschiedene AngularJS -Module AngularJS -Anwendungen zu laden. Im folgenden Beispiel definieren wir die Standard-AngularJS-Anwendung mit dem NG-App-Attribut des Div-Elements.
<div ng-App = ""> ... </div>
NG-Init-Richtlinie
Die NG-Init-Direktive initialisiert die Daten einer AngularJS-Anwendung. Es wird verwendet, um Werte in die Anwendung zur Verwendung von Variablen einzustellen. Im folgenden Beispiel werden wir das Länder -Array initialisieren. Verwenden Sie die JSON -Syntax, um Länder Arrays zu definieren.
<div ng-App = "" ng-init = "Länder = [{Locale: 'en-us', Name: 'United States'}, {Locale: 'en-Gb', Name: 'Vereinigtes Königreich'}, {Locale: 'en-fr', Name: Frankreich '}]"> ... </div>NG-Model-Befehl
Die NG-Model-Direktive definiert Modelle/Variablen, die in AngularJS-Anwendungen verwendet werden. Im folgenden Beispiel definieren wir ein Modell namens "Name".
<div ng-App = ""> ... <P> Geben Sie Ihren Namen ein: <Eingabe type = "text" ng-model = "name"> </p> </div>
NG-Repeat-Richtlinie
Die NG-Repeat-Anweisung wiederholt jedes Element in der HTML-Elementsammlung. Im folgenden Beispiel haben wir über die Array -Länder iteriert.
<div ng-app = ""> ... <p> landes landes landesliste: </p> <ol> <li ng-repeat = "Country in Ländern"> {{'Country:' + Country.Name + ', Gebietsgebiet:' + Country.locale}} </li> </ol> </div> </div> </div>Beispiel für AngularJS -Richtlinie
<div ng-app="" ng-init="firstName='John'"><p>Try entering in the input box:</p><p>Name: <input type="text" ng-model="firstName"></p><p>What you type is: {{ firstName }}</p></div>Die NG-App-Direktive sagt AngularJS, dass das Strom <div> Element eine AngularJS-Anwendung ist. Die NG-Init-Anweisung wird verwendet, um Daten zu initialisieren, was der Definitionsvariable in JavaScript entspricht. Datenbindung in AngularJs, synchronisieren AngularJS -Expressionen und AngularJS -Daten. {{{FirstName}} wird von ng-model = "firstName" synchronisiert. Das obige Beispiel synchronisiert den Inhalt, den Sie in das Eingabefeld auf der Seite eingegeben haben.
Beachten
Eine Webseite kann mehrere AngularJS -Anwendungen enthalten, die in verschiedenen Elementen ausgeführt werden.
Es ist nicht sehr häufig, Daten mithilfe von NG-Init zu initialisieren. Sie lernen einen besseren Weg, um Ihre Daten in nachfolgenden Kapiteln zu initialisieren.
NG-Repeat-Richtlinie
Die NG-Repeat-Anweisung wiederholt ein HTML-Element, das jeder Schleife in JavaScript entspricht.
<div ng-App = "" ng-init = "names = ['Jani', 'Hege', 'Kai']"> <p> Verwenden Sie NG-Repeat, um Arrays zu schleifen.
Das obige Beispiel wird in die folgenden HTML analysiert
<ul> <li> Jani </li> <li> Hege </li> <li> Kai </li> </ul>
NG-Repeat funktioniert auf Objektarray:
<div ng-app = "" ng-init = "names = [{name: 'jani', land: 'norway'}, {name: 'hege', land: 'schweden'}, {name: 'kai', land: 'denmark'}]" X.Country}} </li> </ul> </div>Es wird in die folgenden HTML analysiert:
<ul> <li> Jani, Norwegen </li> <li> Hege, Schweden </li> <li> Kai, Dänemark </li> </ul>
Benutzerdefinierte Befehle
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 Kamelmethode, um eine Richtlinie zu nennen, Askh5directive, aber wenn Sie sie verwenden, müssen Sie sich mit - Askh5 -Direktion teilen
<Body ng-App = "MyApp"> <ebh5-direkte> </undr.
Das obige Beispiel wird analysiert als:
<h1> Benutzerdefinierte Befehl! </h1>
Der Befehl kann auf folgende Weise aufgerufen werden:
Elementname: <AskH5-Direkte> </AskH5-Direkte>
Attribut: <divH5-direkte> </div>
Klassenname: <div> </div>
Kommentar: <!-Richtlinie: AskH5-Direktion->
Einschränkungsnutzung einschränken
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.
var app = angular.module ("myapp", []); app.directive ("AskH5Directive", function () {return {einschränken: "a", Vorlage: "<h1> benutzerdefinierte Anweisung! </h1>"};});AngularJS oben erlaubt nur Eigenschaftenaufrufe.
Verwandte Lesungen:
AngularJS Einführungsdauer: AngularJS -Ausdrücke
Der obige Inhalt ist das AngularJS -Einführungs -Tutorial von AngularJs, das Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird für alle hilfreich sein!