AngularJS网站：单SPA VS多SPA应用程序/组件 [英] AngularJS websites: single SPA vs multiple SPA apps/components

问题描述

这个问题已经被现在缠着我有一段时间了。

This question has been bugging me for some time now.

如果您使用的是角建设有多种功能的网站，是它更好地建立一个庞大的SPA或网站分解成功能应用程序，并建立一个SPA为每个应用程序？

If you are building a website with multiple functionality using Angular, is it better to build a huge SPA or break down the website into functional "apps" and build an SPA for each app?

例如，我们有一个社会化媒体网站，通知饲料，用户配置文件，报告和组。你会建立所有这些功能集成到一个单一的SPA，或者构建4种不同的SPA，让后端架构路线正确SPA？

For example, we have a social media website with notification feed, user profile, reporting, and groups. Would you build all these features into a single SPA, or build 4 different SPAs and let a backend framework route to the correct SPA?

例如

www.mywebsite.foo＃/型材/ 12345 /教育

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

VS

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

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

我赞成后一种方法更亲自因为它减少了应用程序的大小，但它确实需要的网页应用程序之间进行导航时重新加载。

I'm personally more in favour of the latter method because it reduces the size of the apps, but it does require the page to reload when navigating between apps.

推荐答案

所以，这里就是我的经验和我所做的：

So, here's what I learned and what I did:

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

My server has a default route:

  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风格的应用程序将需要选择一个默认的应用程序像上面。

So, I can have multiple SPA's on my site, because I just send different html templates for them. An HTML5 style app will need to pick a default app like above.

什么在一个单一的SPA所属？

What belongs in a single SPA?

所有这一切都在用户体验方面相互关联的状态。这将是复杂共享应用程序之间的状态（例如身份验证）。当然，它们都可以访问你的服务器的完整状态。

All the state that is inter-related in the user experience. It will be complicated to share state between apps (e.g. authentication). Of course, they can all access the full state of your server.

当是它有用吗？

如果您有原型，显示明显不同的使用情况如2种不同的登录用户。或两个不同的'地方'他们会登录。

If you have mockups that show clearly different use cases e.g. two kinds of users with different logins. Or two different 'places' they'd login.

什么是可以得到的？

• 如果您是仪表板的应用程序加载了一堆图形code，但你的着陆页应用程序并不需要它，你可以为最终用户提供更好的体验。


• 如果用户体验是不同的，存放不同的code在不同的地方更容易管理。


• 在我的情况下，也有一个好处搜索引擎优化渲染登陆页模板的服务器上。

您可能不知道你真正需要的，直到你尝试一下。所以我建议收集取决于登录到同一应用程序的一切。而默认的应用程序应该包括匿名访问者的体验。

You might not know what you really need till you try it out. So I'd recommend collecting everything that depends on a login into the same app. And the default app should include the 'anonymous visitor' experience.

这篇关于AngularJS网站：单SPA VS多SPA应用程序/组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！