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

Not necessarily.

Please take a look at this http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview. Where the angular js is placed at the bottom of the page, and still renders the same output if it were to be placed at the top.

Answer 3

Loading Angular JS at the bottom of the page does result in a flash of ugly {{ something }} html. Using the ng-cloak directive in the body tag creates an empty flash until the JS is loaded so it doesn't add any benefit over just loading AngularJS in the head element. You could add ng-cloak to every element with ng directives in it but you'll end up with a flash of empty elements. Soooo, just load Angular and your app.js files in the head element as the Angular documentation recommends in this quote from their documentation: "For the best result, the angular.js script must be loaded in the head section of the html document"

Answer 4

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