AngularJS 从后端获取数据答案

【问题标题】：AngularJS getting data from backendAngularJS 从后端获取数据
【发布时间】：2013-11-22 06:20:35
【问题描述】：

当我想在我的网络应用程序中使用 angularJs（或类似的）时，我想知道从后端获取数据的正确方法是什么？

我看到的唯一方法是在没有来自后端的数据的情况下渲染 html（带有 js 脚本的静态 html - 例如 angularjs），然后通过来自我的后端 API 的 ajax 请求下载数据。但是我认为这个解决方案不好，因为HTTP请求很多：

例如我有博客网站，我想在侧边栏显示一篇文章、cmets 和相关文章。所以可能我需要至少发出 3 个 HTTP 请求来获取数据，除非我准备 API 以在一个请求中获取我需要的所有内容。

我还可以想象有更多 HTTP 请求的网站。这是正确的方法吗？它不会使服务器超载吗？还是我的思维方式太不对了？

【问题讨论】：

我认为这个问题与 AngularJS 无关。它恰好是您使用的框架。
不确定您的博客网站示例与现实有多接近，但您为什么要使用 Angular 来做类似的事情呢？在这种情况下，听起来您使用 Angular 是为了使用 Angular，而不是因为它解决了您实际遇到的问题。
ajax 驱动的应用程序总是比静态内容页面有更多的 http 请求。这些请求的有效负载比提供完整页面要小得多，尤其是通过 CMS 提供的非缓存页面。大量减慢初始页面加载的请求是一回事（UX 和 SEO），基于用户输入的数据请求是另一回事。您的工作基准是什么？

【解决方案1】：

我认为你必须区分两种情况：

当然，在第二种情况下，通过单独的 HTTP 请求仅获取页面的一部分是有意义的。但是，在第一种情况下，您可以简单地将完整的模型序列化为一个 JSON 对象并将其嵌入到页面中，如下所示：

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

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

【讨论】：

这是一个好方法吗？我在某处读到我不应该将数据直接传递给脚本。
我承认这个解决方案目前并不完美，因为模型数据以不同的方式传输到客户端，这增加了复杂性。但是，除此之外，我认为没有什么大问题。从用户体验的角度来看，这也很好，因为您的页面似乎加载得更快。如果您再次找到您阅读的有关此问题的内容，请在此处发布。

【解决方案2】：

它是 websockets 或 HTTP 请求。准备 API 以获取所有请求是一种选择。另外两个选项是 XMLHttpRequest/iframe 流，这是一种称为 Comet 的技术的方法。

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

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

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

如果你选择旧方法，会有很多问题在路上等着你，比如XmlHttpRequest.responseText while loading (readyState==3) in Chrome

【讨论】：