如何集成 cross-site 多个 angular 应用程序?

How integrate cross-site multiple angular applications?

我有一个由不同子系统组成的大型信息系统。我的目标之一是在这些子系统之间组织导航和定位。

当我通过 JSP 在后端生成视图时,我只是使用 jsp:include 来引用特殊的 web-app 其中 returns header 和 cross-site 导航以及此 web-app 负责存储所有子系统的用户区域设置。

现在我切换到angular,发现用ng-include替换jsp:include是不可能的。我有 2 个不同的 ng-apps - header(来自外部 web-app)和当前的子系统 1 ng-app。 ng-include header 中的指令不起作用 因为我必须 bootstrap 它,但我不能 bootstrap header ng-app 因为它不存在 - 我正在用 ng-include 获取它。恶性循环。

现在我看到了一种解决问题的方法:

通过 ajax 调用特殊 [=73] 在第二个 ng-app 中获取 header 标记(non-header,子系统 1 的 ng-app) =]-web-app。然后,通过简单的 DOM 操作和手动 bootstrap 将传入的 HTML 插入到 header。缺点很明显——我将在子系统 ng-app 中进行 DOM 操作,但在其外部插入 HTML,因为 2 个不同的 ng-apps 不能交叉或嵌套。可以吗?

看来我是在发明自行车,所以在这里问一下,如何整合cross-siteng-apps是否可以在一个网页中的不同 ng-apps 之间共享数据? 我知道,可以通过服务和工厂在控制器之间共享数据,这是一个很好的做法。 有没有angular-way可以在ng-apps之间共享数据?

请不要提供 JSP-like 解决方案,因为我想保持 angular 开发方式,因此只制作带有 angular 标记的静态页面,并通过 ajax来电。可能,我误解了 angular 方式,但现在我看到的与我描述的完全一样。

this site 中的方法 #1 看起来很适合我。简而言之,任何 ng-app 都由标记和 js 组成。 JS 可以简单地被 script src=... 加载,许多 ng-apps 可以作为一个大 root app 的模块使用。可以通过 ng-include.

加载标记