Latest web development tutorials

AngularJS Richtlinien

Die neue Eigenschaft wird durch AngularJS Richtlinien genannt HTML zu verlängern.

AngularJS eingebauten Anweisungen für die Anwendungsfunktionalität hinzuzufügen.

AngularJS können Sie Anweisung anpassen.

AngularJS Richtlinien

AngularJS Anweisung ist eine Erweiterung der HTML - Attribute mit dem Präfix ng-.

ng-App - Anweisungen , um eine AngularJS Anwendung zu initialisieren.

ng-init Befehl , um die Anwendungsdaten zu initialisieren.

ng-Modellbefehls die Elementwerte (wie beispielsweise dem Wert des Eingabefeldes) an die Anwendung gebunden.

Eine vollständige Anleitung finden Sie in den Inhalt zu finden AngularJS Referenzhandbuch .

AngularJS Beispiele

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

Versuchen »

ng-App - Direktive teilt AngularJS, <div> Element ist AngularJS Anwendung des "Besitzers" .

Note Eine Webseite kann mehrere Lauf AngularJS Anwendungen in verschiedenen Elemente enthalten.

Datenbindung

Im obigen Beispiel {{firstname}} AngularJS Ausdruck ist ein Datenbindungsausdruck.

AngularJS Datenbindungen, synchronisiert mit AngularJS AngularJS Expressionsdaten.

{{Firstname}} von ng-Modell = "vorName" Synchronisation.

Im nächsten Beispiel wird zwei Textfeld über zwei Synchronisationsbefehl ng-Modell berechnet:

AngularJS Beispiele

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

Versuchen »

Note Verwenden ng-init ist nicht sehr verbreitet. Sie werden lernen, einen besseren Weg, um die Daten in der Steuerung Kapitel zu initialisieren.

Wiederholen Sie HTML-Elemente

ng-Repeat - Anweisung wiederholt ein HTML - Element:

AngularJS Beispiele

<Div ng-app = "" ng-init = "Namen = [ 'Jani', 'Hege', 'Kai']">
<P> Mit ng-wiederholen, um eine Schleife durch das Array </ p>
<Ul>
<Li ng-repeat = "x in Namen">
{{X}}
</ Li>
</ Ul>
</ Div>

Versuchen »

ng-repeat - Befehl wird in einer Reihe von Objekten verwendet:

AngularJS Beispiele

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

Versuchen »

Note CRUD AngularJS perfekte Support-Datenbank (erhöhen erstellen, lesen Sie Read, Update-Update, Delete) Anwendungen.
Denken Sie an Beispielen von Objekten in Datensätze in der Datenbank.

ng-App-Richtlinie

ng-App - Richtlinie definiert das Wurzelelement AngularJS Anwendung.

ng-App - Anweisungen , wenn die Seite geladen wird automatisch gestartet (automatische Initialisierung) Anwendungen.

Später werden Sie lernen, wie man ng-App mit einem Wert (zB ng-app = "MyModule") mit dem Code - Modul verbunden.

ng-init-Befehl

ng-init Anweisung AngularJS Anwendung definiert den Anfangswert.

Unter normalen Umständen nicht ng-init verwenden. Sie werden es einen Controller oder ein Modul zu ersetzen, verwenden.

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

ng-Modell Richtlinie

ng-Modellelemente Richtlinie binden HTML zu den Anwendungsdaten.

ng-Modell kann somit auch:

  • Geben Sie die Überprüfung der Anwendung Datentyp (Nummer, E-Mail erforderlich).
  • Bietet Status für die Anwendungsdaten (ungültig, schmutzig, berührt, Fehler).
  • CSS-Klassen für HTML-Elemente sorgen.
  • Bind HTML-Elemente in die HTML-Formular.

ng-Repeat-Anweisung

ng-Repeat - Anweisung für die Sammlung (Array) jedes Element wird ein HTML - Element klonen.


Erstellen Sie einen benutzerdefinierten Befehl

AngularJS Zusätzlich zu den eingebauten Befehlen, können wir auch benutzerdefinierte Befehle erstellen.

.directive Funktion können Sie benutzerdefinierte Befehle hinzufügen verwenden.

Um einen benutzerdefinierten Befehl aufrufen, müssen Sie eine benutzerdefinierte Befehlsnamen auf dem HTML-Element hinzuzufügen.

Verwenden Sie Buckel Methode , eineRichtlinie zu nennen,w3bigDirective, aber wenn Sie es verwenden müssen-Segmentierung, w3big-Richtlinie:

AngularJS Beispiele

<Body ng-app = "myApp ">

<W3big-Richtlinie> </ w3big -Richtlinie>

<Script>
var app = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
Rückkehr {
Vorlage: "<h1> Anleitung </ h1>!"
};
});
</ Script>

</ Body>

Versuchen »

Sie können Unterricht in den folgenden Arten aufrufen:

  • Elementname
  • Immobilien
  • Der Klassenname
  • Note

Die folgenden beispielhaft ausgeben kann das gleiche Ergebnis:

Elementname

<W3big-Richtlinie> </ w3big -Richtlinie>

Versuchen »

Immobilien

<Div w3big-Richtlinie> </ div>

Versuchen »

Der Klassenname

<Div class = "w3big-Richtlinie "> </ div>

Versuchen »

Note

<- Instruction :! W3big-Richtlinie ->

Versuchen »

Die Beschränkung des Einsatzes

Sie können Ihre Anweisung kann begrenzen nur durch eine bestimmte Art und Weise aufgerufen werden.

Beispiele

Durch das Hinzufügen Eigenschaftbeschränken und setzen Sie den Wert nur "A" können Sie den Befehl zu setzen nur als Eigenschaft genannt werden:

var app = angular.module ( "myApp" , []);
app.directive ( "w3bigDirective", function ( ) {
Rückkehr {
beschränken: "A",
Vorlage: "<h1> Anleitung </ h1>!"
};
});

Versuchen »

beschränken Wert sein kann , die folgenden:

  • E wird als Elementname verwendet
  • A Verwendung als Attribut
  • C wird als Klassenname verwendet
  • M als Kommentar

beschränken Standard ist EA , die durch das Befehlselement aufgerufen werden kann und Attributnamen.