AngularJS in HEAD vs BODY

Question

In all AngularJS examples, the Angular library is placed in the HEAD tags of the document. I have an existing project that was built on the HTML5 Boilerplate layout. This determines that JS libraries should be located at the very bottom of the DOM before the </BODY> .

Do I need to host AngularJS in HEAD?

Answer 1

AngularJS does not need to be placed in HEAD, and in fact you usually should not, as this blocks the loading of HTML.

However, when you load AngularJS at the bottom of the page, you will need to use ng-cloak or ng-bind to avoid a “flash of uncompressed content”. Note that you only need to use ng-cloak / ng-bind on the index.html page. When ng-include or ng-view or other Angular constructors are used to load additional content after the page is first loaded, this content will be compiled by Angular before it is displayed.

See also stack overflow.

Answer 2

This answer in google groups gave me a complete view (abbreviated):

It depends on the content of the landing page. If most is static with multiple AngularJS attachments than yes, I agree, the bottom of the page is the best. But in the case of fully dynamic content, you would like to download AngularJS ASAP [in the head].

So, if your content is generated mostly through Angular, you will save extra CSS and ng-cloak directives by simply including Angular in your head.

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

Answer 3

Not necessary.

Please take a look at this http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview . Where angular js is placed at the bottom of the page and still displays the same result if it should be located at the top.

Answer 4

Downloading Angular JS at the bottom of the page results in an ugly {{something}} html error. Using the ng-cloak directive in the body tag creates an empty flash until JS is loaded, so it does not add any benefit, it just loads AngularJS into the head element. You can add ng-cloak to each element with ng directives, but you get a flash of empty elements. Soooo, just download Angular, and your app.js files in the head element, like the Angular documentation, recommend in this quote from your documentation: "For best results, angular.js script should be loaded into the section of the chapter of the html document"