AngularJs - 持久性,存储,ajax请求,数据完整性

时间:2014-08-11 17:55:47

标签: ajax angularjs persistence

我正在评估AngularJS是否可以作为我的中等简单Web应用程序的解决方案。

目标是尽可能减少AJAX服务器对数据的请求量。

我的实际问题很简单,但该请求的影响导致混淆。

简而言之:“Angular 可以修改通过用户输入从后端接收的JSON数据的部分并保持状态,直到我准备返回该数据。” / p>

情景:

从包含根名称和服务器的服务器获取JSON数据。每个根名称的关联地址详细信息。该列表将呈现为屏幕以及每个项目的“编辑地址”按钮。

用户点击“编辑地址”,Angular会显示一个表单,其中包含根名称的地址数据。

用户编辑数据,单击提交,客户端将JSON数据发送到服务器,为了论证,我们获得成功返回。地址详细信息已修改。

这就是我的问题 - 缺乏理解 - 的问题突显出来的地方。

我是否需要从服务器返回10个项目的整个列表,其中包含单个修改后的地址详细信息,只需编辑单个列表项,或者我只需更新单项客户端并在用户返回列表时保持状态,比如编辑另一项?

IOW,我们获得了成功,但除了“成功”之外没有实际返回数据 - 我们的客户已存储了更改。

这就是数据完整性问题让人头疼的问题。

**或**

获取根项的列表,不带关联的地址数据。 用户单击根项目的“编辑地址”按钮。 我们从服务器获取根名称的地址数据,并显示表单,用户编辑数据,提交,异步发送数据,获得成功。 用户返回列表,另一个服务器请求再次从服务器获取列表。

这很难解释,但底线是关于持久性和数据完整性。

最佳做法是在每个用户编辑数据之后发出服务器请求,还是将修改后的数据存储在客户端 - 持久性?

显然验证将在服务器端以及客户端完成。

1 个答案:

答案 0 :(得分:1)

您要问的更多的是服务器端问题,关于如何设计一个好的RESTful API,允许更改单个实体而不必每次都发送/加载整个列表。所以你的问题的答案就是它完全取决于你... angular可以很好地将UI元素绑定到控制器中的javascript对象,但是当它需要将数据保存到服务器,你可以随心所欲地做到这一点。

在理想世界(IMO)中,您的服务器端API将支持以下内容:

  • 获取地址列表(角度存储在$ scope.addresses中)
  • 获取单个地址
  • PUT / PATCH更新地址(当用户更改单个地址并确认时)并返回204无内容
  • POST以创建新地址,并使用服务器提供的标识符(例如" id")返回创建的地址,您可以在angular中使用它来确定地址是否已在服务器端持久保存或不。 POST后,使用从服务器获取的内容重写角度范围对象以保存id字段。
  • 删除删除它们(不返回任何内容)

有了这个,当你让客户端创建一个地址时,你应该向服务器发送一个POST来创建一个地址,接受响应JSON并将它复制到你刚刚保存的对象上,这样它现在就有一个&#34 ; ID"领域(或类似)。您可以使用角度模板直观地表示任何带有" id"字段保存到服务器。这样,您每次保存时都不必重新抓取整个列表。

为了更新地址,这就是PATCH有用的原因:您只能将对各个字段的更改发送到服务器,并确保只发送用户已更改的内容。

删除地址可以通过检查" id"如果存在字段,如果是,则向服务器发送DELETE,否则,该对象永远不会被保存",所以只需从范围中删除该地址即可。成功删除后,您只需从范围中删除该地址,无需重新加载所有内容。

说到"数据完整性",即。如果在您完成原始数据请求后创建了其他地址,则您必须自己完成此操作...理想情况下,类似于Stack Overflow或Github如何执行此操作,这是在UI中提示存在服务器端更改,您应该单击以刷新。如何确定刷新取决于您,但您可以通过定期轮询来保持简单,或者您可以全力以赴地执行WebSockets /服务器端事件并实际将更改推送到浏览器。

创建持久存储到服务器的UI的最佳方法是一个复杂的主题,并且有很多最佳实践。 Angular会支持您想要的任何内容,但您需要在服务器上进行协调才能完成此任务。