title: Large single page application with 'portal' or MDI like functionality using AngularJS
body: <p>I have a question related to how to best compose a very large single page application using angularjs and if necessary ui-router.</p>
  
  <p>My scenario is this.</p>
  
  <ul>
  <li>I have multiple components which can be say trend module, 'business' analyzer, dash boards/workspaces, and lots of others.</li>
  <li>From an launcher sidebar the modules can be opened one or more times in separate tabs like in an old school MDI windows application.</li>
  <li>Some of the modules are completely independent and some may use/share a common filtering widget which may reside somewhere one the page.</li>
  </ul>
  
  <p>The general idea is that each of these components could be opened multiple times in separate tabs so users can easily switch between them as part of their workflow. Another thing is that url linking should be supported for all of them. Opening the url would not involve reopening all the "tabs", just the one the url links to.</p>
  
  <p>When using angularjs my limited understanding so far has indicated that the best way to accomplish this would be to split my project into separate business modules as recommended for large application. Each business module containing the templates, services, directives etc that are relevant. </p>
  
  <p>Then I could use ng-include to include the templates and then instantiate the controller for each business module. I have tested that the same controller can be instantiated multiple times and hold its own data separate. It would also be neccessary to include the required template each time the particular controller is created. This would cover the case when we want to instantiate the same module more than once in separate tabs.</p>
  
  <p>This does not solve the problem with url linking though it brings me to the ui-router alternative which supports multiple ui-views which may potentially solve this problem too, but I do not know enough about that yet. I suppose using ui-router one could include an url syntax that included the "instance" of each view but I am not sure how one would go about doing that. The idea of using multiple apps bootstrapped manually seems out of the question since this reduces the possibilities of communication between the different modules and the general opinion seems to indicate that this is a bad idea.</p>
  
  <p>I would appreciate any feedback and constructive comments as to what would be a good approach in this situation.</p>