一个站点有多个 AngularJS 应用程序？

Posted 2023-02-22

【中文标题】一个站点有多个 AngularJS 应用程序？

【英文标题】：Having multiple AngularJS apps for one site?

【发布时间】：2013-04-08 02:17:51

【问题描述】：

我正在开发一个可以分解为几个主要页面的网站。这些页面可以被认为是相互隔离的，除了它们共享会话数据（即会话 ID 和登录用户名）。

最初，我打算使用 ng-view 将网站构建为 SPA（即，将页面转换为 AngularJS 视图）。但是，我认为以这种方式实施我的网站没有任何好处。并且需要额外的时间和努力才能使其支持 SEO (Making AJAX Applications Crawlable)。

采用一种不会带来任何好处甚至会产生额外工作量的方法似乎不太聪明。所以我想，我为什么不把我网站的主页做成单独的AngularJS应用程序。需要被搜索引擎索引的网站部分只是其中一些应用程序的初始屏幕，所以我不需要为 SEO 做额外的工作。 （注意：初始屏幕由 Django 服务器呈现，带有供搜索引擎抓取的数据，因此它们是非空白的。）

对于每个应用程序，它可能有也可能没有自己的部分部分，具体取决于对其的要求。

例子：

mydomain.com/item_page/1234 (load "item" app)
mydomain.com/dashboard (load "dashboard" app)
mydomain.com/account (load "account" app and default to "tab_1" view)
mydomain.com/account#tab_1 (load "tab_1" view of "account" app)
mydomain.com/account#tab_2 (load "tab_2" view of "account" app)
mydomain.com/post_item (load "post" app)

这只是我的随机想法，我还没有看到任何由多个 AngularJS 应用程序组成的 AngularJS 示例。我想知道：

一个站点的多个 AngularJS 应用程序是否可行？我应该注意哪些注意事项？在野外有没有采用这种方法的示例网站？ 如果可行，如何在应用之间共享会话数据？

请注意，这篇文章是关于一个站点的多个 AngularJS 应用程序，而不是同一页面上的多个 AngularJS 应用程序。

【参考方案1】：

这样的做法并没有什么问题，只要你下载的JS脚本的大小保持足够小，并保证良好的缓存。此类应用程序的示例之一可以是 GitHub（它们不使用 Angular，但方法是相同的）。当您访问 GitHub 上的问题页面时，它会加载一个 html 页面、常见的 Github JS 库和页面特定的 JS 代码。页面内的导航和操作由该单页特定脚本处理。如果您转到其他部分（如代码），则会加载带有新页面特定 JS 代码的新页面。另一个例子是亚马逊 AWS 控制台，他们甚至对不同的页面使用不同的框架。 （GitHub 和 Amazon 都不使用 Angular，但这种方法适用于任何基于 JS 的框架，甚至适用于 GWT）。

至于在页面之间共享一些会话数据，您可以使用内联脚本或隐藏元素将这些信息直接嵌入页面本身。例如。当您的服务器生成页面时，它还应该在页面中生成一些会话信息。另一种方法是下载一次会话数据，并将它们存储在本地存储/会话存储中。