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

58

在AngularJS文档中有一些我无法找到的内容,或者可能是我错过了。

我正在使用NodeJS和Express创建Web应用程序,并尝试了解它如何与前端的Angular交互。特别地,我将为Angular设置JSON API以获取信息。我希望前端始终是最新的。

我的问题是:

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

我似乎找到的每个示例都涉及客户端仅获取一次数据,而不是将数据与服务器同步。


3
Angular不管理客户端/服务器同步。如果你想定期轮询后端,你需要自己编写代码。你可以使用$timeout来方便地实现更新(这样更新会在digest循环内进行),但你必须在自己的代码中更新作用域。 - Jollymorphic
1个回答

82

在AngularJS中,双向绑定指的是数据模型($scope)和视图(directives)之间的关系。例如,如果数据模型发生了变化,视图会自动更新。同样地,如果用户修改了视图中的数据,数据模型也会自动更新。

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

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

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

对于AngularJS客户端和服务器API之间的实时更新,您可能需要了解一下Socket.io。它使用node.js创建浏览器和服务器之间的实时套接字连接,并具有针对旧版浏览器的回退机制(flash,长轮询)。在GitHub上有一个样板项目展示了如何配置带有Socket.io的AngularJS:https://github.com/btford/angular-socket-io-seed

总结一下:

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

不是,双向绑定是在Angular模型和视图之间实现的。

它自然使用长轮询、短轮询还是WebSockets?

Angular默认没有包含这些内容。您必须自己进行设置。

是否需要JQuery才能实现服务器-客户端同步,还是一切都可以用Angular完成?

$http在广义上相当于jQuery的$.ajax。

是否需要添加额外的代码才能实现此行为?我需要使用$timeout吗?

对于短轮询,请使用$timeout,或者针对长轮询和/或WebSockets制定您自己的解决方案(请参见angular-socket-io-seed项目)。


2
非常有帮助 - 可能值得一提的是,这里的“模型”是客户端的。这对我来说一开始并不明显。您知道Angular是否计划在库中将socket.io或其他与API通信的方式作为默认设置吗?我很惊讶他们的文档中没有提到这一部分。谢谢! - Brian Armstrong
也许您可以在此项目中找到有关如何实现此概念的更多见解。虽然它基于KO,但您可以获得灵感:https://github.com/imrefazekas/knockout.sync.js - Qorbani
你应该研究一下 Omnibinder - 目前是一个原型,但正在寻求处理服务器-客户端模型同步的方法。 - user545680

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接