In allen AngularJS-Beispielen wird die Angular-Bibliothek in die HEAD-Tags des Dokuments eingefügt. Ich habe ein bestehendes Projekt, das auf dem HTML5-Boilerplate-Layout basiert. Dies legt fest, dass JS-Bibliotheken ganz unten im DOM vor dem Tag </BODY> platziert werden sollen.AngularJS in HEAD vs BODY
Muss AngularJS im HEAD platziert werden?
AngularJS muss nicht in den HEAD platziert werden, und eigentlich sollten Sie dies normalerweise nicht tun, da dies das Laden des HTML blockieren würde.
Wenn Sie AngularJS jedoch unten auf der Seite laden, müssen Sie ng-cloak oder ng-bind verwenden, um den "Flash des nicht kompilierten Inhalts" zu vermeiden. Beachten Sie, dass Sie nur ng-cover/ng-bind auf Ihrer Seite "index.html" verwenden müssen. Wenn ng-include oder ng-view oder andere Angular-Konstrukte verwendet werden, um zusätzlichen Inhalt nach dem anfänglichen Laden der Seite einzuziehen, wird dieser Inhalt von Angular kompiliert, bevor er angezeigt wird.
Wenn die angle.js-Datei die 'ng-cloak'-Stilregel (die tatsächlich das Verbergen enthält) hinzugefügt wird, wird dies nicht zu einem Flash des nicht kompilierten Inhalts führen? –
@StuCox, ja, aber in der SO-Antwort, auf die ich oben Bezug genommen habe, wird angezeigt, welche CSS-Stile du selbst enthalten kannst, um das Problem zu vermeiden. –
Das scheint ein sehr merkwürdiger Vorschlag zu sein (auch wenn es offiziell ist), da Sie selbst eine CSS-Regel definieren müssen, obwohl sie vom Skript geladen wird. Redundanz! Für die meisten Angular-Anwendungen würde das Laden des HTML-Codes vor dem Laden von Angular tatsächlich Sinn machen. Das Markup im Körper ist normalerweise ohne Angular sowieso meistens nutzlos. – yerforkferchips
Nicht unbedingt.
Bitte sehen Sie sich diese http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview an. Wo der Winkel js am unteren Rand der Seite platziert wird, und immer noch die gleiche Ausgabe, wenn es an der Spitze platziert werden würde.
Danke. Ich weiß, dass es funktioniert - ich würde gerne wissen, ob es irgendwelche Konsequenzen hat oder ob es vom Angular-Team aus irgendeinem Grund missbilligt wird. – Cadriel
In diesem Beispiel mit Chrome habe ich immer noch einen Blitz. Die Verwendung von class = "ng-cloat" für den Body und später das H1-Element eliminierte den Flash des Template-Markups. – Fred
auch diese eine Antwort auf Google Groups gab mir perfekt Einblick (verkürzt):
Es auf den Inhalt Ihrer Zielseite wirklich abhängt. Wenn das meiste statisch ist mit nur wenigen AngularJS Bindings als ja, stimme ich zu, die Unterseite der Seite ist die beste. Aber im Falle eines voll dynamischen Inhaltes möchten Sie AngularJS ASAP [im Kopf] laden.
Also, wenn Ihr Inhalt zu einem großen Teil durch Angular erzeugt wird, dann würden Sie sich das zusätzliche CSS und ng-cloak Richtlinien von nur einschließlich Angular im Kopf speichern.
https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ
Laden Angular JS am unteren Rand der Seite nicht in einem Blitz hässlich führen {{etwas}} html. Wenn Sie die ng-cover-Anweisung im body-Tag verwenden, wird ein leerer Flash erstellt, bis der JS geladen ist. Es bietet also keinen Vorteil, AngularJS nur im head-Element zu laden. Sie könnten ng-Umhang zu jedem Element mit ng-Direktiven hinzufügen, aber Sie werden mit einem Flash von leeren Elementen enden. Soooo, laden Sie Angular und Ihre app.js-Dateien einfach in das head-Element, wie die Angular-Dokumentation in diesem Zitat aus ihrer Dokumentation empfiehlt: "Für das beste Ergebnis muss das angular.js-Skript in den Kopfbereich des HTML-Dokuments geladen werden"
"Platzieren Sie das Skript-Tag am Ende der Seite. Das Platzieren von Skript-Tags am Ende der Seite verbessert die Ladezeit von Apps, da das Laden von HTML durch das Laden des angular.js-Skripts nicht blockiert wird." - [Bootstrap-Seite] (http://docs.angularjs.org/guide/bootstrap) –
Entschuldigung - mein Wortlaut ist wahrscheinlich falsch. Script-Tags am Ende des Dokuments vor dem Body-Tag ENDING. :) – Cadriel
Best Practice ist es, Skripte auf den Boden des Körpers zu setzen, wie Sie sagen. Wenn jedoch Ihre gesamte Website von eckigen gesteuert wird, spielt es keine Rolle, ob Sie Kopf oder Körper verwenden, da der Inhalt erst geladen wird, wenn alle Skripts ausgeführt wurden. –