Folder Structure styles

README.md

Project Folder Structure

I'd love some feedback on a project folder structure I've been considering/trying out. I just don't know why people aren't doing this already and I think I may just be missing something. Is there a problem with the different.md that I'm just missing. Leave comments below. Thanks for the feedback.

different.md

Different Style:

.
└── app
    ├── login
    │   ├── LoginCtrl.html
    │   ├── LoginCtrl.js
    │   ├── LoginCtrl.Test.js
    │   └── LoginCtrl.styl
    └── home
        ├── HomeCtrl.html
        ├── HomeCtrl.js
        ├── HomeCtrl.Test.js
        └── HomeCtrl.styl

Of course the build process would handle putting everything in the dist folder that needs to be there (compiling the styl and excluding the test). I've never seen anyone do this, but it just seems like a better pattern to go for. I'd love some feedback.

traditional.md

More Traditional Style:

.
├── app
│   ├── login
│   │   ├── LoginCtrl.html
│   │   └── LoginCtrl.js
│   └── home
│       ├── HomeCtrl.html
│       └── HomeCtrl.js
├── stylus
│   └── components
│       ├── LoginCtrl.styl
│       └── HomeCtrl.styl
└── test
    ├── login
    │   └── LoginCtrlTest.js
    └── home
        └── HomeCtrlTest.js

With this style, you have to navigate back and forth between your app, stylus, and test directories to get everything for the component in line. Many times (in my experience) the styl files and the test files are not named the same as the component so sometimes it can be more difficult to know where/what those are. But I've seen this is a bunch of repos all over. I'm just not sure where the win is here...

ngBoilerplate project follows more or less the "Different Style" approach (Check here: ngbp/src/app/home/). In the Philosophy section they explain a little why organize file structure that way.