AngularJS können Sie HTML mit neuen Attributen genannt Richtlinien erweitern.
AngularJS hat eine Reihe von integrierten in Richtlinien, die Funktionalität für Ihre Anwendungen bietet.
AngularJS können Sie auch Ihre eigenen Richtlinien definieren.
AngularJS Richtlinien
AngularJS Direktiven werden erweitert HTML - Attribute mit dem Präfix ng- .
Die ng-app - Direktive initialisiert eine AngularJS Anwendung.
Die ng-init Direktive initialisiert Datenanwendung.
Die ng-model Direktive bindet den Wert von HTML - Steuerelemente (input, select, TextArea-) auf Anwendungsdaten.
Lesen Sie mehr über alle AngularJS Richtlinien in unserer AngularJS Richtlinie Bezug .
Beispiel
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Versuch es selber " Die ng-app - Direktive weist auch AngularJS , dass das <div> Element ist der "Besitzer" der AngularJS Anwendung.
Datenbindung
Die {{ firstName }} Ausdruck, in dem obigen Beispiel ist ein AngularJS Datenbindung Ausdruck.
Daten in AngularJS Bindung bindet AngularJS Ausdrücke mit AngularJS Daten.
{{ firstName }} ist mit gebunden ng-model="firstName" .
Im nächsten Beispiel werden zwei Textfelder werden zusammen mit zwei ng-Modell Richtlinien gebunden:
Beispiel
<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> Versuch es selber "  | Mit ng-init ist nicht sehr verbreitet. Sie erfahren, wie Daten im Kapitel über Controller zu initialisieren. |
|---|
Wiederholen der HTML-Elemente
Die ng-repeat - Direktive wiederholt ein HTML - Element:
Beispiel
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Versuch es selber " Die ng-repeat - Richtlinie Klone tatsächlich HTML - Elemente einmal für jedes Element in einer Auflistung.
Die ng-repeat - Richtlinie auf eine Reihe von Objekten verwendet:
Beispiel
<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>
Versuch es selber " | AngularJS ist perfekt für die Datenbank CRUD (Erstellen Lesen Ändern Löschen) Anwendungen. Man stelle sich vor, wenn diese Objekte Datensätze aus einer Datenbank waren. |
|---|
Die ng-App-Richtlinie
Die ng-app - Richtlinie definiert das Wurzelelement eines AngularJS Anwendung.
Die ng-app - Richtlinie wird automatisch Bootstrap (automatisch initialisieren) , um die Anwendung , wenn eine Webseite geladen wird.
Die ng-init-Richtlinie
Die ng-init - Richtlinie definiert die Anfangswerte für eine AngularJS Anwendung.
Normalerweise werden Sie nicht ng-init verwenden. Sie werden stattdessen einen Controller oder Modul verwenden.
Sie werden später mehr über Controller und Module lernen.
Die ng-Modell Richtlinie
Die ng-model Direktive bindet den Wert von HTML - Steuerelemente (input, select, TextArea-) auf Anwendungsdaten.
Die ng-model kann somit auch:
- Geben Sie Art-Validierung für Anwendungsdaten (Nummer, E-Mail, erforderlich).
- Geben Sie Status für Anwendungsdaten (ungültig, schmutzig, berührt, Fehler).
- CSS-Klassen für HTML-Elemente sorgen.
- Bind HTML-Elemente in HTML-Formularen.
Lesen Sie mehr über die ng-model Richtlinie im nächsten Kapitel.
Erstellen neuer Richtlinien
Zusätzlich zu all den Einbau-AngularJS Richtlinien, können Sie Ihre eigenen Richtlinien erstellen.
Neue Richtlinien werden mithilfe der erstellten .directive Funktion.
Um die neue Richtlinie, stellen Sie ein HTML-Element mit dem gleichen Tag-Namen wie die neue Richtlinie berufen.
Wenn eine Richtlinie zu benennen, müssen Sie ein Kamel Fall Namen verwenden, w3TestDirective , aber wenn es aufgerufen wird , müssen Sie verwenden - getrennt Name, w3-test-directive :
Beispiel
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Versuch es selber " Sie können eine Richtlinie berufen, unter Verwendung von:
- Elementname
- Attribut
- Klasse
- Kommentar
Die folgenden Beispiele werden alle das gleiche Ergebnis:
Einschränkungen
Sie können Ihre Richtlinien beschränken, um nur einige der Methoden aufgerufen werden.
Beispiel
Durch das Hinzufügen einer restrict Eigenschaft mit dem Wert "A" kann die Richtlinie nur durch Attribute aufgerufen werden:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Versuch es selber " Die gesetzlichen beschränken Werte sind:
-
Efür Elementname -
Afür Attribut -
Cfür die Klasse -
Mfor Comment
Standardmäßig ist der Wert EA , was bedeutet , dass beide Elementnamen und Attributnamen , die Richtlinie berufen kann.