title: re-open and add dependencies to an already bootstrapped application
body: <p>Is there a way to inject a late dependency to an already bootstrapped angular module? Here's what I mean:</p>
  
  <p>Say that I have a site-wide angular app, defined as:</p>
  
  <pre><code>// in app.js
  var App = angular.module("App", []);
  </code></pre>
  
  <p>And in every page:</p>
  
  <pre><code>&lt;html ng-app="App"&gt;
  </code></pre>
  
  <p>Later on, I'm reopening the app to add logic based on the needs of the current page:</p>
  
  <pre><code>// in reports.js
  var App = angular.module("App")
  App.controller("ReportsController", ['$scope', function($scope) {
    // .. reports controller code
  }])
  </code></pre>
  
  <p>Now, say that one of those on-demand bits of logic also requires their own dependencies (like <code>ngTouch</code>, <code>ngAnimate</code>, <code>ngResource</code>, etc). How can I attach them to the base App? This doesn't seem to work:</p>
  
  <pre><code>// in reports.js
  var App = angular.module("App", ['ui.event', 'ngResource']); // &lt;-- raise error when App was already bootstrapped
  </code></pre>
  
  <p>I realize I can do everything in advance, i.e -</p>
  
  <pre><code>// in app.js
  var App = angular.module("App", ['ui.event', 'ngResource', 'ngAnimate', ...]);
  </code></pre>
  
  <p>Or define every module on its own and then inject everything into the main app (<a href="http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html">see here for more</a>):</p>
  
  <pre><code>// in reports.js
  angular.module("Reports", ['ui.event', 'ngResource'])
  .controller("ReportsController", ['$scope', function($scope) {
    // .. reports controller code
  }])
  
  // in home.js
  angular.module("Home", ['ngAnimate'])
  .controller("HomeController", ['$scope', '$http', function($scope, $http){
    // ...
  }])
  
  // in app.js, loaded last into the page (different for every page that varies in dependencies)
  var App = angular.module("App", ['Reports', 'Home'])
  </code></pre>
  
  <p>But this will require I initialize the App everytime with the current page's dependencies. </p>
  
  <p>I prefer to include the basic <code>app.js</code> in every page and simply introduce the required extensions to each page (<code>reports.js</code>, <code>home.js</code>, etc), without having to revise the bootstrapping logic everytime I add or remove something. </p>
  
  <p>Is there a way to introduce dependencies when the App is already bootstrapped? What is considered the idiomatic way (or ways) to do this? I'm leaning towards the latter solution, but wanted to see if the way I described could also be done. thanks.</p>