Mongoose, AngularJS, NodeJS - node.js

Question

I am using a MongoDB database.
For the front AngularJS.
Also, I am using Mongoose.
I have:
app.get("/images", function(req, res) {
mongoose.model('Image').find(function (err, images) {
res.send(images);
});
});
app.listen(3000);
It works fine when I go to: http://localhost:3000/images
then:
<div ng-repeat="photo in photos">
<!-- My Data List -->
<h3>{{photo.name}}</h3>
</div>
Until here, everything is fine.
BUT I will have like thousand and thousand data to display.
So I will need something like "infinite scroll" for the front and also I will need to limit the API http://localhost:3000/images with query range or pagination ???
How I can proceed to do something with lots of data?
Thanks!

Answer 1

You likely don't want to load all data at once if it is a huge amount.
First I would do something like this limit the number of entries you get for each request.
app.get("/images", function(req, res) {
var query = mongoose.model('Image').find({})
.limit(req.query.numberOfItems)
.skip(req.query.index)
query.exec(function (err, images) {
res.send(images);
});
});
app.listen(3000);
On the client you should then decide to dynamically load more data once you need it.
This depends a little bit on what you want the user experience to be e.g have different pages and you load more data once you open the next page or if the user scrolls down further etc.

Answer 2

Use server side pagination in mongoose using mongoose-paginate and limit your query output. Same way to include pagination in angular use angular-ui pagination. If you want to use the infinite scroll then in angular use ngInfiniteScroll.
Hope this helps.

Answer 3

You can use the mongoose Query API to specify conditions on which to search: http://mongoosejs.com/docs/queries.html
You can use where() to specify you pagination criteria, e.g., where({id: {$gt: page}}) (assuming you are using some kind of auto-incrementing id) and limit() to specify your page size, e.g., limit(10).
Each time you query the server for an additional page, you will need to supply the criteria in your URL: /images?page=1. This criteria should be incremented by 10 each time you fetch a page.
The criteria can be anything that represents a sequential ordering of your data, whether an ID, or a timestamp, or some other arbitrary value.

Answer 4

To limit the data in mongoose:
mongoose.model('Image').limit(10).exec(function(err, images){
// get the images....
}); // this will only return 10 images
While in angular you can use limitTo filter:
<div ng-repeat="photo in photos | limitTo: 10 ">
<!-- My Data List -->
<h3>{{photo.name}}</h3>
</div>
Now from here you can learn how to paginate or infinit scroll. (There are various tuts on this topic on the web)