AngularJS从后端获取数据

Question

我想知道在使用AngularJS（或类似技术）开发网站时，从后端获取数据的正确方法是什么？

我唯一看到的方法是呈现HTML（带有静态HTML和JS脚本 - 如AngularJS），但没有从后端获取任何数据，然后通过Ajax请求从我的后端API下载数据。但我认为这种解决方案不好，因为会产生很多HTTP请求：

例如，我有一个博客网站，我想显示文章、评论和相关文章。因此，除非我准备好使用API一次性获取所有需要的数据，否则我可能需要至少进行3个HTTP请求来获取数据。

我还可以想象出需要更多HTTP请求的网站。这样做是合适的吗？这样做会不会过载服务器？或者我的想法是错误的？

- latata

---

我认为这个问题与AngularJS无关，它只是你使用的框架而已。 - Etherealone

不确定你所举的博客网站例子有多真实，但为什么你会想要在这样的情况下使用Angular呢？在这种情况下，听起来像是你只是为了使用Angular而使用Angular，并不是因为它解决了你实际存在的问题。 - Matijs

基于 AJAX 的应用程序将始终比静态内容页面具有更多的 HTTP 请求。这些请求的有效载荷要比通过 CMS 提供完整页面，特别是非缓存页面的载荷小得多。造成初始页面加载缓慢的大量请求是一件事（UX 和 SEO），根据用户输入请求数据是另一件事。你的基础是什么？ - charlietfl

Answer 1

我认为你需要区分两种情况：

1. 首次渲染页面。
2. 在某些内容发生更改时更新页面的部分内容。

当然，在第二种情况下，通过单独的HTTP请求获取页面的部分内容是有意义的。然而，在第一种情况下，您可以将完整的模型序列化为一个JSON对象，并像这样嵌入到页面中：

<script type="text/javascript">
  var myCompleteModel = { /* Here goes your model */ };
<script>

您页面上的组件控制器可以访问此全局变量以提取对它们有关的部分。您还可以将对初始模型的访问封装在服务中，以避免在所有控制器中访问全局变量。

- lex82

---

这是一个好的做法吗？我在某个地方读到过，不应该直接将数据传递给脚本。 - latata

我承认这个解决方案并不完美，因为模型数据以不同的方式传输到客户端，增加了复杂性。然而，除此之外，我并没有看到什么大问题。从用户体验的角度来看，它也很好，因为页面加载速度更快。如果您再次找到有关此问题的信息，请在此处发布。 - lex82

Answer 2

这要么是websockets，要么是HTTP请求。准备API以获得所有内容的一次性请求是一种选择。另外两个选项是XMLHttpRequest/iframe流，这是一种称为Comet的技术方法。

我会选择websockets，因为它应该解决以前使用奇怪的应用程序（如iframe流）解决的问题。如果浏览器不支持websockets，则有库可以正确处理回退：

web-socket-js（这需要websocket服务器）

Socket.IO（这有一个node.js模块，并在websocket协议之上实现了一种不必要的协议）

如果您选择旧方法，将会有许多问题等待您解决，例如在Chrome中加载时XmlHttpRequest.responseText(readyState==3)。

- Etherealone