Developing infinite scroll system using AngularJS

Infinite scroll in AngularJS is one of the complicated tasks. Infinite scroll not only improves the user interaction but also helps in putting less latency to Server because you don’t have to load all of the content from the back-end in the browser at once.

In this tutorial, we are addressing the same issue and we will develop a simple application that will have infinite scrolls using the ngInfiniteScroll directive.

DEMO  DOWNLOAD

How ngInfiniteScroll work?

ngInfiniteScroll is an AngularJS directive, with the help of that we can implement Infinite Scroll in the AngularJS application.
So, simply have to make one function that contains our logic to load the next chunk of data. and that will call once you get close to the bottom of the content. and the rest will handle by module and directive.

How to use ngInfiniteScroll?

Following steps to implement infinite scroll,

1. I will download and add ngInfiniteScroll js file to our application. before that, we also need to add jQuery & AngularJS files to include before them. like below

<script type='text/javascript' src='path/to/jquery.min.js'></script> : jQuery library
<script type='text/javascript' src='path/to/angular.min.js'></script> : AngularJS library
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script> : InfinteScroll directive

2. Inject dependency into your main app module. As below shown,

angular.module('testApp', ['infinite-scroll']);

3. Specify directive infinite-scroll attribute to an element.

<div infinite-scroll="paginationFunction()"></div>

4. Now, paginationFunction() function will automatically call once you reach to the bottom of the browser window.

Getting Started

So, lets start with real example to understand how it works. here main index file which contains our specified directive,

<div role="main" class="container theme-showcase" ng-controller="scrolling">
    <div class="main-wrapper">
        <div class="row" infinite-scroll='loadMore()'>
            <div class="col-xs-6 col-md-3" ng-repeat='image in images'>
                <a class="thumbnail">
                    <img src="http://placehold.it/350x250&text={{image}}" alt="{{image}}">
                </a>
            </div>
        </div>
    </div>
</div>

in the above code you can see that we have defined directive infinite-scroll with the loadMore function in it. that function will call every time when you reach the bottom.
And here is the controller code. In which maintaining an array of data.

var app = angular.module('infiniteScroll', ['infinite-scroll']);
angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 250);
app.controller('scrolling',function($scope, $http){
    $scope.images = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    $scope.loadMore = function() {
        var last = $scope.images[$scope.images.length - 1];
        for(var i = 1; i <= 12; i++) {
            $scope.images.push(last + i);
        }
    };
});

Here you can see adding throttle for preventing shabby effects on the screen while loading more data. and adding 12 more data on every time when we called that function and maintained $scope.images array.

Lets see what parameters we can pass to the element.

Parameters

1. infinite-scroll - {expression} : Expression is the function that calls every time when element reaches to the bottom of the window.
2. infinite-scroll-distance (optional) – {number} : Here number represent the how close the element to the browser window. like if we set it to 1. it means that will call infinite scroll when the bottom is above 1000px.
3. infinite-scroll-disabled (optional) – {boolean} : A boolean expression in which we have to pass true or false to stop calling infinite scroll.
4. infinite-scroll-immediate-check (optional) – {boolean}: A boolean expression that indicates that the directive should check immediately to see if the scroll event occurred or not. this is useful when the content inside directive element is not tall enough to fill up the entire window.
5. infinite-scroll-listen-for-event (optional) - {string} : A string is name of event that you to trigger manually.

Conclusion

It’s very easy to implement infinite scroll in the AngularJS application. and that will also improve your performance of the app by loading data on UI in chunks.