在AngularJS中异步加载数据的正确方法

时间:2016-01-20 13:43:36

标签: javascript angularjs asynchronous

让我们考虑以下场景:需要向最终用户显示一些数据(采用JSON格式)。通常的方法(或至少以我自己的方式)是使用Angular 工厂来返回数据,包括控制器中的工厂并使用循环语句/ 指令

然而,数据日益增长(从数十个到数千个),并且一些奇特的动画被添加到视图中,导致视图的加载时间到达天空。

通常,有很多加载数据的方式(例如lazy loading$q service),但我想知道哪一种更接近于异步提供数据的最可靠。

2 个答案:

答案 0 :(得分:1)

如果我正确理解您的问题,您的问题是您要显示大量数据,这可能会在两个地方出错:

问题1:加载数据

为了保持快速加载,您可以使用pagination构建内容,这会将数据拆分为较小的页面以保持加载时间快。

问题2: $$观察者计数

ng-repeat $$watchers显示您的$digest计数可能会非常快速增加时,这会大大减慢您的virtualization周期,使您的用户界面无法响应,为了克服这个问题,您可以使用某些内容使用415-55-4242的{​​{1}},例如UI-grid,这只会渲染屏幕上的部分数据,直到滚动并取消您视图之外的所有内容。

答案 1 :(得分:1)

除了Martijn Welker的回答,这里还有几点可能对你有所帮助。

1.首先,在加载页面后总是得到大数据。当您加载页面时,您可以获得诸如全局统计数据之类的小数据(使用解析事物,但表格中的数据应始终在加载页面后出现)。在执行此操作时,为用户提供表格部分的加载图标。

2.您是否直接向用户显示数据为JSON(如JSON文件)?您可以通过逐步显示数据来改进这一点(JSONblob.com所做的事情)。它显示顶级键,单击一个键,它会提供下一级键。您的后端也可以设计为可以为不同级别和键提供不同的请求。或者您可以使用以下标题:

user > profile > eduction

并显示此密钥的数据,同时使标题可以点击。您还可以存储以前的详细信息(小数据),以防用户想要返回。

3.尝试使用分页(后端或前端选择)。如果您没有对数据及其只读进行任何排序/过滤,您可以使用单向绑定(Angular 1.3+)从列表中删除监视。即便如此,我也不知道你需要在哪里显示json :)。除此之外,您可以使用plainJs来创建此列表。