AngularJS:如何在 Angular 应用程序中嵌套应用程序

Question

我一直在开发一个更像框架的项目，并且有多个可以安装的应用程序/模块。将其视为基本的应用商店或 google.play 商店。它有点像 Intranet 应用程序，所有模块都可以添加到您的用户帐户中。

该框架已经在开发中，但我现在正在考虑应用程序/模块的想法。 (link to a proof of concept in development, can be found here)

应用程序应该在某种程度上是独立的，并且不能突然包含框架中的脚本，通过将它们构建在单独的模块中是完全可能的，如下所示:

angular.module('myApp', []);

但是，应用程序可以有模板、脚本、CSS，并且可以在单独的服务器上运行，所以我正在寻找获取脚本和 css 文件并动态加载它们的最佳方法当用户启动 app 时进入应用程序从框架内进入。

• 目前我正在构建应用程序，就好像它们有一个主模板一样，例如 www.framework.com/apps/myapp/views/app.html ，为了简单起见，我将脚本捆绑到每个应用程序 1 个脚本文件中，因此还有一个 www.framework.com/apps/myapp/script.js被包括在内。

该框架包含一个加载应用程序的模板，以及一个 appController 。该模板包含这一部分:

<div data-ng-controller="AppController" data-ng-include="app.appTemplate">
    <div>loading...</div>
</div>

这基本上绑定(bind)到 $scope.app.appTemplate当加载所有脚本时，它会更新，因此首先它显示加载模板，稍后在页面中包含脚本后，它会更新 app.appTemplate到上述应用程序的主模板。

当加载第一个索引模板有效时，该模板当前加载了 AppController从框架来看，所以它使用 $scope框架的而不是它自己的脚本。

我仍然必须以某种方式启动应用程序自己的 Angular 模块，并让它自行运行，而不在框架中运行任何内容来“使其工作”

我仍在弄清楚如何最好地加载依赖的 javascript 文件(可能会使用 requrejs 或其他依赖加载器)，但我目前不知道如何在不从框架的 AppController 内工作的情况下“启动”应用程序

编辑

我创建了一个小型演示项目来展示手头的问题，full code is visible at git-hub目前这个项目做了一些硬编码的事情，我的想法是，当我得到正确的概念证明时，我会减少这些硬编码，现在一切都是关于在框架内加载应用程序。如果可能的话，我可以考虑从哪里获取 URL 和应用程序名称...

Answer 1

您无法在另一个引导模块内引导一个模块。 Bootstrapping 编译 View 并将 rootScope 绑定(bind)到它，遍历 DOM 并设置范围绑定(bind)并一直执行指令链接函数。如果您这样做两次，就会遇到问题。

您可能必须重新考虑您的架构。我认为与 Angular 相关的“模块”或“应用程序”一词可能是用词不当，并且会导致您走上错误的道路。

应用程序中的每个“用户安装的应用程序”可能实际上应该由应用程序模块中的 Controller 控制，或者注册到应用程序模块引用的模块。因此，您不会“启动多个应用程序”，您实际上只是启动一个应用程序，引用其他模块，然后使用这些模块中的 Controller 来控制屏幕上的部分 View 。

您要做的是，当安装一个新的“小部件”时，您将其模块文件(.js)注册到系统，其中将包含一个名为 WidgetCtrl 的 Controller ，然后当您的页面加载时，您将在您的应用程序模块上引用小部件的模块。从这里开始，它应该可以使用 ng-controller 和/或 ng-include 动态分配给元素。

我希望这是有道理的。