Tutorial: Implementing Infinite Scroll with AngularJS and ngInfiniteScroll

Over the past few years the infinite scroll has became very popular across the web, developers are increasingly choosing to use infinite scroll over the conventional paginator. The advantage is that it doesn’t require the user to manually go to the next page when he reaches the end of the page, it automatically loads and display more data without the user intervention.

In this tutorial I’m going to show how to implement infinite scroll using ngInfiniteScroll for AngularJS.

First create the js and html file:

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
angular.module('infiniteScrollTutorial', ['infinite-scroll'])
        .controller('infiniteScrollController', function ($scope, $http) {
            $scope.users =
                    [{
                            "id": 1,
                            "first_name": "Kimberly",
                            "last_name": "Grant",
                            "email": "kgrant0@ebay.co.uk",
                            "country": "Bolivia",
                            "ip_address": "93.77.148.179"
                        }, {
                            "id": 2,
                            "first_name": "Elizabeth",
                            "last_name": "Lewis",
                            "email": "elewis1@so-net.ne.jp",
                            "country": "Indonesia",
                            "ip_address": "39.187.159.25"
                        },
                        .
                        .
                        .
 
                        {
                            "id": 100,
                            "first_name": "Shawn",
                            "last_name": "Ellis",
                            "email": "sellis2r@diigo.com",
                            "country": "Portugal",
                            "ip_address": "121.250.152.235"
                        }];
});

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html ng-app="infiniteScrollTutorial">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
        <script src="https://raw.githubusercontent.com/BinaryMuse/ngInfiniteScroll/1.0.0/build/ng-infinite-scroll.min.js"></script>
        <script src="app/resources/js/app.js" type="text/javascript"></script>
        <style>
            .userContainer{
                width:500px;
                height:110px;
                background: #f9f9f9;
                padding: 5px;
                font-family: verdana;
                margin-bottom: 7px;
                box-shadow: 0px 0px 2px 1px;
            }
            .userContainer p{
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div ng-controller="infiniteScrollController">
            <div >
                <div ng-repeat="user in users" class="userContainer">
                    <h4>{{user.first_name}} {{user.last_name}}</h4>
                    <p>
                        <b>Email:</b> {{user.email}}  -   
                        <b>Country:</b> {{user.country}}  -  
                        <b>IP:</b> {{user.ip_address}} 
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>

Nothing special for now, except that I’ve already added the dependency ‘infinite-scroll’ in the angular module declaration, besides that we just have a regular ng-repeat iterating over a JSON (you should make this JSON as big as you can, it will be easier for you to see the results, you can use mockaroo to gerenate some JSON data).

Now let’s change the code a little bit to make the infinite scroll work, we’re going to add the attribute ‘infinite-scroll’ in the div above the one with the ng-repeat, after the modification it should look like this:

1
2
3
4
5
6
7
8
9
10
<div infinite-scroll="getMoreData()">
    <div ng-repeat="user in data" class="userContainer">
        <h4>{{user.first_name}} {{user.last_name}}</h4>
        <p>
            <b>Email:</b> {{user.email}}  -   
            <b>Country:</b> {{user.country}}  -  
            <b>IP:</b> {{user.ip_address}} 
        </p>
    </div>
</div>

Note that the new attribute is referencing the function getMoreData(), which will be called every time the bottom of the element approaches the bottom of the browser window, in this function we’ll have to write the code to get more data, also note the I’m not using the variable ‘users’ anymore in the ng-repeat, instead I’m using the auxiliary variable ‘data’.

Let’s take a look at the getMoreData() code, add this bellow the JSON in your app.js:

1
2
3
4
$scope.data = $scope.users.slice(0, 5);
$scope.getMoreData = function () {
    $scope.data = $scope.users.slice(0, $scope.data.length + 5);
}

I’m initializing the $scope.data with the 5 first elements of the $scope.users, and the function getMoreData is just adding five more elements every time it gets called.

Now if you run you application you’ll see the following result:

AngularJS infinite Scroll
AngularJS infinite Scroll

That’s it! At first it’ll have only 5 elements loaded and as you scroll down it will start loading more.

Related Posts:
Tutorial: Basic DataTable (sorting, filtering and pagination) with AngularJS and ng-Table
Tutorial: Creating Reusable Code with AngularJS Directives

Recommended for you

8 comments on “Tutorial: Implementing Infinite Scroll with AngularJS and ngInfiniteScroll

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>