Heim > Artikel > Web-Frontend > Analyse des AngularJS-Initialisierungsprozesses (Bootstrap)_AngularJS
Analyse des AngularJS-Initialisierungsprozesses (Bootstrap)_AngularJS
- WBOYOriginal
- 2016-05-16 16:28:431124Durchsuche
Übersicht
In diesem Abschnitt wird der AngularJS-Initialisierungsprozess erläutert und wie Sie die AngularJS-Initialisierung bei Bedarf ändern können.
AngularJSs <script>-Tag </strong></p>
<p>Dieses Beispiel zeigt unsere empfohlene Methode zur Integration von AngularJS, die als „Auto-Initialisierung“ bezeichnet wird. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="79377" class="copybut" id="copybut79377" onclick="doCopy('code79377')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div>
<div class="codebody" id="code79377">
<br>
<!doctype html><br>
<html xmlns:ng="http://angularjs.org" ng-app><br>
<body><br>
...<br>
<script src="angular.js"><script><br>
</body><br>
</html><br>
</div>
<p><strong>FormatDatum</strong></p>
<p>1. Platzieren Sie das Skript-Tag im obigen Code unten auf der Seite. Wenn Sie das Skript-Tag unten platzieren, verkürzt sich die Ladezeit der Anwendung, da das Laden von HTML nicht durch das Laden von Angular.js-Skripten blockiert wird. Die neueste Version erhalten Sie unter http://code.angularjs.org. Bitte verweisen Sie in Ihrem Code nicht auf diese URL, da dadurch Sicherheitsrisiken für Ihre Website entstehen. Wenn es sich um eine experimentelle Entwicklung handelt, ist die Verlinkung auf unsere Website kein Problem. </p>
<p>1).angular-[version].js ist eine lesbare Version, die für Entwicklung und Debugging geeignet ist. <br>
2).angular-[version].min.js ist eine komprimierte und verschleierte Version, die für die Bereitstellung in ausgereiften Produkten geeignet ist. </p>
<p>2. Bitte fügen Sie die ng-app-Direktive in den Tag-Stammknoten Ihrer Anwendung ein. Wenn Sie möchten, dass AngularJS das gesamte <html>-Tag ausführt. <br>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="71091" class="copybut" id="copybut71091" onclick="doCopy('code71091')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div>
<div class="codebody" id="code71091">
<br>
<html ng-app><br>
</div>
<p>3. Wenn Sie die alte Version der Befehlssyntax verwenden möchten: ng:, müssen Sie auch den XML-Namespace in <html> schreiben, damit AngularJS ordnungsgemäß unter IE funktioniert. (Dies geschieht aus historischen Gründen. Wir empfehlen nicht, die ng:-Syntax weiterhin zu verwenden.) </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="49065" class="copybut" id="copybut49065" onclick="doCopy('code49065')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div>
<div class="codebody" id="code49065">
<br>
<html xmlns:ng="http://angularjs.org"><br>
</div>
<p><strong>Automatische Initialisierung</strong></p>
<p>AngularJS wird ausgeführt, wenn das DOMContentLoaded-Ereignis ausgelöst wird, und findet Ihren Anwendungsstammbereich über die ng-app-Direktive. Wenn die ng-app-Direktive gefunden wird, führt AngularJS Folgendes aus: </p>
<p>1. Laden Sie Module, die sich auf den Inhalt des Befehls beziehen. <br>
2. Erstellen Sie eine Anwendung „Injektor“. <br>
3. Sie haben bereits die Bezeichnung der ng-app-Direktive als Root-Knoten, um das DOM darin zu kompilieren. Dadurch können Sie nur einen Teil des DOM für Ihre AngularJS-Anwendung angeben. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="88586" class="copybut" id="copybut88586" onclick="doCopy('code88586')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div>
<div class="codebody" id="code88586">
<br>
<!doctype html><br>
<html ng-app="optionalModuleName"><br>
<body><br>
Ich kann hinzufügen: {{ 1 2 }}.<br>
& Lt; script src = "angular.js" & lt;/script & gt;
</body><br>
</html><br>
<br>
</div>
<p>Manuelle Initialisierung<strong></strong>
</p>Wenn Sie den Initialisierungsprozess aktiv steuern müssen, können Sie die Methode der manuellen Ausführung des Bootprogramms verwenden. Sie verwenden es beispielsweise, wenn Sie einen „Script Loader“ verwenden oder einige Vorgänge ausführen müssen, bevor AngularJS die Seite kompiliert. <p>
</p>Das folgende Beispiel zeigt, wie AngularJS manuell initialisiert wird. Seine Wirkung entspricht der Verwendung der ng-app-Direktive. <p>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="70023" class="copybut" id="copybut70023" onclick="doCopy('code70023')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span><div class="codebody" id="code70023">
<br>
<!doctype html><br>
<html xmlns:ng="http://angularjs.org"><br>
<body><br>
Hallo {{'World'}}!<br>
<script src="http://code.angularjs.org/angular.js"></script>
angle.element(document).ready(function() {
angle.bootstrap(document);
});