Überblick
Der HTML -Compiler von AngularJS ermöglicht es dem Browser, die neue HTML -Syntax zu erkennen. Sie können Verhaltensweisen mit HTML -Elementen oder -attributen assoziieren und sogar neue Elemente mit benutzerdefiniertem Verhalten erstellen. AngularJS nennt dieses Verhalten auf "Anweisungen" ausgeweitet.
HTML verfügt über viele deklarative Strukturen, um das Format beim Schreiben statischer Seiten zu kontrollieren. Wenn Sie beispielsweise einen Inhalt zentrieren möchten, müssen Sie dem Browser nicht sagen, dass er "den Mittelpunkt des Fensters finden und mit der Mitte des Inhalts kombiniert" werden soll. Das Element, das zentriert werden muss, müssen nur ein Align = "Center" -attribut hinzufügen. Dies ist die Kraft der deklarativen Sprache.
Deklarative Sprachen haben aber auch etwas, das nicht erreicht werden kann, und einer der Gründe ist, dass Sie es nicht verwenden können, um Browsern neue Syntax zu erkennen. Wenn Sie beispielsweise den Inhalt nicht zentrieren, sondern auf 1/3 der linken, kann dies nicht in der Lage sein, dies zu tun. Wir brauchen also einen Weg, um dem Browser eine neue HTML -Syntax zu erlernen.
AngularJS -Schüler stammen aus einigen Anweisungen, die sehr nützlich für das Erstellen von Apps sind. Wir hoffen auch, dass Sie einige Anweisungen erstellen können, die für Ihre eigenen Anwendungen nützlich sind. Diese erweiterten Anweisungen sind die "domänenspezifische Sprache", die Sie die App erstellen.
Der Zusammenstellungsprozess erfolgt auf der Browserseite; Die Serverseite wird weder an Schritten beteiligt, noch wird sie vorkompiliert.
Komplizierter
Der Compiler ist ein von AngularJS erbrachte Dienst. Es sucht nach Eigenschaften, die sich darauf beziehen, indem es das DOM durchquert. Der gesamte Zusammenstellungsprozess ist in zwei Stufen unterteilt.
1. Kompilierung: Überqueren Sie das DOM und sammeln Sie alle relevanten Anweisungen, um eine Verbindungsfunktion zu generieren.
2. Link: Binden Sie einen Umfang an die Richtlinie und generieren Sie eine dynamische Ansicht. Alle Änderungen am Umfangsmodell werden in der Ansicht reflektiert, und alle Benutzeraktionen in der Ansicht werden im Bereichsbereichsmodell widerspiegelt. Dies macht das Umfangsmodell das einzige, was Sie sich in Ihrer Geschäftslogik interessieren müssen.
Es gibt einige Anweisungen wie NG-Wiederholungen, die jedes DOM-Element einmal im Datensatz klonen. Die Praxis, den gesamten Kompilierungsprozess in zwei Phasen zu unterteilen: Kompilierung und Verknüpfung verbessert die Gesamtleistung, da die klonierte Vorlage nur einmal in der Gesamtzahl kompiliert und dann mit ihren jeweiligen Modellinstanzen verknüpft werden muss.
Anweisung
Die Richtlinie gibt an, "die Aktion, die ausgeführt werden sollte, wenn die zugehörige HTML -Struktur in die Kompilierungsphase eingeht". Richtlinien können im Namen des Elements, im Attribut, im CSS -Klassennamen und in den Kommentaren geschrieben werden. Im Folgenden finden Sie einige Beispiele für die Verwendung der NG-Bind-Anweisung mit derselben Funktion.
Die Codekopie lautet wie folgt:
<span ng-bind = "exp"> </span>
<span> </span>
<ng-Bind> </ng-bind>
<!-Richtlinie: Ng-Bind Exp->
Anweisungen sind im Wesentlichen nur Funktionen, die ausgeführt werden müssen, wenn der Compiler an das relevante DOM kompiliert. In der Dokumentation von API -Dokumentationen finden Sie detailliertere Informationen zu Richtlinien.
Unten ist ein Befehl, der Elemente draggierbar macht. Beachten Sie das draggable Attribut im <span> -Element.
Index.html:
Die Codekopie lautet wie folgt:
<! docType html>
<html ng-App = "Drag">
<kopf>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<span draggable> zeichne mich </span>
</body>
</html>
script.js:
Die Codekopie lautet wie folgt:
Angular.module ('Drag', []).
Richtlinie ('Draggable', Funktion ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
Rückgabefunktion (Umfang, Element, Attr) {
element.css ({{{
Position: 'Relativ',
Grenze: '1px solide rot',
BackgroundColor: 'Lightgrey',
Cursor: 'Zeiger'
});
Element.bind ('MouseDown', Funktion (Ereignis) {
startx = event.screenx - x;
starty = event.screeny - y;
$ document.bind ('Mousemove', Mousemove);
$ document.bind ('mauseup', mausup);
});
Funktion Mousemove (Ereignis) {
y = event.screeny - starty;
x = event.screenx - startx;
element.css ({{{
Oben: y + 'px',
Links: x + 'px'
});
}
Funktion mouseUp () {
$ document.unbind ('Mousemove', Mousemove);
$ document.unbind ('mauseup', mausup);
}
}
});
Dieses neue Verhalten kann erreicht werden, indem das draggable Attribut hinzugefügt wird. Die Schönheit unserer Verbesserung ist, dass wir dem Browser neue Funktionen geben. Wir haben einen natürlichen Weg genutzt, um die Fähigkeit des Browsers zu erweitern, neue Verhaltensweisen und neue Syntaxe zu verstehen, solange der Entwickler mit HTML -Regeln vertraut ist.
Verstehen Sie die Ansicht
Es gibt viele Vorlagensysteme online. Die meisten von ihnen "binden statische Zeichenvorlagen und Daten, erzeugen neue Zeichen und fügen sie durch innerhtml in Seitenelemente ein".
Dies bedeutet, dass Änderungen in den Daten dazu führen, dass die Daten mit der Vorlage rekombiniert werden, um neue Zeichen zu generieren, und dann in das DOM eingefügt werden. Zu den Problemen gehören: Benutzereingaben müssen gelesen und mit Modelldaten kombiniert werden, die Benutzereingabe muss überschrieben werden, der gesamte Aktualisierungsprozess muss manuell verwaltet werden und das Fehlen reichhaltiger Ausdrücke.
AngularJs ist anders. Der AngularJS -Compiler verwendet DOM mit Anweisungen und nicht mit String -Vorlagen. Es gibt eine Linkfunktion zurück, die sich mit dem Umfangsmodell kombiniert, um eine dynamische Ansicht zu generieren. Der Bindungsprozess dieser Ansicht und des Modells ist "transparent". Der Entwickler muss nichts gegen die Aktualisierung der Ansicht unternehmen. Die Anwendung verwendet InnerHTML nicht, sodass wir die Eingabe des Benutzers nicht überschreiben müssen. Insbesondere können Angulars Anweisungen nicht nur die String -Bindung verwenden, sondern auch einige Strukturen verwenden, die auf ein Verhalten hinweisen.
Die AngularJS -Kompilierung erzeugt ein "stabiles Dom". Dies bedeutet, dass sich Instanzen von DOM -Elementen, die an das Datenmodell gebunden sind, während des Lebenszyklus der Bindung nicht ändern. Dies bedeutet auch, dass der Code Instanzreferenzen von DOM -Elementen und Registrieren von Ereignissen erhalten kann, ohne sich Sorgen zu machen, dass diese Referenz verloren geht, wenn die Vorlage und die Daten kombiniert werden.