How can I build an Angular app with many scripts and have only one script tag in my HTML?

Question

I'm new to Angular, I'm building a demo app to learn, it's something very basic, but it's working, but I'd like to know how to divide this app in different files without having to write a script tag for every file.

Lets say I have my files structured like this:

Scripts/

angular.js

----App/

-----app.js(main app module)

----Factories/

-----factoryOne.js

-----factoryTwo.js

----Controllers/

-----controllerOne.js
-----controllerTwo.js

----Routes/

-----routes.js

And in my main view I just want to have

 <script src="Scripts/angular.js"></script>
 <script src="Scripts/app/app.js"></script>

Is there a way to do this? like include in Java or using in C#, thanks for the help guys.

Answer 1

Personally use Grunt for tasks like this. You can find details for this particular one @ https://npmjs.org/package/grunt-contrib-concat + https://npmjs.org/package/grunt-usemin. These script tags will will be in your source, but your dist version will have a single one.

This will all be set up for you if you start your project using Bower.

Answer 2

You should check out RequireJS. With it, at most you will only have 2 script tags, RequireJS and your main app script. Angular will be loaded as a dependency of your app fragments that need it.