Standard directory structure for Angularjs apps?

Question

I'm a web developer who mostly works on my own. When building apps I have complete freedom regarding how I structure my code. Nonetheless, I try to conform to industry conventions as much as possible, since this makes life easier for other developers who may need to maintain my code down the line.

I've just started working with Angularjs. Since angular is relatively new, I wonder if any conventions have emerged yet regarding how projects should be structured.

Specifically, I've noticed that Yeoman creates this setup by default:

app
 |-bower_components
 |-images
 |-scripts
 |---controllers
 |------ *.js
 |-styles
 |--- *.css
 |-views
 |--- *.html

Two questions:

Is this structure widely used? (i.e. should I be using it too?)
Where should I place directives that I write? In app/scripts/directives?

Take also a look on Mastering Web Application Development with AngularJS deploy it's separates folders by feature and above all has all the feature view in the same folder named .tpl doing so you can exploit it with htmlTojs grunt tool — Whisher, Commented Mar 21, 2014 at 19:15
I use a structure similar to @rom99 below, in my code has 'Modules' (which is the directory name under /app/) and in their each module is a folder, with all the related files. I include the tests as well. /app/Modules/Users/controllers, /app/Modules/Users/views, etc... and then /app/Modules/Scheduling/controllers, /app/Modules/Customer/controllers, etc... — Steven Scott, Commented Mar 21, 2014 at 19:22
Agree with both comments here and answer below. I tend to create my modules for a given feature set that includes the services, controllers, and possibly directives (usually give them their own module based on types of directives). This way if in the future angular allows or you find your own way to lazy load you can get just the features needed for a given view. I generally use yeoman with the angular-generator to start then tweak the structure from there. — shaunhusain, Commented Mar 21, 2014 at 19:48

rom99 · Accepted Answer · 2014-03-21 18:54:47Z

3

There seem to be a couple of conventions I've seen people use, there's the Angular seed project (https://github.com/angular/angular-seed) which I tend to think is best for smaller projects. Alternatively you can do something like the angular-sprout project (https://github.com/thedigitalself/angular-sprout) which separates folders by feature rather than according to angular component type, if that makes sense.

answered Mar 21, 2014 at 18:54

rom99

7994 silver badges15 bronze badges

Add a comment |

MikeDev · Accepted Answer · 2015-01-07 07:35:13Z

I have found that the yeoman generated directory structure works well if you separate your component responsibilities. i.e.

app
  |-bower_components
  |-images
  |-scripts
    |---controllers
      |----feature
        |------ *.js
      |----nextFeature
        |------ *.js
    |---services
      |----feature
        |------ *.js
      |----nextFeature
        |------ *js
 |-styles
   |--- *.css
 |-views
   |--- *.html

Then you can have a test directory with almost the same structure.

test
  |-spec
    |---controllers
      |----feature
        |------- *Spec.js
      |----nextFeature
        |------ *Spec.js

etc...

I know this was 9 months ago, but I hope this helps.

Collectives™ on Stack Overflow

Standard directory structure for Angularjs apps?

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related