Preference order of including angularjs in index page?

Question

I'm newbie and learning to AngularJS and implementing a project. For many purpose, I have to include too many JavaScript in index.html page. I had read on another question that we have to include angular line first, before include any other js file.

I have to include many JavaScript but Confused in which order (preference), have to include there in index.html page. Please help me understand this. Even there are many type of angular (animate, route,), JQuery, TweenMax etc.

I'm putting my index.html page included JavaScript here.

<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/livescript" src="js/snap.js"></script>

are you getting any error? If not than the order seems fine. You just need to include Angular.js before any other library or js file. — anshulix, Dec 31 '15 at 07:21

score 4 · Accepted Answer · edited May 23 '17 at 12:15

4

The rule of thumb for source ordering is as follows:

If you want to use jQuery, include it first. As per these docs.
Include angular.js before everything else
Include all angular extension libraries
All other third party libraries
Your app code (if all your code is angular related, then the order of this shouldn't matter, unless you use angular.module() in a multifile way)

Also, look at this question with regards to where exactly to place your scripts: AngularJS in HEAD vs BODY

edited May 23 '17 at 12:15

Community

1
1

answered Dec 31 '15 at 07:27

Matt Way

32,319
10
79
85

Thanks for the quick answer !! :) – Asharam Seervi Dec 31 '15 at 10:20

score 0 · Answer 2 · answered Dec 31 '15 at 07:29

Always remember to refer scripts in the order of their dependency, for example "angular-route" and "angular-animate" are dependent on "angular" so angular must be on top , like-wise "angular" uses "jqLite" for providing basic jQuery functionality , but if u want to use full functionality you need to refer jQuery on top of "angular", now you can decide which one to refer in which order. I hope this helps.

Preference order of including angularjs in index page?

2 Answers2

Linked