title: folder structure for MEAN stack
body: <p>I'm following a tutorial on the MEAN stack and I'd like to have a clean folder structure to work with. I've read plenty of articles that say to have a folder for each (let's call it) module of the application with the views/models/controllers/etc.. grouped together. </p>
  
  <p>I like this approach and I've already started doing this, however I'd like some assistance.</p>
  
  <p>right now, my directory structure looks something like this:</p>
  
  <ul>
  <li>root
  
  <ul>
  <li>views</li>
  <li>models</li>
  <li>routes</li>
  <li>public</li>
  </ul></li>
  </ul>
  
  <p>up till now, I have a main <code>index</code> view with its angular controller, so what I did is, make a new folder under <code>public</code> and named it <code>index</code></p>
  
  <p>anything with an asterisk is a folder (*)</p>
  
  <ul>
  <li>root*
  
  <ul>
  <li>public* 
  
  <ul>
  <li>index*
  
  <ul>
  <li>index.ejs</li>
  <li>angular*
  
  <ul>
  <li>indexController.js</li>
  <li>someService.js</li>
  </ul></li>
  <li>styles*
  
  <ul>
  <li>someCss.Css</li>
  </ul></li>
  <li>javascript*
  
  <ul>
  <li>some jQuery or js file(s)</li>
  </ul></li>
  </ul></li>
  <li>hypothetical other view folder*
  
  <ul>
  <li>otherIndex.ejs</li>
  <li>angular*
  
  <ul>
  <li>otherController.js</li>
  <li>someService.js</li>
  </ul></li>
  <li>styles*
  
  <ul>
  <li>someCss.Css</li>
  </ul></li>
  <li>javascript*
  
  <ul>
  <li>some jQuery or js file(s)</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>first question is, is this good so far? does all of this belong in the public folder?</p>
  
  <p>my second has to do with the back end. I'm starting to build some models and the tutorial is saying to put them in the <code>models</code> folder. However, I'd rather keep models with their respective "module", so the index model I'd rather put in the folder where the index view lives. probably create a new folder under index called <code>models</code> and add it in there:</p>
  
  <ul>
  <li>root*
  
  <ul>
  <li>public* 
  
  <ul>
  <li>index*
  
  <ul>
  <li>index.ejs</li>
  <li>angular*
  
  <ul>
  <li>indexController.js</li>
  <li>someService.js</li>
  </ul></li>
  <li>styles*
  
  <ul>
  <li>someCss.Css</li>
  </ul></li>
  <li>javascript*
  
  <ul>
  <li>some jQuery or js file(s)</li>
  </ul></li>
  <li>model(s)*
  
  <ul>
  <li>someModel.js</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>but this doesn't seem to be the right place to put a model file since this is the public folder, and a model is back-end code. Is there a better approach to what I'm doing? or should I have the models just be in the main models folder? and just have the front end be grouped by 'module' while the models all just sit together in the models folder?</p>