title: Developing an AngularJS app with dynamic set of modules
body: <p>I have an application with a complex layout where the user could put (drag/drop) widgets (by choosing from a predefined set of 100+ widgets) where every widget is a custom implementation that displays a set of data (fetched using REST call) in a specific way. I've read tons of blog posts, stackoverflow questions and the official AngularJS docs but I cannot figure out how should I design my application to handle there requirements. Looking at demo apps, there is a single module (ng-app) and when constructing it in the .js file the dependent modules are declared as its dependencies, however i have a big set of widgets and somehow it's not advisable to describe them all there. I need suggession for the following questions:</p>
  
  <ul>
  <li>How should I design my app and widgets - should i have a separate AngularJS module or each widget should be a directive to the main module?</li>
  <li>If I design my widget as directives, is there a way to define dependency within a directive. I.e. to say that my directive uses ng-calender in its implementation?</li>
  <li>If I design each widget as a separate module, is there a way to dynamically add the widget module as a dependency to the main module?</li>
  <li>How should I design the controllers - one controller per widget probably?</li>
  <li>How should i separate the state (scope) if i have multiple widgets from the same type in the view?</li>
  <li>Are there bestpractices for designing reusable widgets with AngularJS?</li>
  </ul>
  
  <p><strong>EDIT</strong></p>
  
  <p>Useful references:</p>
  
  <ul>
  <li><a href="https://github.com/ocombe/ocLazyLoad" rel="nofollow noreferrer">ocLazyLoad - great lazy loading lib for AngularJS</a></li>
  <li><a href="https://github.com/lookfirst/systemjs-seed" rel="nofollow noreferrer">Seed project - modules + lazy loading on route change (ES6, systemjs, ocLazyLoad)</a></li>
  <li><a href="http://ify.io/lazy-loading-in-angularjs/" rel="nofollow noreferrer">Lazy loading in AngularJS</a></li>
  <li><a href="http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx" rel="nofollow noreferrer">Dynamically Loading Controllers and Views with AngularJS and RequireJS</a></li>
  <li><a href="http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm" rel="nofollow noreferrer">Loading AngularJS Components With RequireJS After Application Bootstrap</a></li>
  <li><a href="https://github.com/nikospara/angular-require-lazy" rel="nofollow noreferrer">Demo project about lazy loading of AngularJS resources on GitHub</a></li>
  <li><a href="https://github.com/AndyGrom/loadOnDemand" rel="nofollow noreferrer">Load On Demand project</a></li>
  <li><a href="https://stackoverflow.com/questions/18591966/inject-module-dynamically-only-if-required">Inject module dynamically only if required</a></li>
  <li><a href="http://roubenmeschian.com/rubo/?p=40" rel="nofollow noreferrer">Another lazy loading in Angular article</a></li>
  <li><a href="http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript" rel="nofollow noreferrer">Code Organization in Large AngularJS and JavaScript Applications</a></li>
  </ul>