AngularJS in HEAD vs BODY

Question

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

Does AngularJS need to be placed in the HEAD?

Answer 1

AngularJS does not need to be placed in the HEAD, and actually you normally shouldn't, since this would block loading the HTML.

However, when you load AngularJS at the bottom of the page, you will need to use ng-cloak or ng-bind to avoid the "flash of uncompiled content". Note that you only need to use ng-cloak/ng-bind on your "index.html" page. When ng-include or ng-view or other Angular constructs are used to pull in additional content after the initial page load, that content will be compiled by Angular before it is displayed.

See also https://stackoverflow.com/a/14076004/215945

Answer 2

This one answer on Google Groups gave me perfect insight (shortened):

It really depends on the content of your landing page. If most of it is static with only few AngularJS bindings than yes, I agree, the bottom of the page is the best. But in case of a fully-dynamic content you would like to load AngularJS ASAP [in the head].

So if your content is generated in large part through Angular, you'd save yourself the extra CSS and ng-cloak directives by just including Angular in the head.

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