带有 AngularJS 的门户类型应用程序（多个独立应用程序）

Posted 2023-02-23

【中文标题】带有 AngularJS 的门户类型应用程序（多个独立应用程序）

【英文标题】：Portal type application with AngularJS (Multiple Independent apps)

【发布时间】：2012-11-26 07:53:33

【问题描述】：

我们正在尝试创建具有多个/独立“子应用程序”的门户类型应用程序。假设所有子应用程序都是用 Angular 编写的，那么实现以下目标的好模式是什么。

每个应用都可以独立开发和部署。 它们共享一个通用身份验证服务，可以共享通用库（指令、过滤器等）。 在任何给定时间，只有一个应用程序可见且处于活动状态。每个子应用的范围是相互隔离的。 当用户在子应用之间移动时，只要用户不刷新页面或访问另一个静态链接，该状态就会保持。 （我认为这是 Angular 内置的，可能不需要特别努力） 每个子应用程序都会有多个视图（它会有自己的菜单）。根据可用的子应用程序，将有一个顶部菜单。理想情况下，顶部菜单是根据部署的子应用程序动态构建的。也许有一个服务器端组件（服务器检测文件夹结构等并确定部署了哪些应用程序并将必要的 js 代码注入页面）。

鉴于 AngularJs 没有多级视图结构这一事实，我正在考虑在不同的 div 上使用多个 ng-app 声明，然后使用 $window 范围来存储活动应用程序的键并隐藏那些不活跃。

【参考方案1】：

对于您的（相当开放的）问题没有简单的答案，但关于 $route 和 ngView 的限制，我在采用源自此的技术方面取得了巨大成功：http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

【参考方案2】：

这也是我一直在考虑尝试实施的事情。虽然我没有完整的工作解决方案，但我相信这种类型的门户应用程序将在同一页面上包含多个 Angular 应用程序。

门户应用程序将是主页上的传统 ng-app 指令，“portlet”将动态创建并在子视图 div 上手动引导 Angular 应用程序。您可以通过将提供这些功能的门户服务（包含在它们自己的模块中）注入手动引导的 portlet 应用程序来共享数据、状态、身份验证、个性化等。

棘手的部分是门户应用程序如何发现 portlet 应用程序并提供它们的 angular 模块，因为知道这些应用程序将是具有自己的 url 的独立部署的 Web 应用程序。

对于服务数据是否在应用程序之间通用，或者您是否需要尝试通过门户服务（如数据管理器）利用 html5 本地存储，我仍有一些疑问。