AngularJS dans HEAD vs BODY

Dans tous les exemples AngularJS, la bibliothèque Angular est placée dans les balises HEAD du document. J’ai un projet existant qui a été construit sur la disposition HTML5 Boilerplate. Cela définit que les bibliothèques JS doivent être placées tout en bas du DOM avant la .

AngularJS doit-il être placé dans le HEAD?

AngularJS n’a pas besoin d’être placé dans HEAD, et en réalité, vous ne devriez pas le faire, car cela bloquerait le chargement du code HTML.

Cependant, lorsque vous chargez AngularJS au bas de la page, vous devez utiliser ng-cloak ou ng-bind pour éviter le “flash de contenu non compilé”. Notez que vous devez uniquement utiliser ng-cloak / ng-bind sur votre page “index.html”. Lorsque ng-include ou ng-view ou d’autres constructions Angular sont utilisées pour extraire du contenu supplémentaire après le chargement initial de la page, ce contenu sera compilé par Angular avant d’être affiché.

Voir aussi https://stackoverflow.com/a/14076004/215945

Cette réponse sur Google Groupes m’a donné un aperçu parfait (raccourci):

Cela dépend vraiment du contenu de votre page de destination. Si la majeure partie est statique avec seulement quelques liaisons AngularJS, oui, je suis d’accord, le bas de la page est le meilleur. Mais dans le cas d’un contenu entièrement dynamic, vous souhaitez charger AngularJS ASAP [dans la tête].

Donc, si votre contenu est généré en grande partie via Angular, vous vous épargnez les directives CSS et ng-cloak supplémentaires en incluant simplement Angular dans la tête.

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

Pas nécessairement.

S’il vous plaît jeter un oeil à cette http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview . Où js angular est placé au bas de la page, et rend toujours la même sortie si elle devait être placée en haut.

Le chargement de JS angular au bas de la page entraîne un flash de {html}} html moche. L’utilisation de la directive ng-cloak dans la balise body crée un flash vide jusqu’à ce que le JS soit chargé, ce qui n’ajoute aucun avantage par rapport au chargement de AngularJS dans l’élément head. Vous pouvez append ng-cloak à chaque élément contenant des directives ng, mais vous vous retrouverez avec un flash d’éléments vides. Soooo, chargez simplement Angular et vos fichiers app.js dans l’élément head, comme le recommande la documentation Angular dans cette citation de leur documentation: “Pour un résultat optimal, le script angular.js doit être chargé dans la section head du document html”