Im vorherigen Abschnitt wird das Angular JS -Framework kurz eingeführt. In diesem Abschnitt werden Angular's Bootstrap (Bootstrap) und Compiler (Compilation) -Mechanismen fortgesetzt.
1: Bootstrap: Winkelinitialisierung
1: Die von Angular empfohlene erste Automatisierung lautet wie folgt:
<! docType html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "Angular.js"> </body> </html
Verwenden Sie NGApp, um den Stammknoten zu markieren, in dem Sie die Anwendung automatisch starten müssen, was im Allgemeinen ein HTML -Tag ist. Wenn das Domcontent -Ereignis Angular auslöst, wird die NGApp automatisch als Stammknoten der Anwendung gefunden. Wenn es gefunden wird, werden die folgenden Operationen durchgeführt:
1. Lastmodul (Modul) Richtlinie (Anweisungen).
2. Erstellen Sie einen Anwendungsinjektor (Angular's Injection Mechanismus).
3.. Kompilieren und verarbeiten Sie NG-App als Stammknotenanweisungen. Auf diese Weise können Sie die Auswahl des DOM -Knotens als Anwendungsstammknoten anpassen.
<! docType html> <html ng-app = "optionalMoDulenName"> <body> Ich kann hinzufügen: {{ +}}. <script src = "Angular.js"> </script> </body> </html>2: Manuelle Initialisierung:
Wenn Sie mehr Kontrolle über die Initialisierung haben möchten, können Sie eine benutzerdefinierte manuelle Boot -Methode verwenden, um anstelle der automatischen Initialisierung von Angular zu initialisieren. Sie müssen beispielsweise etwas tun, bevor das Winkel die Vorlage kompiliert, z. B. das Ändern bestimmter Inhalte der Vorlage. Die manuelle Boot -Methode lautet wie folgt:
<! docType html> <html xmlns: ng = "http://angularjs.org"> <body> Hallo {{'World'}! {Angular.bootstrap (Dokument);}); </script> </body> </html>1. Nachdem der Code auf der Seite geladen wurde, finden Sie den HTML -Template -Root -Knoten (typisches Dokumentelement).
2. Rufen Sie API/Angular.bootstrap (Angular.bootstrap (Element [, Module])) auf, um die Vorlage zu kompilieren, um sie ausführbar zu machen.
Zwei: Compiler: Angulars Übersetzung
Der Kompilierungsmechanismus von Angular ermöglicht es Entwicklern, dem Browser eine neue HTML -Syntax hinzuzufügen, sodass wir einige HTML -Knoten, Attribute und sogar einige benutzerdefinierte Knoten und Attribute erstellen können. Angular erweitert diese Verhaltensweisen in Richtlinien. Angular bringt nützliche Richtlinien und ermöglicht es uns, domänenspezifische Richtlinien zu erstellen.
1: Compiler -Verarbeitung ist in zwei Schritte unterteilt:
1. Konvertieren Sie DOM, sammeln Sie die Funktion zur Richtlinie und Rückgabeverbindung (Verbindung).
2. Zusammenführen Sie die Anweisungen und den Umfang, um eine lebende Sichtweise zu erzeugen. Alle Änderungen im Umfangsmodus werden in die Ansicht und die Benutzerinteraktionen aus der Ansicht reflektiert, werden auch mit dem Umfangsmodell synchronisiert, und der Umfang ist eine einzelne Datenquelle.
2: Anweisungsbefehl
Die Richtlinie ist eine Handlung, die durch eine spezielle HTML -Designbearbeitung verarbeitet wird. Es kann auf die Namen, Attribute, die Klasse des Knotens oder sogar im HTML -Kommentar platziert werden. Hier ist die äquivalente Schreibmethode von Angulars eigenem NG-Bind:
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-Anweisung: ng-bindexp>
Die Richtlinie ist nur eine Funktion, die von Angular im DOM ausgeführt wird. Hier ist ein Beispiel für Ziehen und Tropfen, die auf das Attribut von Span und Div angewendet werden können:
Angular.module ('Drag', []). Richtlinie ('Draggable', Funktion ($ document) {var startx =, starty =, x =, y =; Return -Funktion (Scope, Element, Attr) {Element.css ({Position: 'Relative', Border: Border: Border: Bindy '; Funktion (Ereignis) {Startx = Ereignis. links: x + 'px'});Demo
Sie können mich überall hinziehen und bewegen!
3: Verständnis anzeigen
Viele Vorlagenmotoren haben vorhanden, um Vorlagen und Modelle für die Rückgabe einer Zeichenfolge zusammenzufassen und dann mit InnerHTML an den DOM-Knoten hinzugefügt, wodurch angenommen wird, dass Änderungen der Daten neu aufgewendet werden müssen, um neue Inhalte zu generieren, und an die DOM angehängt werden. Die folgende Abbildung gehört zur Einwegbindungstechnologie:
Angular verwendet keine Anweisungen für Richtlinien und nicht. Der Rückgabewert ist eine Verbindungsfunktion, die das Datenmodell verschiebt. Die Bindung von Sicht und Modell ist automatisch und transparent und erfordert keine Entwickler, zusätzliche Aktionen hinzuzufügen, um die Ansicht zu aktualisieren. Angular ist nicht nur eine Bindung des Datenmodells, sondern auch ein Konzept des Verhaltens. Als Zwei-Wege-Bindung lautet die Form wie folgt:
Material:
1.anguläre offizielle Website: http://angularjs.org/
2. Code -Download: https://github.com/angular/angular.js
Das obige ist die Angular Bootstrap- und Compiler -Mechanismen, die Ihnen vom Editor vorgelegt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!