In tutti gli esempi AngularJS, la libreria Angular viene inserita nei tag HEAD del documento. Ho un progetto esistente che è stato costruito sul layout HTML5 Boilerplate. Questo definisce che le librerie JS devono essere posizionate nella parte inferiore del DOM prima del tag </BODY>.AngularJS in HEAD vs BODY
AngularJS deve essere posizionato nel TESTA?
AngularJS non deve essere inserito nell'HEAD, e in realtà normalmente non dovrebbe, poiché questo potrebbe bloccare il caricamento dell'HTML.
Tuttavia, quando si carica AngularJS nella parte inferiore della pagina, sarà necessario utilizzare ng-cloak o ng-bind per evitare il "flash di contenuto non compilato". Nota che devi solo usare ng-cloak/ng-bind nella tua pagina "index.html". Quando ng-include o ng-view o altri costrutti angolari vengono utilizzati per inserire contenuto aggiuntivo dopo il caricamento iniziale della pagina, tale contenuto verrà compilato da Angular prima che venga visualizzato.
Vedi anche https://stackoverflow.com/a/14076004/215945
Dato che la regola di stile 'ng-cloak' (che in realtà nasconde) viene aggiunta dal file angular.js, questo non darà ancora un lampo di contenuto non compilato? –
@StuCox, sì, ma nella risposta SO a cui ho fatto riferimento sopra, mostra quali stili CSS è possibile includere per evitare il problema. –
Sembra un suggerimento molto strano (anche se è ufficiale), visto che devi definire una regola CSS anche se verrà caricata dallo script. Ridondanza! Per la maggior parte delle applicazioni angolari, l'HTML non viene caricato prima che Angular venga caricato avrebbe davvero senso. Il markup nel corpo di solito è quasi sempre inutile senza Angular comunque. – yerforkferchips
Non necessariamente.
Si prega di dare un'occhiata a questo http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview. Dove il js angolare è posizionato nella parte inferiore della pagina, e rende ancora lo stesso output se dovesse essere posizionato in alto.
Grazie. So che funziona, suppongo che mi piacerebbe sapere se ci sono delle conseguenze in tal senso o se è sfigurato dal team di Angular per nessuna ragione. – Cadriel
Nell'esempio che utilizza Chrome, ho ancora un flash. Usando class = "ng-cloak" sul corpo, e in seguito l'elemento H1 ha eliminato il flash del markup del template. – Fred
Questa risposta su Google Gruppi mi ha dato una visione perfetta (abbreviato):
E 'davvero dipende dal contenuto della pagina di destinazione. Se la maggior parte di esso è statico con solo poche associazioni AngularJS di sì, sono d'accordo, la parte inferiore della pagina è la migliore. Ma nel caso di un contenuto dinamico , si desidera caricare AngularJS ASAP [nella testa].
Così, se il contenuto è generato in gran parte attraverso angolare, devi risparmiare il più CSS e ng-cloak direttive semplicemente includendo angolare nella testa.
https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ
Caricamento angolare JS in fondo alla pagina si traduca in un lampo di brutto {{qualcosa}} html. L'uso della direttiva ng-cloak nel tag body crea un flash vuoto fino a quando il JS non viene caricato, in modo che non aggiunga alcun vantaggio oltre il semplice caricamento di AngularJS nell'elemento head. Si potrebbe aggiungere ng-cloak a ogni elemento con le direttive ng in esso, ma si finirà con un lampo di elementi vuoti. Soooo, caricate semplicemente Angular e i vostri file app.js nell'elemento head come raccomandato dalla documentazione Angular in questa citazione dalla loro documentazione: "Per il miglior risultato, lo script angular.js deve essere caricato nella sezione head del documento html"
"Posiziona il tag di script nella parte inferiore della pagina. L'inserimento di tag di script alla fine della pagina migliora il tempo di caricamento dell'app perché il caricamento HTML non viene bloccato dal caricamento dello script angular.js." - [Bootstrap page] (http://docs.angularjs.org/guide/bootstrap) –
Mi dispiace - la mia formulazione è probabilmente off. Tag di script nella parte inferiore del documento prima del tag body ENDING. :) – Cadriel
La pratica migliore è mettere gli script sul fondo del corpo come dici tu. Tuttavia, se il tuo intero sito è guidato da angolare, non importa se fai head o body poiché il contenuto non verrà caricato fino a quando tutti gli script non saranno comunque eseguiti. –