Originaladresse: http://code.angularjs.org/1.0.2/docs/guide/concepts
weitermachen. .
1. Zusammenfassung
Dieser Artikel bietet hauptsächlich einen Überblick über Winkelkomponenten und erklärt, wie sie funktionieren. Die Liste lautet wie folgt:
2. Startup
So wird Angular gestartet (siehe das Diagramm mit dem folgenden Beispiel):
1. Der Browser lädt HTML und wandelt HTML -Tags in DOM -Objekte um.
2. Der Browser lädt das Skript von Angular.js;
3. Angular wartet auf das Domcontent -Ereignis;
4. Angular sucht nach NG-App, eine Anweisung, mit der der Anwendungsgrenzbereich angegeben ist.
5. Wenn NG-App ein bestimmtes Modul hat (möglicherweise ng-App = "SomeApp"), wird es als Konfiguration $ Injector verwendet.
6. $ Injector wird verwendet, um $ Compile Service (Service) und $ rootscope zu erstellen.
7. Der $ Compile -Service wird als "Kompilierung" verwendet (ähnlich wie durchqueren, dann machen Sie ein wenig mysteriös) DOM und verbinden sie mit dem entsprechenden $ rootscope.
8.
9. Fügen Sie den Wert von "{{name}}" in den Ausdruck ein und zeigen Sie schließlich "Hello Kitty!"
<! DocType html> <html lang = "zh-cn" ng-App> <kopf> <meta charset = "utf-8"> <titels> Hallo Kitty! </Title> <style type = "text/cs } </style> </head> <body> <div ng-init = "name = 'kitty'"> Hallo {{name}}!Der Fortschritt war langsam, weil ich heute Abend etwas mit jemandem besprochen habe. . . Das ist wieder der Satz. . . Es ist jetzt spät in der Nacht. . . Angular, wir sehen uns nach der Anzeige!
===================================================================
Die Anzeige ist fertig. . . weitermachen
3. Laufzeit
This chart and the following example describe how angular interacts through the browser event-loop (all time processing functions, as well as the functions executed by timer, will be arranged in a queue structure, and use an infinite loop to continuously extract the functions from the queue to execute. This is event-loop. From http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-eventloop).
1. Die Browser-Event-Schleife wartet, bis die Veranstaltung ankommt. Die Ereignisse stammen aus der Benutzerinteraktion (DOM -Ereignisse), Timer -Ereignisse (SetTimeout), Netzwerkereignissen (Serverantwort, XHR usw.);
2. Die Ereignisrückruffunktion beginnt auszuführen. Hier geben wir den JavaScript -Kontext (Kontext) ein. Diese Rückruffunktion kann die DOM -Struktur ändern.
3. Wenn die Rückruffunktion ausgeführt wird, verlässt der Browser den JavaScript -Kontext und zeichnet die Ansicht gemäß den DOM -Änderungen neu.
Angular modifiziert den allgemeinen JavaScript -Fluss, indem er eine eigene Ereignisverarbeitungsschleife erstellt. Dies spaltet JavaScript in traditionelle und eckige Ausführungskontexte auf. Alle im Kontext der Winkelausführung durchgeführten Vorgänge haben Winkeldatenbindungen, Ausnahmebehandlung, Eigenschaftenbeobachtung und andere Fähigkeiten. Wir können den Angular Execution -Kontext eingeben, indem wir $ Apply () in JavaScript verwenden. Denken Sie jedoch daran, dass an den meisten Orten (Angular) (wie Controllern, Diensten) die Richtlinie, die Ereignisse bearbeitet, als $ beantragt. Das Szenario, in dem $ beantragt wird, wird manuell aufgerufen, wenn Sie einen benutzerdefinierten Ereignishandler implementieren oder Rückrufe von Bibliotheken von Drittanbietern verarbeiten.
1. Geben Sie den Kontext der Winkelausführung ein, indem Sie den Umfang aufrufen. $ Anwenden (stimulusfn). Stimulusfn ist eine Funktion (einschließlich des Rahmens als Argument) oder eines eckigen Rechtsausdrucks, den wir im Kontext der Winkelausführung ausführen möchten.
2. Angular führt Stimulusfn aus, was normalerweise den Anwendungszustand ändert.
3. Angular tritt in die $ Digest -Schleife ein. Diese Schleife besteht aus zwei kleineren Schleifen, die $ evalasync Warteschlange und $ Beobachtungsliste verarbeiten. Die $ Digest -Schleife wird weiterhin iteriert, bevor das Modell stabil ist, d. H. Die $ evalasync -Warteschlange ist leer, und die $ Beobachtungsliste werden keine Änderungen festgestellt.
4. Die Warteschlange für $ evalaSync wird als Mittel verwendet, um zu arrangieren, dass der aktuelle Stapelrahmen aus dem aktuellen Stapelrahmen herausgesprungen werden muss (der Stapelrahmen bezieht sich auf den Bereich (oder den Raum), der der aktuell laufenden Funktion im Stapel zugewiesen wird. Die übergebene Parameter, die Rückgabedressadresse (die zu einer Funktion zum Ende der Funktion, in der die Funktion verwendet werden muss. Variablen, die auf dem Stapel gespeichert sind, befinden sich alle im Stapelrahmen. Dies wird normalerweise durch Verwendung von SetTimeout (0) erreicht. Aber die Methode SetTimeout (0) verursacht Langsamkeit, oder wenn der Browser nach dem Verarbeiten der Ereignisse die Ansicht zeichnet, blinkt die Ansicht (löst das Ansatz dieses Problem? Wie kann man sie lösen?).
5. $ Beobachtungsliste ist eine Sammlung von Ausdrücken, die in der neuesten Iteration geändert werden können. Wenn sich (Modell) ändert, wird die $ Watch -Funktion aufgerufen, um das Ziel zu erreichen, ein bestimmtes DOM neu zuzuweisen.
6. Sobald die Angular $ Digest -Schleife abgeschlossen ist (die in den vorherige 3 erwähnte Situation), wird der Browser nach dem Verlassen des Angular- und JavaScript -Kontextes die DOM als Antwort auf die Änderungen neu streichen.
Im Folgenden wird erklärt, wie das Beispiel "Hello Kitty" (-_-!) Datenbindungseffekt implementiert, wenn der Benutzer in das Textfeld in Text eingeht.
1. Zusammenstellungsphase:
A) NG-Model- und Eingabe-Direktive-Keydown-Ereignishörer sind in <Prüfung> angegeben.
B) {{Name}} Platzhalter (Interpolation, weiß nicht, wie man übersetzt) (Ausdruck) Legen Sie eine $ Watch fest, um zu antworten, wenn sich der Name ändert.
2. Laufzeitphase:
A) Drücken Sie die Taste "X" im Inut -Steuerelement, um den Browser ein Tastendown -Ereignis auszulösen.
b) Die Eingabeanweisung erfasst die Änderung des Textfeldwerts und ruft anschließend $ an ("name = 'x';") und aktualisiert das angewandte Modell im Kontext der Winkelausführung.
c) Angluar gilt "name = 'x';" zum Modell. (Das Modell hat sich geändert)
d) $ Digest Loop Start
e) $ Beobachtungsliste erkennt, dass der Wert des Namens geändert wurde, anschließend den Ausdruck {{Name}} erneut analysiert und dann die DOM aktualisiert.
f) Angular Exit (Angular) Ausführungskontext und dann den Kontext von Schlüsseldown -Ereignissen und JavaScript -Ausführung beenden;
g) Der Browser zeichnet die Ansicht neu und aktualisiert die Zeichen.
<! DocType html> <html lang = "zh-cn" ng-App> <kopf> <meta charset = "utf-8"> <titels> Hallo Kitty! </Title> <style type = "text/cs } </style> </head> <body> <Eingabe ng-model = "name"/> <p> Hallo {{Name}}!4. Umfang
Der Umfang ist dafür verantwortlich, Änderungen im Modell zu erkennen und als Ausführungskontext des Ausdrucks zu dienen. Umfang ist in einer Hierarchie verschachtelt, die einer Dom -Struktur ähnelt (wie wir bereits erfahren haben, kann die Teilung mit Controller in Verbindung gebracht werden). (Weitere Informationen finden Sie in der einzelnen Dokumentation, um festzustellen, welche Richtlinie ein neues Zielfernrohr erstellt.)
Das folgende Beispiel zeigt, dass der Wert des Ausdrucks "Namen" basierend auf dem Umfang ermittelt wird, von dem er abhängt (zu dem er gehört), und auch die Art der Wertschöpfung (ähnlich wie die JS -Scope -Kette, wenn Sie ihn nicht haben, suchen Sie bitte nach meinem Vater).
<! DocType html> <html Lang = "Zh-cn" ng-App> <kopf> <meta charset = "utf-8"> <titels> Scope </title> <style type = "text/css"> .ng-clok {display: None; } </style> </head> <body> <div ng-controller = "Controllera"> Hallo {{Name}}!; <div ng-controller = "ControllerC"> Hallo {{Name}}!; <div ng-controller = "ControllerD"> Hallo {{Name}}!; </div> </div> </div> <script src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion Controllera ($ scope) {$ scope.name = 'kitty'; } function ControllerB ($ scope) {$ scope.name = 'lclao'; } function ControllerC ($ scope) {$ scope.name = 'Jeffrey'; } Funktion ControllerD ($ Scope) {} </script> </body> </html>5. Controller
<! DocType html> <html Lang = "zh-cn" ng-App> <head> <meta charset = "utf-8"> <titels> controller </title> <style type = "text/csS"> .ng-clok {display: keine; } </style> </head> <body> <div ng-controller = "Controllera"> Hallo {{Name}}! <button ng-klick = "doit ()"> doit !! </button> </div> <script src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion Controllera ($ Scope) {$ scope.name = 'kitty'; $ scope.doit = function () {$ scope.name = "hübsch"; }; } </script> </body> </html>Controller ist der Code hinter der Ansicht (-_-!). Seine Verantwortung ist es, das Modell zu erstellen und es durch die Rückruffunktion in die Ansicht zu bringen. Die Ansicht ist der aktuelle Karten mit Vorlage (HTML) (Kaum übersetzt ...). Umfang ist der Link, der das Modell auf die Ansicht lenkt und das Ereignis an den Controller sendet.
Es ist wichtig, den Controller von der Ansicht zu trennen, weil:
1.Controller ist in JavaScript geschrieben. JavaScript ist unerlässlich. Ein wichtiger Befehl ist ein guter Weg, um das Verhalten einer Anwendung zu beschreiben. Controller sollten keine Anzeigeinformationen (logisch) enthalten (DOM -Referenzen oder HTML -Fragmente)
2. Die View -Vorlage ist in HTML geschrieben. HTML ist deklarativ. Deklarativ (HTML) ist eine gute Möglichkeit, eine Benutzeroberfläche zu beschreiben. Ansichten sollten kein Verhalten enthalten.
3. Da der Controller nicht weiß, welche Ansicht er entsprechen muss, kann ein Controller (indirekt) mehrere Ansichten verwenden. Dies ist wichtig für die Wiederverkleidung (Ersetzen von Skins?), Andere Gerätespezifische Ansichten (wie Mobiltelefone und Desktops) und die Messbarkeit von Code.
6. Modell
Modell kann als Datenobjekt verstanden werden. Es wird als Kombination mit der Vorlage verwendet, um Ansichten zu erstellen. Um das Modell in die Ansicht zu schreiben, muss das Modell nach Geltungsbereich verwiesen werden. Im Gegensatz zu vielen anderen Frameworks hat Angular keine Einschränkungen oder Anforderungen an das Modell. Es ist nicht erforderlich, eine zusätzliche Klasse hinzuzufügen, noch müssen Sie auf das Modell durch spezielle privilegierte Methoden zugreifen oder sie ändern. Der Datentyp des Modells kann ein primitiver Typ (String, Nummer ...), ein Schlüsselwertobjekt ({A: 1, B: 2}) oder eine Funktion (Funktion () {…}) sein. Einfach ausgedrückt, das Winkelmodell muss ein normales JavaScript -Objekt sein.
7. Ansicht
Ansicht ist etwas, das Benutzer sehen können. Die Aussicht wurde in der Vorlage geboren. Es verbindet sich mit dem Modell und macht es schließlich als Browser -Dom. Angular nimmt eine ganz andere Möglichkeit ein, die Ansicht für viele andere Vorlagensysteme zu präsentieren.
Andere Vorlagenmotoren: Viele Template -Motoren werden durch das Erstellen von HTML -Zeichenfolgen mit speziellen Tags implementiert. Normalerweise zerstören diese Template -Tags die HTML -Syntax, was bedeutet, dass der Code nicht über einen allgemeinen HTML -Editor bearbeitet werden kann (dies ist ...). Die Vorlagenzeichenfolge wird in die Template -Engine übergeben und mit den Daten verschmolzen. Generiert endlich eine HTML -Zeichenfolge. Diese Saiten werden im Allgemeinen an das DOM in .ernnerhtml geschrieben, was den Browser dazu veranlasst, den Vorlageninhalt zu rendern. Dieser Vorgang muss immer wieder wiederholt werden, wenn sich die Daten ändert. Die Granularität der Vorlage stimmt mit der Granularität des DOM -Updates überein. Der Schlüssel zu diesem Getreide ist, dass das Vorlagensystem Saiten verarbeitet.
Angular: Der Unterschied zwischen Winkelvorlagen besteht darin, dass es eher DOM-basierte als String-basiert ist. Die Vorlage muss noch einige Strings in die HTML schreiben, aber es ist immer noch HTML (nicht durch Einbettung der Vorlage in sich). Der Browser wandelt HTML in DOM um, und dann wird DOM zum Eingang des Compilers (Angular's Template Engine). Der Compiler sucht nach Anweisungen und setzt Uhren im Modell. Das Ergebnis ist eine Ansicht, die ständig aktualisiert wurde und das Modell und die Vorlage nicht neu einnimmt. Das Modell wird die einzige Quelle der Wahrheit für die Sicht.
8. Richtlinien
Die Richtlinie ist ein Verhalten (zum Beispiel im Beispiel "ausblenden") oder in der DOM -Konvertierung (benutzerdefinierte Tags, die eine Reihe von DOMs enthalten), und das Platzieren des Namens im Attribut, in den Tag -Namen und im Klassennamen kann die Anweisung auslösen. Mit der Richtlinie können Sie HTML -Tags auf deklarative Weise erweitern.
In den folgenden Beispielen gibt es noch einige Fragen. So löst $ Render @_ @aus
<! DocType html> <html Lang = "zh-cn" ng-App = "mydirective"> <kopf> <meta charset = "utf-8"> <title> Richtlinie </title> <style type = "text/cs"> .ng-cloak {display: none; · src="../angular-1.0.1.js" type="text/javascript"></script><script type="text/javascript"> angular.module("myDirective",[]) .directive("contenteditable",function() { return { require:'ngModel', link:function (scope, element, attr, ngModel) { function setVal() {ngmodel. $ setViewValue (Element.Text ()); setval ();9. Filter
Filter spielen eine Rolle bei der Datenumwandlung (Formatierung). Normalerweise hängen sie mit der Region zusammen, und verschiedene Regionen können unterschiedliche Ausgangsformate haben. Sie folgen dem Geist der Unix -Filter mit ähnlicher Syntax: | (Rohr)
<! DocType html> <html lang = "zh-cn" ng-App> <kopf> <meta charset = "utf-8"> <titels> filter </title> <style type = "text/csS"> .ng-clok {display: Keine; } </style> </head> <body> <div ng -init = "list = ['baidu b', 'sogou s', '360', '3SB']"> Zahlenformatierung: 1233211234567 -> {{1233211234567 ng-model = "myFilterText" type = "text"/> <br/> {{list | filter: myfiltertext | json}} <br/> </div> <script src = "../ Angular-1.0.1.js" type = "text/javascript"> </html> </body> </body> </body> </body> </html>10. Module und der Injektor
Injector ist ein Service -Locator. Jede Winkelanwendung hat einen separaten Injektor. Injector bietet eine Möglichkeit, Objektinstanzen nach Namen zu finden. Injector hält alle Objektinstanzen im internen Cache. Wenn der gleiche Name wiederholt aufgerufen wird, wird dieselbe Objektinstanz zurückgegeben. Wenn das Objekt nicht existiert, fordert es die Instanzfabrik auf, eine neue Instanz zu erstellen.
Modul ist eine Methode zur Konfiguration einer Instanzfabrik eines Injektors, als "Anbieter" bezeichnet.
// Erstellen Sie ein Modul var MyModule = angular.module ('myModule', []) // Konfigurieren Sie den Injektor myModule.factory ('servicea', function () {return {// anstelle von {}, geben Sie Ihre Objekterstellung hier};}); // Erstellen Sie einen Injektor und konfigurieren Sie ihn aus 'MyModule' var $ injector = angular.injector ('MyModule'); // ein Objekt aus dem Injektor mit Namen var servicea = $ injector.get ('servicea') abrufen; // Immer wahr, weil Instance cache $ injector.get ('servicea') === $ injector.get ('servicea'); // WAHRDas echte coole X des Injektors ist jedoch, dass es verwendet werden kann, um Methoden aufzurufen und den Typ "instanziieren". Diese wunderbare Funktion ist, dass Methoden und Typen die Ressourcen anfordern, von denen sie abhängen, anstatt nach ihnen zu suchen.
// Sie schreiben Funktionen wie diese. Funktion doomething (servicea, serviceB) {// Mach hier etwas. } // Angular liefert den Injektor für Ihre Anwendung var $ injector = ...; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Nennen Sie die Funktion Dosen (servicea, serviceB); // Das obige ist die traditionelle alte Methode ~ Folgendes ist die Methode des Angulars, über seine eigene Kuh zu sprechen X/////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////// Die coole Art, Abhängigkeiten zu bekommen. // Der $ Injector liefert die Argumente für die Funktion automatisch $ Injector.invoke (Dosen). // So ruft das Framework Ihre Funktionen aufBeachten Sie, dass das einzige, was wir schreiben müssen, unsere Funktion ist und wir die Ressource auflisten können, von der die Methode in den Argumenten der Funktion abhängt! Wenn Winkelaufrufe funktionieren, wird die Methode "Aufruf" verwendet, um die Funktionen von Funktionen automatisch zu füllen.
Beachten Sie, wie die Abhängigkeiten im Konstruktor im folgenden Beispiel aufgeführt sind. Wenn der NG-Controller den Controller instanziiert, werden die Abhängigkeitsressourcen automatisch bereitgestellt. Es ist nicht erforderlich, Injektorenreferenzen für Lastabhängigkeitsressourcen zu erstellen, zu suchen oder zu erstellen.
<! DocType html> <html lang = "zh-cn" ng-App = "TimeExample"> <kopf> <meta charset = "utf-8"> <titels> Injektor </title> <style type = "text/cs"> .ng-cloak {display: none; " []). Factory ("myclock", Funktion ($ timeout) {var time = {}; (Funktion Tick () {time.now = new Date (). toString (); $ timeout (tick, 1000);}) (); Rückgabezeit;}); /** * * @param $ scope * @param myclock Das Abhängigkeits -Myclock wird hier automatisch eingefügt! ! * @constructor */ function clockCtrl ($ scope, myclock) {$ scope.time = myclock; } </script> </body> </html>11. Angular Namespace
Um Namenskonflikte zu verhindern, fügt Angular das Präfix $ zum Namen des Objekts hinzu. Bitte verwenden Sie nicht $ Präfix in Ihrem Code, um Konflikte zu vermeiden. (-_- !!)
Das obige sind die Informationen zu AngularJS -Konzepten. Wir werden in Zukunft weiterhin relevante Artikel hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!