One of the important things that everyone comes across when one starts a new project is how to structure it. Although AngularJS seed project does have some guidelines on how to structure the application.
It somehow makes a logical sense to me to align the code along the functional axis as opposed to a technical one. Hence, I prefer using the following structure for my AngularJS projects:
app
|
-------- assets
-------- styles
-------- bower_components
-------- src
|
---------- shared-module
|
------------- util
------------- directives
------------- features (incl. cntrls+views)
---------- module-1
|
-------------- services
-------------- feature-1
|
---------- controller-1
---------- routes-for-feature-1
---------- views-for-features-1
-------------- feature-2
-------- tests
|
---------- shared-module-tests
---------- module-1-tests
---------- coverage
-------- dist
-------- GulpFile
Here are few advantages of the above structure:
1. One can easily find the functionally related code
2. Improves testability of the code since the related features and tests go together
3. Applying a route, security, logic across similar modules, features becomes easier
4. You can move/re-factor a feature with ease
In addition to the above structure you would need a dist folder where you could build the code, concatenate the source js and css, minify it and copy it over for deployment. I prefer using code approach (as opposed to config) based automated task runner (aka streaming build system for JS)
Gulp for this task. You could use Grunt or any other equivalent.
Here are few links that could help you choose:
Gulp vs Grunt I
Gulp vs Grunt II
Gulp vs Grunt III
Posts
.JPG)