Why does the first example on angularjs.org have a script tag in the html head section.

[Rick Suggs]

I've been reading for the past few years.. that using a script tag in the head section is a bad practice, that it blocks initial rendering of the html structure for the website and slows down the initial rendering. It has been recommended, to put the script tags at the end of the body section.

Now on my first visit to the angularjs homepage (angularjs.org) I see that the first example has the script tag in the head section. Is there a reason that angular decided to do that, would it still work with the script tag at the bottom of the body?

Thanks.

[Rajesh Segu]

I think the way that angular works is like a 'compiler', you need it before you can do much. Which means, you could put it at the end but on slow connections you might experience the sudden flash of changes in your screen once angular is loaded and executes all the bindings / directives.

Correct me if I am wrong, as I am new to the Angular world.

- Rajesh Segu

[Sander Elias]

Hi Rick,

You can put it in the bottom if you prefer that. The samples on the angular site are just that, samples! Most of them are not code that is production ready. The reason behind this is that the samples need to be as simple as possible to highlight the content they are wrote upon.

The point that Rajesh is making is not true (Rajesh, consider yourself corrected ;) ) No matter where you put in the AngularJS script. it only kicks in after the complete page has been loaded.If you want to prevent the sudden flash he is talking about, have a look at ng-cloak, and ng-bind. Those are there to help in this case too.

Regards

Sander

[Rajesh Segu]

Thanks Sander. Exception is when script tags are used with 'async' attribute.

- Rajesh Segu

[Adam Marr]

Don't get too caught up in that. There are plenty of valid reasons to have JS files - especially certain libraries - load in the head as opposed to the end of the body.

[Rick Suggs]

Well thanks for the info, if I end up using Angular, I will probably find a way to load it with requirejs so it's not a big deal for me.

I am just having a hard time understanding why such a prominent lib is not following a design pattern / standard / best practice that has been so pervasive for the last several years. Especially a library that is sponsored by Google. On the first visit to the page, a newcomer to the JavaScript world would see that and follow that example with the code they are writing.