I have been writing a angularjs app and i have a number of controllers which I have placed in a 1 JS file. I was hoping for something a little more modular and separating my controllers into there own files.
I thought of RequireJS but is this the recommended way? or does angularjs provide something else and any clue on where it is explained?
Also having all these files is great for debugging but once a production build is required does angularJS provide some sort of merging of of the modules into 1 file and minimizing the results?
If anyone can explain the best way to go about it it would be very helpful.
Thanks
Angular dependencies injection is really great and you should create a lot of small modules.
When it comes to file organization it's way easier to have a lot a small files (one per module maybe), but then you face the issue you're talking about: what do I do with all these files? How do I load them all?
It is worth taking a look at these 2 sources: Brian Ford's blog and this Github repo. It helped me a lot improving my workflow and better understand/use Angular modules.
What I do for my projects is using Grunt to concat (minify if needed) all the js files (and way more: less css compilation, assets management, javascript templates compilation).
A good example is given in the Github repo above.
I don't recommend using RequireJS with AngularJS. Although it's certainly possible, I haven't seen any instance where RequireJS was beneficial in practice. [Brian Ford]
My app folder looks like this:
www
|-dist/ = Created by Grunt. Generated files (served by my web server).
|-node_modules/ = node modules (ie. Grunt modules. Grunt is based on NodeJS)
|-src/ = My workspace
|-test/ = Some tests
|-vendor = External libraries (AngularJS, JQuery, Bootstrap, D3, ... Whatever you need)
|-gruntFile.js = The Grunt configuration file: contains all the jobs for Grunt.
|-package.json = App infos + dependencies (Grunt modules) I use (concat, uglify, jshint, ...)
So all the different files I work on are in the src folder which then looks like this:
www/src
|-app = Folder for my controllers
| |-Controller1.js
| |-Controller2.js
| |-...
|-assets = Folder for the static assets (img, css, ...)
| |-img/
| |-css/
| |-favicon.ico
|-common = Folder for the shared modules (directives, resources, services, ...)
| |-directives
| | |-chart.js
| | |-map.js
| | |-...
| |-resources
| | |-users.js
| | |-another-cool-resource.js
| | |-...
| |-services
| | |-service1.js
| | |-...
|-views = Folder for my templates
| |-profile.tpl.html
| |-search.tpl.html
| |-...
|-index.html = The main and unique html file.
Then I use Grunt to 'compile' everything into the dist folder.
An example of a gruntFile can be found here.
I have a one-time job for deployment and some watchers for development.