AngularJS App: How to include .js files into index.html

Question

I'm new to angularJS. I managed to build a phonegap app using angularJS. The app is ok and running just fine. The problem is, now that I have a little more understanding on how angularJS works (at least I think I have), I'm worried about my app files structure and code maintainability. My project follows the angular-seed pattern. Angular Seed on GitHub where I have this structure:

js    app.js    controllers.js    directives.js    services.js    filters.js 

After researching how to structure apps with angularJS, I've found some very nice articles about it: Building Huuuuuge Apps with AngularJS and HOW TO STRUCTURE LARGE ANGULARJS APPLICATIONS

My question seems very silly to me but I couldn't find a way out. I managed to separate my controllers into different files and I have now this structure:

scripts     controllers              LoginCtrl.js              HomeCtrl.js              AboutCtrl.js              ClientCtrl.js  

The thing that I'm struggling with is that in the way that my app was before, I had only one controller.js file. In my index.html file, I load all the script files normally using the script tag. Now that I have 4 different .js files for my controllers, how do I load them into my index.html file? Do I have to load them all there?

It doesn't look right to me load all the scripts in the index.html file like that (I know that having one file the code will be loaded in the same way, it is just weird to me having many script tags packed there). I've found the ng-boilerplate project on github and on their index.html they load the scripts kind of dynamically. The problem is, I can't start a new ng-bolierplate right now, and I couldn't find how they did it. Sorry for the long text. Thanks!

Answer 1

Referencing each script file in its own tag in index.html is definitely one way to do it, and the most straightforward. However, if you want something cleaner, take a look at one of the various guides to combining Angular with RequireJS:

http://www.startersquad.com/blog/angularjs-requirejs/

Does it make sense to use Require.js with Angular.js?

This approach is aimed primarily at solving the problem of what order to load the files in order to satisfy dependencies, but it does also have the consequence of cleaning up the index.html...albeit at the cost of additional configuration elsewhere.

Answer 2

Use http://browserify.org/

You get very simple and elegant commonjs modules and lots of amazing libraries from node.js in your browser.

The code gets bundled into single js file.