AngularJS in HEAD vs BODY

72

In allen AngularJS-Beispielen wird die Angular-Bibliothek in den HEAD-Tags des Dokuments platziert. Ich habe ein vorhandenes Projekt, das auf dem HTML5 Boilerplate-Layout basiert. Dies definiert, dass JS-Bibliotheken ganz unten im DOM vor dem </BODY>Tag platziert werden sollen.

Muss AngularJS im HEAD platziert werden?

angularjs html5boilerplate Cadriel
quelle
"Platzieren Sie das Skript-Tag am unteren Rand der Seite. Durch Platzieren von Skript-Tags am Ende der Seite wird die Ladezeit der App verbessert, da das Laden von HTML nicht durch das Laden des Skripts angular.js blockiert wird." - Bootstrap Seite
Mark Rajcok
Entschuldigung - mein Wortlaut ist wahrscheinlich falsch. Skript-Tags am unteren Rand des Dokuments vor dem ENDING-Body-Tag. :)
Cadriel
Die beste Vorgehensweise besteht darin, Skripte, wie Sie sagen, am unteren Rand des Körpers zu platzieren. Wenn Ihre gesamte Site jedoch von einem Winkel gesteuert wird, spielt es keine Rolle, ob Sie Kopf oder Körper verwenden, da der Inhalt erst geladen wird, wenn alle Skripte trotzdem ausgeführt wurden.
Matt Pileggi

Antworten:

77

AngularJS muss nicht im HEAD platziert werden, und das sollten Sie normalerweise nicht, da dies das Laden des HTML-Codes blockieren würde.

Wenn Sie jedoch AngularJS am Ende der Seite laden, müssen Sie ng-cloak oder ng-bind verwenden , um das "Flashen von nicht kompiliertem Inhalt" zu vermeiden. Beachten Sie, dass Sie auf Ihrer Seite "index.html" nur ng-cloak / ng-bind verwenden müssen. Wenn ng-include oder ng-view oder andere Angular-Konstrukte verwendet werden, um nach dem ersten Laden der Seite zusätzlichen Inhalt abzurufen, wird dieser Inhalt von Angular kompiliert, bevor er angezeigt wird.

Siehe auch https://stackoverflow.com/a/14076004/215945

Mark Rajcok
quelle
2
Da die ng-cloakStilregel (die eigentlich nicht das Versteck) durch die Angularjs Datei hinzugefügt, wird das nicht noch einen Blitz der kompilierten Inhalte geben?
Stu Cox
2
@StuCox, ja, aber in der SO-Antwort, auf die ich oben verwiesen habe, wird gezeigt, welche CSS-Stile Sie selbst einschließen können, um das Problem zu vermeiden.
Mark Rajcok
14
Das scheint ein sehr seltsamer Vorschlag zu sein (auch wenn er offiziell ist), da Sie eine CSS-Regel selbst definieren müssen, obwohl sie vom Skript geladen wird. Redundanz! Für die meisten Angular-Anwendungen wäre es tatsächlich sinnvoll, den HTML-Code nicht vor dem Laden von Angular zu laden. Das Markup im Body ist normalerweise sowieso ohne Angular meistens nutzlos.
Yerforkferchips
41

Diese eine Antwort auf Google Groups gab mir einen perfekten Einblick (verkürzt):

Es hängt wirklich vom Inhalt Ihrer Zielseite ab. Wenn das meiste davon statisch ist und nur wenige AngularJS-Bindungen aufweist als Ja, stimme ich zu, ist der untere Rand der Seite der beste. Bei einem volldynamischen Inhalt möchten Sie AngularJS jedoch so schnell wie möglich [im Kopf] laden.

Wenn Ihr Inhalt also größtenteils über Angular generiert wird, sparen Sie sich das zusätzliche CSS und die ng-cloakAnweisungen, indem Sie Angular einfach in den Kopf aufnehmen.

https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ

yerforkferchips
quelle
1

Nicht unbedingt.

Bitte werfen Sie einen Blick auf diese http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview . Wo der Winkel js am unteren Rand der Seite platziert ist und immer noch die gleiche Ausgabe wiedergibt, wenn er am oberen Rand platziert wird.

Rajkamal Subramanian
quelle
2
Vielen Dank. Ich weiß, dass es funktioniert - ich denke, ich würde gerne wissen, ob dies Konsequenzen hat oder ob es vom Angular-Team aus irgendeinem Grund überhaupt verpönt wird.
Cadriel
4
In diesem Beispiel mit Chrome habe ich immer noch einen Blitz. Durch die Verwendung von class = "ng-cloak" am Körper und später durch das H1-Element wurde das Aufblitzen des Vorlagen-Markups beseitigt.
Fred
1

Das Laden von Angular JS am Ende der Seite führt zu einem Aufblitzen von hässlichem {{etwas}} HTML. Wenn Sie die ng-cloak-Direktive im body-Tag verwenden, wird ein leerer Flash erstellt, bis der JS geladen wird, sodass kein Vorteil gegenüber dem Laden von AngularJS in das head-Element entsteht. Sie können jedem Element mit ng-Anweisungen ng-cloak hinzufügen, aber am Ende werden leere Elemente angezeigt. Soooo, laden Sie einfach Angular und Ihre app.js-Dateien in das head-Element, wie in der Angular-Dokumentation in diesem Zitat aus der Dokumentation empfohlen: "Für das beste Ergebnis muss das Angular.js-Skript im head-Abschnitt des HTML-Dokuments geladen werden."

Steve Carey
quelle