Large project finalization in AngularJS

Question

My 1,5 years old project is starting to an end. I need however review the code and make the final adjustments. The app consists of 8 modules, 13 controllers, 16 directives, 5 factories, Google+ and Facebook login, custom twitter bootstrap and finally AngularUI. Right now everything has its own js file for a total of 29 js files.

I need to minimize the requests to the server.
1. Can I make one js file of everything? If so in what order should I put them? which comes first?
2. Im going to use async for downloading the js files. However is it better if I async download multiple small js files or a single but large one? 2. I have around 26 when conditions in RouteProvider. Should I be worried?
3. Do you have any other tips regarding the finalization for big AngularJS projects? Any best practices out there?

Thank you!

Answer 1

I recommend you use GruntJS as a tool to finalise your project. GruntJS has a whole bunch of community written tools that will help make the final build for production as small as possible.

In terms of your specific questions:

1. There is a community written task in GruntJS called usemin that you use in conjunction with grunt-contrib-concat and grunt-contrib-uglify to combine all your javascript files into 1 file. The order you put them in shouldn't matter, but using usemin, it will concatenate them in the same order as you've been testing them with.

2. There is no right number for the number of routes you have, as long as you make sure all the routes you've defined makes sense in your app.

3. I also recommend using grunt-angular-templates to combine all the templates you've used in your routes and directives into 1 file thats loaded along with your javascript. Other than that, check around for other grunt plugin that will help make your project files smaller, maybe grunt-contrib-cssmin to make your css files smaller.