Where to place the bootstrap angular.js file?

Rookie

unread,

Aug 19, 2013, 4:11:25 PM8/19/13

to ang...@googlegroups.com

Hi,

In most of tutorial and sample apps found on angularjs.org, the angular.js file is loaded within the <head> block (namely, near the top of the html page).

However, in the developer guide http://docs.angularjs.org/guide/bootstrap, it is recommended to "Place the script tag at the bottom of the page."

So, which one is better for placing the angular.js file, the top of the bottom?

Luke Kende

unread,

Aug 20, 2013, 3:01:43 AM8/20/13

to ang...@googlegroups.com

The bottom. You don't want the browser to wait on rendering the html until all <head> files are loaded in general.

Angular's examples and tutorials at times show simplified methods to get people started, but once you get into it more you will learn how it should "really be done". Another example is that controllers should not be defined on the global window object:

Like this...

function TestCtrl($scope, $timeout,){ ... }

becomes...

angular.module('myapp',[]).

controller('TestCtrl',['$scope', '$timeout', function TestCtrl($scope, $timeout,){ ... }])

Good luck!

Pawel Kozlowski

unread,

Aug 20, 2013, 3:20:14 AM8/20/13

to ang...@googlegroups.com

On Tue, Aug 20, 2013 at 9:01 AM, Luke Kende <luke....@gmail.com> wrote:
> The bottom. You don't want the browser to wait on rendering the html until
> all <head> files are loaded in general.

It is not that simple and I don't think we can have hard & fast rules
here. 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.

Also the ng-cloak and the ng-bind directives start to come into play
here. So it really depends on the content of the landing page.
There is longer discussion of those topics in the last chapter of
Peter's and mine book:
http://www.packtpub.com/angularjs-web-application-development/book

Cheers,
Pawel

--
AngularJS book:
http://www.packtpub.com/angularjs-web-application-development/book
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

worookie

unread,

Aug 20, 2013, 3:41:15 AM8/20/13

to ang...@googlegroups.com

To Luke and Pawel,

Thanks for the nice tips which are very useful.

BTW, I just pre-ordered a copy of the book AngularJS Web Application Development.

-Rookie

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/XTJFkQHjW5Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

Luke Kende

unread,

Aug 20, 2013, 3:42:01 AM8/20/13

to ang...@googlegroups.com

Good information Pawel! ... but the nature of the question warranted a hard and fast answer. I think loading at the bottom is typically correct in what newbies need to see to experience and understand things like ng-bind and ng-cloak.

None-the-less, I revise my statements to:

The bottom [IF] you don't want the browser to wait on rendering the html until all <head> files are loaded in general.

And thanks for all your work and contributions to angular world!

Reply all

Reply to author

Forward