title: How to split AngularJS application into smaller modules and handle routing correctly?
body: <p><strong>What would be the best way to split AngularJS application into smaller pieces/module?</strong> For example if I have a blog post and commenting enabled for that, I think I could break it down to modules like "posts" and "comments"(?) (maybe not the best example, but the idea is to split the application logic into separate modules rather than building a huge one-module-app).</p>
  
  <p>I've tried to bootstrap both modules in the separate DOM nodes and use routing in both of the modules accordingly. There are few problems:</p>
  
  <ul>
  <li>As a "single-page" application I'm bootstrapping comments module to be used even on the front page even though it's not used there.</li>
  <li>Since I'm not able to use multiple ng-views inside ng-app, I'm forced to write all the wrappers for my modules in the index.html view and bootstrap them? Should it be like that? Seems a bit wrong. How/where should I bootstrap those?</li>
  <li>Are there any tips for the routing? Should I spread those in the modules or should I combine them all together somehow? (creating one "blog" module to include "posts" and "comments" modules as dependencies would still make it hard to define for example the "/post/:id" routing..?)</li>
  </ul>
  
  <p>index.html</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="post"&gt;&lt;ng-view&gt;&lt;/ng-view&gt;&lt;/div&gt;
  &lt;div class="comments"&gt;&lt;ng-view&gt;&lt;/ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>javascript.js</p>
  
  <pre class="lang-js prettyprint-override"><code>angular.module('posts', []).config(['$routeProvider', function ($routeProvider) {
      $routeProvider
      .when('/', {
          'template': 'Showing all the posts',
          'controller': 'postCtrl
      })
      .when('/post/:id', {
          'template': 'Showing post :id',
          'controller': 'postCtrl
      });
  }]);
  
  angular.module('comments', []).config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/post/:id', {
          'template': 'Showing post :id comments',
          'controller': 'CommentsCtrl'
      });
  }]);
  
  angular.bootstrap($('.post'), ['posts']);
  angular.bootstrap($('.comments'), ['comments']);
  </code></pre>