title: Structuring a Node.js and AngularJS application
body: <p>I'm about to attempt my first AngularJS project, and it makes sense to use Node.js for the back end, even though it means learning both AngularJS and Node.js from scratch at the same time.</p>
  
  <p>The first thing I'm trying to get my head around is a good file structure. So far my pure HTML/CSS template has the following directory structure...</p>
  
  <pre><code>_site/
  Fonts/
  Javascript/
  SASS/
  Stylesheets/
  Index.html
  </code></pre>
  
  <p>( _site is a working directory for PSDs, etc.)</p>
  
  <p>I found an example directory structure for a Node.js/AngularJS app <a href="https://github.com/btford/angular-express-seed" rel="noreferrer">here</a>....</p>
  
  <p>... which suggests the following directory structure.</p>
  
  <pre><code>app.js              --&gt; Application configuration
  package.json        --&gt; For npm
  public/             --&gt; All of the files to be used in on the client side
    css/              --&gt; CSS files
      app.css         --&gt; Default stylesheet
    img/              --&gt; Image files
    js/               --&gt; JavaScript files
      app.js          --&gt; Declare top-level application module
      controllers.js  --&gt; Application controllers
      directives.js   --&gt; Custom AngularJS directives
      filters.js      --&gt; Custom AngularJS  filters
      services.js     --&gt; Custom AngularJS services
      lib/            --&gt; AngularJS  and third-party JavaScript libraries
        angular/
          angular.js            --&gt; The latest AngularJS
          angular.min.js        --&gt; The latest minified AngularJS
          angular-*.js          --&gt; AngularJS add-on modules
          version.txt           --&gt; Version number
  routes/
    api.js            --&gt; Route for serving JSON
    index.js          --&gt; Route for serving HTML pages and partials
  views/
    index.jade        --&gt; Main page for the application
    layout.jade       --&gt; Doctype, title, head boilerplate
    partials/         --&gt; AngularJS view partials (partial jade templates)
      partial1.jade
      partial2.jade
  </code></pre>
  
  <p>So, this looks quite good to me (except for the fact that I wouldn't use Jade).</p>
  
  <p>I still have the following questions...</p>
  
  <ol>
  <li><p>I want to keep all front-end and back-end files separate. This solution puts all the front-end files in the public/ directory which kind of makes sense because most need to be public, but does it make sense to put the SASS and _site folders here? I could just keep them there, but not upload them when I put them into production, but it seems wrong because they shouldn't be public. They also don't belong at root level with all the back-end stuff.</p></li>
  <li><p>Wouldn't it be better to load AngularJS from a <a href="http://en.wikipedia.org/wiki/Content_delivery_network" rel="noreferrer">CDN</a>?</p></li>
  <li><p>Given that the server will only need to deliver one template (the main application template) and all other HTML will be constructed on the front-end wouldn't it make more sense to keep the index.html file static, delete the views folder and create a partials/ folder under public/ like the original AngularJS Seed application does?</p></li>
  </ol>
  
  <p>I realize that this is all a matter of opinion, and I could technically put them wherever I want, but I'm hoping somebody more experienced than me could advise me of the pitfalls of various directory structures.</p>