AngularJS modularization

Question

So I am trying to modularize my angular JS application, as it is getting quite large, and it's already easy to get lost, with multiple controllers in a single file.

Here is my folder structure at the moment, loosely based off ng-boilerplate:

The 'src' folder:

- app
   - moduleFolder
     - modulenameModule.js
     - epicController.js
     - anotherController.js
- assets
   - css, etc
- components
   - needed functionality
- less
   - less files

I am using Grunt JS and grunt-concat to concatenate all files in the app folder so that I can use a single file for the entire app build.

The 'modulenameModule.js' includes the routes for the controller files in its folder, but there is a problem: the concat function doesn't load in this file first, so the controller files try to attach to a module that doesn't yet exist in the code. Here is part of the code being used in the controller files:

angular.module('moduleName').controller('controllerName') 

How can I go about what I'm trying to achieve?

I hope that all makes sense. Apologies if it doesn't!

Answer 1

You also might want to look at Yeoman and generator-angular. Since you are familiar with grunt you may like Yeoman - it uses grunt extensively.

Answer 2

I can not help you with your grunt issue, but i think it will be worth an answer to this question if i introduce you to prepros:

Prepros - CodeKit for Windows

I had similiar problems with grunt and was unable to use it in a productive way. prepros offers a neat and simple GUI to get your stuff done.

Concatenation can be done with simple comments:

//@prepros-append file.js