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:
NG -App - Diese Richtlinie startet eine AngularJS -Anwendung.
NG -INIT - Diese Richtlinie initialisiert Anwendungsdaten.
NG -Model - Diese Richtlinie definiert ein Modell, das eine Variable ist, die in AngularJs verwendet wird.
NG -Repeat - Diese Richtlinie wiederholt HTML -Elemente für jedes Element in der Sammlung.
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> Liste der Landes mit Ort des Gebiets: </p> <ol> <li ng-repeat = "Land in Ländern"> {{'Country:' + Country.Name + ', Gebietsschale:' + Country.locale}} </li> </ol> </div> </div> </div>Beispiel
Die folgenden Beispiele zeigen alle oben genannten Anweisungen.
testangularJs.html
<html><title>AngularJS Directives</title><body><h1>Sample Application</h1><div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> <p>Enter Ihr Name: <Eingabe type = "text" ng-model = "name"> </p> <p> Hallo <span ng-bind = "name"> </span>! </ol> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Ausgabe
Öffnen Sie TextangularJs.html in einem Webbrowser. Geben Sie Ihren Namen ein und sehen Sie die folgenden Ergebnisse.
Das obige ist die grundlegende Informationen der AngularJS -Richtlinie. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Website!