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

Question

我一直致力于一个更像框架的项目,并且有几个可以安装的应用程序/模块.将其视为基本appstore或google.play商店.它是一种Intranet应用程序,所有模块都可以添加到您的useraccount中.

该框架已经在开发中,但我现在正在围绕应用程序/模块的想法.(链接到开发中的概念证明,可以在这里找到)

一个应用程序应该是独立的,并且不能突然包含来自框架的脚本,这完全可以通过在单独的模块中构造它们,如下所示:

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

然而,一个应用程序可以有模板,脚本,CSS,它可以在一个单独的服务器上运行,所以我有点寻找获取脚本和cssfile的最佳方法,并动态加载到应用程序当用户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>

这基本上绑定到$scope.app.appTemplate加载所有脚本时更新的,所以首先它显示一个加载模板,稍后在脚本包含在页面中之后,它会更新app.appTemplate到上面提到的应用程序的主模板.

在加载第一个索引模板时,这个模板当前是AppController从框架加载的,所以它使用的$scope是框架,而不是它自己的脚本.

我仍然需要以某种方式启动应用程序自己的角度模块,让它自己运行而不在框架中运行任何东西以"让它工作"

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

编辑

我创建了一个小的演示项目来显示手头的问题,在git-hub上可以看到完整的代码,此时这个项目做了一些硬编码的事情,我的想法是当我得到证明概念是正确的,现在它是关于在框架内加载应用程序.如果可能,我可以考虑从哪里获取URL和应用程序名称...

Answer 1

您无法在另一个引导模块内引导模块.Bootstrapping编译视图并将rootScope绑定到它,遍历DOM并设置范围绑定并执行指令链接功能.如果你这样做两次,你就会遇到问题.

您可能不得不重新考虑您的架构.我想也许与Angular有关的"模块"或"app"这个词是用词不当,并且正在引导你走错路.

应用程序中的每个"用户安装的应用程序"可能都应该由应用程序模块中的控制器控制,或者注册到应用程序模块引用的模块.因此,您不会"启动多个应用程序",您只需启动一个,引用其他模块,然后使用这些模块中的控制器来控制屏幕上的视图部分.

你要做的是当安装一个新的"小部件"时,你将它的模块文件(.js)注册到系统,该系统将包含一个名为WidgetCtrl的控制器,然后当你的页面加载时,你会引用小部件的您的应用模块上的模块.从那里,它应该可用于使用ng-controller和/或ng-include动态分配元素.

我希望这是有道理的.

Answer 2

与目前接受的答案相反,它实际上是可能的.

我正在研究类似的问题,并建议我的答案是不可接受的.我以前写过多个应用程序的页面,但是几年前,应用程序彼此独立.基本上有两件事要做:

• 告诉主应用程序忽略子元素.
• 引导子元素.

有一个ng-non-bindable属性,它只是告诉AngularJS忽略该元素.这处理我们的第一个问题.

但是,当您尝试引导子元素时; AngularJS会抛出一个错误,告诉你它已经被引导(至少对我来说,版本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>

这个解决方案并不完美.理想情况下,ng-non-bindable属性可以向元素添加所需的data- $ injector属性.我将创建一个功能,并希望对AngularJS提出拉取请求.

我没有机会提出拉动请求.显然和预期我应该说,一些内部组件已经改变,但ng-non-bindable仍在使用Ventzy Kunev的演示代码在1.3.13版本工作(再次感谢,请参见下面的链接).