angular.js multiple js files

Question

I have a growing angular app, and my index.html already looks like this:

<script type="text/javascript" src="public/js/libs/bower/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/spin.js/spin.js"></script>
<script type="text/javascript" src="public/js/libs/overlay.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular/angular.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="public/js/libs/bower/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="public/js/libs/jquery-shake.js"></script>
<script type="text/javascript" src="public/js/libs/bower/pwstrength-bootstrap/dist/pwstrength-bootstrap-1.2.0.min.js"></script>
<script type="text/javascript" src="public/js/app.js"></script>
<script type="text/javascript" src="public/js/controllers/import.js"></script>
<script type="text/javascript" src="public/js/controllers/login.js"></script>
<script type="text/javascript" src="public/js/controllers/main_page.js"></script>
<script type="text/javascript" src="public/js/controllers/manage_users.js"></script>
<script type="text/javascript" src="public/js/controllers/new_user.js"></script>
<script type="text/javascript" src="public/js/auth.js"></script>
<script type="text/javascript" src="public/js/services/httpAuthInterceptor.js"></script>
<script type="text/javascript" src="public/js/services/spinnerHttpInterceptor.js"></script>
<script type="text/javascript" src="public/js/router.js"></script>
<script type="text/javascript" src="public/js/utils.js"></script>

I dont want my index.html to be a mess and Require.JS is not an option cause it must be used with angularAMD which is incompatible with angular route resolve - a mandatory part of my app.

How can i clean up my JS load? I heard about Grunt, How can it help me? It's only a task runner...

Can you elaborate on "angularAMD which is incompatible with angular route resolve"? In what scenario is route resolve does not work for you when using angularAMD? — marcoseu
– marcoseu, Commented Jul 22, 2014 at 13:11

IMujagic · Accepted Answer · 2014-07-21 07:41:59Z

1

My suggestion is not to minify angular js part, it's not best practice. Try this grunt plugin, it's angular builder, and it takes care of your dependecies and another stuffs, just read the description.

https://www.npmjs.org/package/grunt-angular-builder

Also you can use html2js to load your templates into $templateCache, so your app will not go to the server every time you need another template.

https://www.npmjs.org/package/grunt-html2js

If you try to user RequireJs or Browserify JS, it can help in some cases, but it does not take care about your dependecies, and project structure. also you will have a troubles with writing unit tests if your app use requireJS and Browserify. So my suggestion is not to use these two modules with Angular.

edited Jul 21, 2014 at 7:41

answered Jul 20, 2014 at 15:05

IMujagic

1,2791 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul · Accepted Answer · 2014-07-20 13:22:12Z

1

Grunt can help a lot, via its plugins. In particular, look at the plugin usemin, which lets you put in comments around your html to identify how you want to package your files. Then when you run the associated grunt task, it will pull the <script> tags out of your html, concat and minify the files associated with them, and replace them with a single <script> tag pointing to the concatenated & minified result. Pretty slick.

answered Jul 20, 2014 at 13:22

Paul

36.4k12 gold badges98 silver badges124 bronze badges

1 Comment

markau Over a year ago

Yes and CSS too; so you end up with 1 html file, 1 css and 1 js, all minified.

Collectives™ on Stack Overflow

angular.js multiple js files

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related