AngularJS：如何在angular度应用程序中嵌套应用程序
我一直在做一个更像框架的项目，并且有几个可以安装的应用程序/模块。 看到它像一个基本的appstore或google.play商店。 这是一个内联网应用程序，所有模块可以添加到您的使用帐户。
该框架已经在开发中，但是现在我正在围绕着应用程序/模块的想法。 （ 链接到开发中的概念certificate，可以在这里find ）
一个应用程序应该是有点独立的，不能突然从框架中包含脚本，这是完全可能的，通过在不同的模块中构build它们，如下所示：
angular.module('myApp', []); 然而，一个应用程序可以有模板，脚本，CSS，它可以运行在一个单独的服务器上，所以我寻找最好的方式来获取脚本和CSS文件（S）并dynamic地加载到应用程序当用户从框架内启动app时。
- 目前我正在构build应用程序，就好像他们有一个主要的模板，例如
www.framework.com/apps/myapp/views/app.html，为了简单起见，我将脚本绑定到每个应用程序的一个脚本文件中，所以也有包括一个www.framework.com/apps/myapp/script.js。
该框架包含一个加载应用程序的模板和一个appController 。 该模板包含这一块：
<div data-ng-controller="AppController" data-ng-include="app.appTemplate"> <div>loading...</div> </div>
这基本上绑定到所有脚本加载后更新的$scope.app.appTemplate ，所以首先显示一个加载模板，稍后在页面中包含脚本后，它将app.appTemplate更新到上面提到的主模板应用。
当加载第一个索引模板的时候，这个模板当前是从框架中加载了AppController的，所以它使用框架的$scope而不是它自己的脚本。
我仍然必须以某种方式启动应用程序自己的angular度模块，并让它自己在没有在框架中运行任何东西“使其工作”
我仍然搞清楚如何最好地加载依赖的JavaScript文件（可能会使用requrejs或其他依赖加载程序），但我目前还不知道如何“启动”的应用程序，而不需要在框架的AppController
编辑
我创build了一个小型的演示项目来展示手头的问题， 在git-hub上可以看到完整的代码，这个项目做了一些硬编码的事情，当我得到概念是正确的，现在只需要在框架中加载应用程序。 如果可能的话，我可以考虑从哪里获取URL和应用程序名称…
您不能在另一个引导模块内引导模块。 引导编译视图并将一个rootScope绑定到它，通过DOM遍历它，并设置范围绑定并执行指令链接函数。 如果你这样做了两次，你会遇到问题。
你可能不得不重新考虑你的架构。 我认为，与Angular有关的“模块”或“应用程序”这个词是错误的，会把你引向错误的道路。
应用程序中的每个“用户安装的应用程序”应该可能真的由您的应用程序模块中的控制器控制，或注册到您的应用程序模块引用的模块。 所以你不会“启动多个应用程序”，你只需要启动一个，引用其他模块，然后使用这些模块中的控制器来控制屏幕上的部分视图。
你要做的是当一个新的“小部件”被安装，你注册它的模块文件（.js）与系统，其中将包含一个名为WidgetCtrl的控制器，然后当你的页面加载，你会引用的部件模块上的应用程序模块。 从那里它应该可用于dynamic分配元素使用ng-controller和/或ng-include。
我希望这是有道理的。
与目前接受的答案相反，实际上是可以的。
我正在研究类似的问题，并build议我的答案是不能接受的。 我以前写过多个应用程序的页面，但是几年前，应用程序相互独立。 基本上有两件事情要做：
- 告诉主应用程序忽略一个子元素。
- 引导子元素。
有一个ng-non-bindable属性，它告诉AngularJS忽略这个元素。 这处理我们的第一个问题。
但是，当您尝试引导子元素时， AngularJS会抛出一个错误，告诉你它已经被引导（至less对我来说，版本1.2.13）。 下面的诀窍可以做到
<div ng-non-bindable data-$injector=""> <div id="bootstrap-me"> <script src="/path/to/app.js"></script> <div ng-include="'/path/to/app.html'"/> </div> </div>
这个解决scheme并不完美。 理想情况下，ng-non-bindable属性可以将所需的data-$ injector属性添加到元素。 我将做一个function，并希望对AngularJS提出一个请求。
我没有机会提出要求。 显然，我应该说，一些内部已经改变，但ng-non-bindable仍然在版本1.3.13使用Ventzy Kunev的演示代码（再次感谢，请参阅下面的链接）。
以及如果每个子应用程序在自己的模块中，您可以使用angular.bootstrapdynamic加载该模块。 当一个特定的应用程序的URL加载，你可以获取必要的脚本，然后当承诺解决，你可以做的东西沿线：
// grab a reference to the element where you'll be loading the sub-app var subapp = document.getElementById('subapp-id'); // assuming the script you get back contains an angular module declaration named // 'subapp', manually start the sub-app angular.bootstrap(angular.element(subapp), ['subapp']);
希望这可以帮助
类似于上面的UnicodeSnowman的答案，另一个可能的解决scheme似乎是为我的需要工作（我在文档站点上构build了一个活动的Angular编辑器）是通过使用独立的<div id="demos">来手动处理引导过程从主<div id="myApp"> 。
这篇文章是非常有用的，让它正常工作。
一般过程
- 创build你的主应用程序（我select手动引导，但你可能能够使用
ng-app这个部分） - 创build一个新的HTML结构/应用程序（在我的情况下，演示应用程序）：
- 将其附加到带有自定义ID的演示版div：
someCoolDemoContainer - Boostrap新创build的应用程序
- 将其移回原始应用程序（用于布局/定位目的）
代码示例 （未经testing;仅显示基本过程）
<div id="myApp"> <h1>Demo</h1> <p>Click the button below to checkout the cool demo!</p> <button ng-click="showDemo()">Show Demo</button> <div class='insertion-point'></div> </div> <div id="demos"> </div> <script type="text/javascript"> /* * Init/bootstrap our main app */ var appContainer = document.getElementById('myApp'); angular.module('myApp', ['myDependency']); angular.bootstrap(appContainer, ['myApp']); // Do lots of other things like adding controllers/models/etc. /* * Init/bootstrap our demo app when the user clicks a button */ function showDemo() { // Append our demo code $('#demos').append('<div id="someCoolDemoContainer">Angular app code goes here</div>'); // Bootstrap the new app var demoContainer = document.getElementById('someCoolDemoContainer'); angular.module('someCoolDemo', ['myDependency']); angular.module('someCoolDemo').controller('myController', function() { ... }); angular.bootstrap(demoContainer, ['someCoolDemo']); // Re-insert it back into the DOM where you want it $('#myApp').find('.insertion-point').append($('#someCoolDemoContainer')); } </script>
