AngularJS网站:单个SPA与多个SPA应用程序/组件

Question

这个问题已经困扰我一段时间了。

如果你正在使用Angular构建一个具有多种功能的网站，是构建一个巨大的SPA更好，还是将网站拆分成功能性的“应用”，并为每个应用构建一个SPA？

例如，我们有一个社交媒体网站，其中包含通知提要、用户配置文件、报告和组。您会将所有这些功能构建到单个SPA中，还是会构建4个不同的SPA并让后端框架路由到正确的SPA？

例如：

www.mywebsite.foo#/profile/12345/education

vs

www.mywebsite.foo/profile/12345#/education

我个人更倾向于后一种方法，因为它减少了应用程序的大小，但它确实需要在应用程序之间导航时重新加载页面。

Answer 1

Mark Collings在你的文章中谈到了一件事：

https://markwillcollins.silvrback.com/7-things-i-wish-i-knew-about-angularjs

"3.结构很关键...“

他建议在初始化作业之前计划好每一页。

然后，我相信，你会发现最好的方法来满足你的特定需求。

我更喜欢隔离在小型服务中，因为我看不到在复杂的加载层次结构中使用require.js或类似方法共享少量javascript的好处。

Answer 2

所以，这是我学到的和我所做的：

我的服务器有一个默认路由：

  var express = require('express');
  var router = express.Router();

  ... 

  router.get('*', function(req, res) {
    res.sendfile(path.resolve(__dirname + '/../../../build/index.html')); // Send index.html for HTML5Mode
  });

  return router;

因此，我可以在我的网站上有多个SPA，因为我只是为它们发送了不同的html模板。一个HTML5风格的应用程序需要选择一个类似上面的默认应用程序。

什么属于单个SPA？

在用户体验中相互关联的所有状态。在应用程序之间共享状态(例如身份验证)会很复杂。当然，它们都可以访问您的服务器的完整状态。

它什么时候有用？

如果你的模型清楚地展示了不同的用例，例如，两种不同登录的用户。或者两个不同的“地方”，他们会登录。

有什么好处呢？

• 如果你的“仪表板”应用程序加载了一堆图形代码，但你的“登录页面”应用程序不需要它，你可以为最终用户提供更好的体验。
• 如果用户体验不同，将不同的代码存储在不同的地方更容易管理。
• 在我的例子中，还有一个在服务器上呈现“登录页面”模板的搜索引擎优化好处。

在你尝试之前，你可能不知道你真正需要的是什么。因此，我建议收集所有依赖于登录到同一个应用程序的信息。默认的应用程序应该包括“匿名访问者”的体验。