AngularJS在服务器和客户端之间自动同步数据

时间:2013-03-14 18:03:35

标签: angularjs angular-resource

AngularJS文档中有些东西我似乎无法找到,或者我可能只是缺少。

我正在后端创建一个带有NodeJS和Express的Web应用程序,我试图了解它如何与前端的Angular交互。特别是,我将为Angular提供一个JSON API来获取信息。我希望前端始终保持最新状态。

我的问题是:

  • 双向数据绑定功能是否意味着Angular($ resource或 $ http)每 n 自动从服务器获取数据 秒?
  • 它是否自然地使用长轮询,短轮询或websockets?
  • 您是否需要JQuery来实现服务器 - 客户端同步,或者一切都可以完成 与Angular?
  • 您是否必须添加额外的代码才能实现此行为 发生?我需要使用$ timeout吗?

我似乎发现的每个例子都涉及客户端获取数据一次。不与服务器同步数据。

1 个答案:

答案 0 :(得分:81)

AngularJS中的双向绑定是指数据模型($ scope)和视图(指令)。例如,如果模型中的数据发生变化,视图将自动更新。同样,如果用户修改了视图中的数据,您的模型将自动更新。

通过$ http服务模块进行与Web服务的交互。因此,要从RESTful API获取数据,您可以执行以下操作:

$http.get('/someUrl').success(successCallback);

AngularJS site上有$ http的完整文档。我想你会发现它与jQuery的$ .ajax方法非常相似。您可以使用angular的$ timeout服务(基本上是setTimeout的包装器)轻松设置$ http.get()进行短轮询。

对于AngularJS客户端和服务器API之间的实时更新,您可能希望查看Socket.io。它使用node.js在浏览器和服务器之间创建实时套接字连接,并为旧版浏览器提供回退机制(flash,long-polling)。 GitHub上有一个样板项目,它演示了如何使用Socket.io设置AngularJS: https://github.com/btford/angular-socket-io-seed

回顾:

  

双向数据绑定功能是否意味着Angular($ resource或   $ http)每隔n秒自动从服务器获取数据吗?

不,Angular模型和视图之间存在双向绑定。

  

它是否自然地使用长轮询,短轮询或websockets?

默认情况下,Angular不包含任何这些内容。你必须自己设置它们。

  

您是否需要JQuery来实现服务器 - 客户端同步或者是否可以使用Angular完成所有工作?

从广义上讲,$ http是jQuery的$ .ajax的Angular等价物

  

您是否必须添加额外的代码才能使此行为发生?我需要使用$ timeout吗?

使用$ timeout进行短轮询,或者为长轮询和/或websockets推送自己的解决方案(参见angular-socket-io-seed项目)。