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?

Saucier

"Place the script tag at the bottom of the page. Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of the angular.js script." -- Bootstrap page – Unfurl

Sorry - my wording is probably off. Script tags at the bottom of the document before the ENDING body tag. :) – Saucier

Best practice is to put scripts at the bottom of body as you say. However, if your entire site is driven by angular then it doesn't matter if you do head or body since content won't load until all the scripts have executed anyway. – Chambray

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://mcmap.net/q/276086/-alternative-to-ng-show-hide-or-how-to-load-only-relevant-section-of-dom

Unfurl

Given that the ng-cloak style rule (which actually does the hiding) is added by the angular.js file, won't this still give a flash of uncompiled content? – Conchaconchie

@StuCox, yes, but in the SO answer I referenced above, it shows which CSS styles you can include yourself to avoid the problem. – Unfurl

That seems like a very odd suggestion (even if it's official), seeing as you have to define a CSS rule yourself even though it'll be loaded by the script. Redundancy! For most Angular applications, having the HTML not load before Angular is loaded would actually make sense- The markup in the body is usually mostly useless without Angular anyways. – Sines

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

Sines

Answer 3

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.

Controversial

Thank you. I know it works - I guess I'd like to know if there are any consequences to doing so or if its frowned upon at all by the Angular team for any reason. – Saucier

In that example using Chrome, I still got a flash. Using class="ng-cloak" on the body, and later the H1 element eliminated the flash of template markup. – Postobit

Answer 4

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"

Fenella