Ich hoffe, ich hoffe, ich hoffe, ich kann sie weiter schreiben. Der Inhalt dieses Artikels stammt hauptsächlich aus dem Inhalt des http://docs.angularjs.org/guide/ dokuments, fügt jedoch auch einige Ihrer eigenen Verständnis- und Versuchsergebnisse hinzu.
1. Zusammenfassung
In diesem Artikel wird der Prozess der Winkelinitialisierung erläutert und wie man Winkel manuell initialisieren, wenn Sie ihn benötigen.
2. Angular <Script> Tag
Dieses Beispiel wird verwendet, um zu zeigen, wie Angular über den empfohlenen Pfad integriert wird, um eine automatische Initialisierung zu erreichen.
<! docType html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "Angular.js"> </body> </html>
Platzieren Sie das SCIPRT -Tag am Ende der Seite. Dies kann die Belastung von HTML durch Laden von angular.js verhindern, wodurch die Ladezeit der Anwendung verkürzt wird. Wir können die neueste Version von AngularJs in http://code.angularjs.org erhalten. Verweisen Sie aus Sicherheitsgründen nicht direkt auf diese Adresse im Produkt, um das Skript zu laden. Aber wenn es nur um Forschung und Lernen geht, spielt es keine Rolle, ob es sich um eine direkte Verbindung handelt.
Select: Angular- [Version] .js ist eine Version, die zu lesen ist und für die tägliche Entwicklung und Debugging geeignet ist.
Select: Angular- [Version] .min.js ist eine komprimierte und verschleierte Version, die für die Verwendung im Endprodukt geeignet ist.
Legen Sie "NG-App" in den Stammknoten der Anwendung. Wenn Angular Ihre Anwendung automatisch starten soll, können Sie sie normalerweise in das <html> -Tag platzieren.
<html ng-App>
Wenn wir die Syntax "ng:" im Old School-Stil verwenden müssen, müssen wir dem HTML-Tag einen XML-Namesspace in das HTML-Tag zu "Bitte" den IE hinzufügen. (Dies ist ein historischer Grund, und wir empfehlen nicht, NG zu verwenden :)
<html xmlns: ng = "http://angularjs.org">
3. Automatische Initialisierung
Angular wird im Domcontent-Ereignis automatisch initialisiert, und Angular findet den von Ihnen angegebenen Anwendungsrootknoten über die NG-App-Anweisung. Wenn gefunden, wird Angular Folgendes tun:
Lastanweisungen im Zusammenhang mit dem Modul.
Erstellen Sie einen anwendungsbezogenen Injektor (Abhängigkeitsmanager).
Geben Sie den Stammknoten mit NG-App an und starten Sie die relevante "Kompilierung" der DOM. Mit anderen Worten kann ein Teil der Seite (nicht <html>) als Wurzelknoten verwendet werden, wodurch der Winkelbereich einschränkt.
<! DocType html> <html lang = "zh-cn"> <kopf> <meta charset = "utf-8"> <title> bootstrap-auto </title> <style type = "text/csS"> .ng-clok {display: keine; } </style> </head> <body> Hier ist die Außenseite von ng-App ~~ {{1+2}} <div ng-App> Hier befindetHINWEIS: Der "ng-cloak" darin wird vor der Zusammenstellung der Angular.js-Kompilierung verwendet (ja! Das ist richtig! Es ist vor Abschluss der Kompilierung, nicht bevor die AngularJs geladen werden. Wenn Sie diese Situation gut vermeiden möchten, ist der beste Weg, den Bösen zu optimieren. Class = "Ng-Cloak" -Methode.
4. Manuelle Initialisierung
Wenn wir den Initialisierungsprozess weiter steuern möchten (z. B. müssen Sie Angular.js über den Skriptlader laden oder einige Vorgänge vor der Winkelkompilierung durchführen), können wir stattdessen eine manuell als Startmethode bezeichnete Startmethode verwenden.
Das folgende Beispiel entspricht der Verwendung von NG-App, der Richtlinie:
<! DocType html> <html lang = "zh-cn"> <kopf> <meta charset = "utf-8"> <title> bootstrap-Manual </title> <style type = "text/css"> .ng-cloak {display: keine; } </style> </head> <body> Hier ist die Außenseite von ng-App ~~ {{1+2}} <div id = "rootofapp"> Dies ist das Innere von ng-App ~~~ {{1+3*2}}} </div> <script src = "../ Angular-1.0.1.js. type = "text/javaScript"> angular.element (document) .ready (function () {angular.bootstrap (angular.element (document.getElementById ("rootofApp"));}); </script> </body> </html>Das heißt, unser Code kann in den folgenden Schritten geschrieben werden:
1. Nachdem die Seite und der andere Code geladen wurden, finden Sie den Stammknoten der Anwendungsvorlage.
2. Rufen Sie angular.bootstrap auf und lassen Sie die Angular die Vorlage in eine ausführbare, zwei-Wege-Bindungsanwendung zusammenstellen!
Wir werden in Zukunft weiterhin relevante Artikel hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!
Verwandte Artikel:
AngularJS Bootstrap ist mit dem Front -End -Framework ausgestattet - JS -Steuerteil
AngularJS Bootstrap ist mit Front -End -Framework ausgestattet - Basis -Seite
AngularJS Bootstrap mit Front -End -Gerüst - Vorbereitungsarbeit
AngularJS Bootstrap Detaillierte Erklärung und Beispielcode