Der Originaltext wird fortgesetzt und das Buch dauert weiter. . . Beziehen Sie sich noch unter http://code.angularjs.org/1.0.2/docs/guide/compiler
1. Zusammenfassung
Der HTML -Compiler von Angular ermöglicht es Entwicklern, die neue HTML -Syntax anzupassen. Mit Compiler können wir Verhalten an ein HTML -Element oder -attribut oder sogar neue HTML -Tags, Attribute (wie <Beautiful Girl = "CF"> </Beautiful>) anhängen. Angular ruft diese zusätzlichen Verhaltensrichtlinien auf.
HTML verfügt über viele vordefinierte HTML -Stilstrukturen, die spezifisch statische Dokumente formatieren (die dem Browser sagen können, wie der markierte Inhalt angezeigt wird). Nehmen wir an, etwas muss zentriert sein, und wir müssen dem Browser nicht beibringen, wie es geht (n Wörter hier weggelassen). Wir müssen einfach nur Align = "Center" zu den Tags hinzufügen, die zentriert werden müssen. Dies ist das Tolle an der deklarativen Sprache.
Deklarative Sprachen haben aber auch ihre Einschränkungen, dh Sie können dem Browser nicht sagen, wie er mit Syntax außerhalb des vordefinierten Bereichs umgeht. Zum Beispiel können wir dem Browser nicht einfach sagen, wie der Text 1/3 des Browsers ausgerichtet ist. Wir brauchen also eine Möglichkeit, den Browser mit der Zeit in Bewegung zu halten und neue Grammatiken zu lernen.
Angular Pre-Binds Einige Richtlinien, die beim Aufbau von Anwendungen hilfreich sind. Wir können auch einzigartige Richtlinien für unsere eigenen Anwendungen erstellen. Diese Richtlinienerweiterungen werden zur "domänenspezifischen Sprache" unserer eigenen Anwendungen.
Diese Kompilierungen treten nur auf der Browserseite auf und erfordern keine Server- oder Vorkompilationsschritte.
2. Compiler
Als Winkeldienst ist Compiler für das Durchqueren der DOM -Struktur und das Auffinden von Eigenschaften verantwortlich. Der Zusammenstellungsprozess ist in zwei Phasen unterteilt:
1. Kompilieren: Überqueren Sie den DOM -Knotenbaum und sammeln Sie alle Richtlinien. Das Ergebnis ist eine Verknüpfungsfunktion.
2. Link: Binden Sie Richtlinien in einen Bereich und erstellen Sie eine Live -Ansicht. Alle Änderungen im Umfang werden in der Ansicht widerspiegelt (aktualisieren Sie die Ansicht). Die Aktivität eines Benutzers (Änderung) in die Vorlage wird im Umfangsmodell (Zwei-Wege-Bindung) widerspiegelt. Dadurch kann das Umfangsmodell den richtigen Wert widerspiegeln.
Einige Richtlinien wie NG-Wiederholungen kopieren ein bestimmtes Element (Kombination) einmal für jedes Element in der Sammlung. Zusammenstellung und Verknüpfung sind zwei Phasen zur Verbesserung der Leistung. Da die geklonte Vorlage nur einmal kompiliert werden muss, und dann die Elemente in jeder Sammlung einmal (ähnlich dem Vorlagen -Cache) verknüpfen muss.
3. Richtlinie
Die Richtlinie ist ein Verhalten, das ausgelöst wird, wenn während der Zusammenstellung eine bestimmte HTML -Struktur auftritt. Richtlinien können im Namen, Attribut, Klasse und sogar Kommentare von Elementen platziert werden. Hier sind einige Möglichkeiten, um auf die NG-Bind (eine integrierte Richtlinie) zu verweisen:
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-Anweisung: ng-bind exp->
Die Richtlinie ist nur eine Funktion, die ausgeführt wird, wenn der Compiler sie im DOM begegnet. In der Dokumentation der API -Dokumentation wird ausführlich erläutert, wie eine Richtlinie erstellt wird.
Hier ist ein Beispiel, das es einem Element ermöglicht, mit Ihrer Maus ein Versteck zu spielen ...
<! DocType html> <html lang = "zh-cn" ng-App = "hideankseek"> <kopf> <meta charset = "utf-8"> <titels> versteckt und suche </title> <style type = "text/css"> .ng-cloak {docua: non; } </style> </head> <body> <span wildcat> Ich bin weggelaufen, sobald ich berührt habe ~~ come me ~~ </span> <script src = "../ Angular-1.0.1.js" Typ = "text/javaScript"> </script> <script type = "text/javascript"> Angular.modul ("HidEnkse (". ($ document) {var maxleft = 400, maxtop = 300; "Position": "Absolute", "Grenze": "1px Solid Green"}); }). text (msg [parseInt (math.random () * 10000 % msg.length)];Durch das Hinzufügen des "Wildcat" -attributs zu jedem Element wird das Element ein neues Verhalten haben. Auf diese Weise haben wir dem Browser beigebracht, wie man mit Elementen umgeht, die sich verstecken und suchten (keine Sorge, Sie befinden sich nicht in einem bestimmten Raum, Sie werden nicht hängen --_-!). Wir haben den "Vokabular" des Browsers durch diesen Ansatz erweitert. Dies ist eine relativ natürliche Möglichkeit für alle, die mit HTML -Regeln vertraut sind.
Es ist jetzt spät in der Nacht und wir werden morgen fortfahren. . . Wir sehen uns nach der Anzeige
=================ieben
4. Verstehen Sie die Ansicht (Ansicht)
Es gibt viele Vorlagensysteme draußen, die normalerweise über Vorlagenzeichenfolgen mit Daten herstellen, die endgültige HTML -Zeichenfolge generieren und das Ergebnis über das Innerhtml -Attribut in ein Element schreiben.
Dies bedeutet, dass bei Änderungen von Daten die Daten und Vorlagen erneut in Zeichenfolgen zusammengeführt und dann als innerhtml in das entsprechende Element zurückgeschrieben werden müssen. Hier gibt es einige Probleme: (Ich kann die wörtliche Übersetzung hier wirklich nicht verstehen ... nur YY) Angenommen, es gibt eine solche Szene und die Vorlage enthält das Eingabefeld. Der Benutzer gibt das Eingabefeld ein und die Vorlage wird synchron aktualisiert. Normale Vorlagen aktualisieren Ansichten über Innerhtml, Zeichenfolgen und Datenverbindungen, wodurch die Benutzereingabe unterbricht und eine schlechte Erfahrung verfügt.
Angular ist einzigartig. Angular Compiler (Compiler) verarbeitet DOM durch Anweisungen, nicht durch Verarbeitung von Zeichenfolgenvorlagen. Das Verarbeitungsergebnis ist eine Verknüpfungsfunktion, die sich mit dem Umfangsmodell kombiniert und eine Echtzeitvorlage erzeugt. Die Bindung der Sicht an das Umfangsmodell ist für uns transparent. Entwickler müssen keine Aktionen ausführen, um Ansichten oder Modelle zu aktualisieren. Da die Ansichtsvorlage nicht mit innerHTML aktualisiert wird, wird die Benutzereingabe nicht unterbrochen. Darüber hinaus können Winkelrichtlinien nicht nur die Textwerte, sondern auch Verhaltenskonstrukte sein.
Diese Verarbeitungsmethode von Angular erzeugt ein stabiles DOM. Dies bedeutet, dass es während des Lebenszyklus des DOM -Elements immer an eine Instanz eines bestimmten Modells gebunden ist und sich diese Beziehung nicht ändert. Dies bedeutet auch, dass der Code einen Verweis auf ein DOM -Objekt beibehalten kann, Ereignisfunktionen Registrieren und dass diese Referenz nicht durch Zusammenführen von Vorlagendaten zerstört wird.