Developing infinite scroll system using AngularJS

February 22, 2016
by Inaam Hussain

Infinite scroll in AngularJS is one of the complicated task. 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 content from back-end in browser at once.

In this tutorial we are addressing same issue and we will develop simple application which will have infinite scroll using ngInfiniteScroll directive.

DEMO  DOWNLOAD

How ngInfiniteScroll works?

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

How to use ngInfiniteScroll?

Following steps to implement infinite scroll,

  1. Will download and add ngInfiniteScroll js file in our application. before that we also need add jQuery & AngularJS files to include before that. 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 in to your main app module. like below shown,

    angular.module('testApp', ['infinite-scroll']);
  3. Specify directive infinte-scroll attribute to an element.

    <div infinite-scroll="paginationFunction()"></div>
  4. Now, paginationFunction() function will automatically call once you reach to bottom of browser window.

Getting Started

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

index.html
<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 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 bottom.
And here is controller code. In which maintaining array of data.

app/app.js
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 &lt;= 12; i++) {
            $scope.images.push(last + i);
        }
    };
});

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

Final look of app you can see below,

infinite scroll demo

infinite scroll demo

Lets see what all parameters we can pass to element.

Parameters

  1. infinite-scroll - {expression} : Expression is the function which call everytime when element rached to bottom of the window.
  2. infinite-scroll-distance (optional) - {number} : Here number represent the how close the elemet to the browser window. like if we set to 1. it means that will call infinite scroll when 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 diretive should check immediatly to see if scroll event occured or not. this is useful when content inside direvtive element is not tall enough to fill up 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 AngularJS application. and that will also improve your performance of app by loading data on UI in chunks.
 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

1 comment

  1. |

    Thank you, very useful…

Leave a Comment