Question

我想在angular.js中实现延迟加载，我使用nodejs将数据列表从后端发送到UI，我需要实现，滚动10项，是否有任何示例来实现这一点请分享任何链接去做这个。请允许任何人帮助我。

Answer 1

延迟加载与DB无关，因为它依赖于DAO层，而DB则关注为提交给它的查询返回数据。

我从UI实现延迟加载的方法

使用分页我们可以进行延迟加载

1）查找集合中的文档总数

2）每次使用下一组数据加载页面时，请传递所需的信息，例如数据库需要从哪个文档发送数据

3）重复步骤2，直到达到集合中的文档总数

示例让我们拥有一个记录很少的集合

db.mycollection.find();

{ "_id" : ObjectId("58947e7e93cbb73057657d60"), "name" : "Clement" }
{ "_id" : ObjectId("58947e7e93cbb73057657d61"), "name" : "Rockin" }
{ "_id" : ObjectId("58947e7e93cbb73057657d62"), "name" : "Gowri" }
{ "_id" : ObjectId("58947e7e93cbb73057657d63"), "name" : "Inbaraj" }
{ "_id" : ObjectId("58947e7e93cbb73057657d64"), "name" : "Siva" }
{ "_id" : ObjectId("58947e7e93cbb73057657d65"), "name" : "Rani" }
{ "_id" : ObjectId("58947e7e93cbb73057657d66"), "name" : "Rose" }
{ "_id" : ObjectId("58947e7e93cbb73057657d67"), "name" : "Rekha" }
{ "_id" : ObjectId("58947e7e93cbb73057657d68"), "name" : "Dev" }
{ "_id" : ObjectId("58947f6f93cbb73057657d69"), "name" : "Joe" }
{ "_id" : ObjectId("58947f8393cbb73057657d6a"), "name" : "Beniton" }

进行分页的先决条件

db.mycollection.find().count()
11

让我初始加载大小为5

我对DB的第一个查询是

db.mycollection.find().sort({"_id":1}).limit(5);

{ "_id" : ObjectId("58947e7e93cbb73057657d60"), "name" : "Clement" }
{ "_id" : ObjectId("58947e7e93cbb73057657d61"), "name" : "Rockin" }
{ "_id" : ObjectId("58947e7e93cbb73057657d62"), "name" : "Gowri" }
{ "_id" : ObjectId("58947e7e93cbb73057657d63"), "name" : "Inbaraj" }
{ "_id" : ObjectId("58947e7e93cbb73057657d64"), "name" : "Siva" }

我对DB的下一个查询

db.mycollection.find().sort({"_id":1}).skip(5).limit(5);

{ "_id" : ObjectId("58947e7e93cbb73057657d65"), "name" : "Rani" }
{ "_id" : ObjectId("58947e7e93cbb73057657d66"), "name" : "Rose" }
{ "_id" : ObjectId("58947e7e93cbb73057657d67"), "name" : "Rekha" }
{ "_id" : ObjectId("58947e7e93cbb73057657d68"), "name" : "Dev" }
{ "_id" : ObjectId("58947f6f93cbb73057657d69"), "name" : "Joe" }

最终查询将是

db.mycollection.find().sort({"_id":1}).skip(10).limit(5);

{ "_id" : ObjectId("58947f8393cbb73057657d6a"), "name" : "Beniton" }

在此示例中，

使用_id排序，它基于插入时间，这有助于我们订购文档并为后续查询呈现文档。

希望它有帮助！

参考文献：

https://www.mongodb.com/blog/post/the-mean-stack-mongodb-expressjs-angularjs-and

Lazy Loading/More Data Scroll in Mongoose/Nodejs

http://adrichman.github.io/implementing-a-lazy-load-and-infinite-scroll-in-angularjs/

如何使用mongodb数据进行角度延迟加载

1 个答案: