title: AngularJS: How to nest applications within an angular app
body: <p>i've been working on a project that is more like a framework, and has several apps / modules you can install. See it like a basic appstore or google.play store. It's sort of an intranet application, and all modules can be added to your useraccount.</p>
  
  <p>the framework is already in development, but i'm wrapping my head around the applications/modules idea now. (<a href="https://github.com/saelfaer/angular-external-apps-poc">link to a proof of concept in development, can be found here</a>)</p>
  
  <p>an application should be somewhat standalone, and not able to suddenly include scripts from the framework, This is perfectly possible by structuring them in separate modules like so:</p>
  
  <pre><code>angular.module('myApp', []);
  </code></pre>
  
  <p>however, an app can have templates, scripts, css and it can run on a separate server, so I'm kind of looking for the best way to fetch the script(s) and cssfile(s) and dynamically load them into the app when the user starts the <code>app</code> in from within the framework.</p>
  
  <ul>
  <li>currently I'm structuring apps as if they have a main template for example <code>www.framework.com/apps/myapp/views/app.html</code>, for the sake of simplicity i bundle scripts into 1 script file per application, so there is also a <code>www.framework.com/apps/myapp/script.js</code> to be included.</li>
  </ul>
  
  <p>The framework contains a template that loads the apps, and an <code>appController</code>. The template contains this piece:</p>
  
  <pre><code>&lt;div data-ng-controller="AppController" data-ng-include="app.appTemplate"&gt;
      &lt;div&gt;loading...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this basically binds to the <code>$scope.app.appTemplate</code> which is updated when all scripts are loaded, so first it shows a loading template, later after scripts are included in the page it updates the <code>app.appTemplate</code> to the above mentioned main template of an application.</p>
  
  <p>while loading the first index template works, this template is currently loaded with the <code>AppController</code> from the framework, so it is using the <code>$scope</code> of the framework and not it's own script.</p>
  
  <p><strong>I still have to somehow start the app's own angular module, and let it on it's own without running anything in the framework to 'make it work'</strong></p>
  
  <p>I'm still figuring out how to best load the dependent javascript files (will probably use requrejs or other dependency loader) but I have currently no clue how to 'boot' the app without working from within the framework's <code>AppController</code></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I created a small demo project to show the problems at hand, <a href="https://github.com/saelfaer/angular-external-apps-poc">full code is visible at git-hub</a> at the moment this project does a few things hard coded, the idea would be that I make those less hard coded when I get the proof of concept right, now it's all about loading the applications within the framework. if that is possible, I can think of where to get the URL's and application names from ...</p>