I want to implement lazy loading in angular.js, i am sending the list of data from backend to the UI using nodejs, i need to implement, on scroll 10 items, are there any examples to achieve this please share any links to do this. Please can anybody help me on this.

I want to implement lazy loading in angular.js, i am sending the list of data from backend to the UI using nodejs, i need to implement, on scroll 10 items, are there any examples to achieve this please share any links to do this. Please can anybody help me on this.

• javascript
• angularjs
• node.js
• mongodb
• mongoose

• use directives such as shabeebk./blog/… or infinite scroll – Vinod Louis Commented Feb 3, 2017 at 6:53
• best tutorial youtube./… checkout this – DHRUV GUPTA Commented Feb 3, 2017 at 6:57

1 Answer 1

Lazy loading is nothing to do with DB, since it depends on the DAO layer, whereas DB is concerned about returning the data for the query submitted to it.

My approach to achieve lazy loading from UI

Using pagination we can do lazy loading

1) Find the total number of documents in your collection

2) Each time when you are loading the page with next set of data, pass on the required information such as from which document the DB needs to send the data

3) Repeat step 2 until you reach the total number of documents in your collection

An example Let us have a collection with few records

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" }

Prerequisite for doing pagination

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

Let me have the initial load size as 5

My first query to DB would be

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" }

My Next query to 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" }

final query would be

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

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

In this example,

Sort on _id is used, which is based on insertion time, which helps us in ordering the documents and render it for the subsequent queries.

Hope it Helps!

References:

https://www.mongodb./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/