ng-infinite-scroll For Infinite Scrolling In AngularJS

on June 23, 2017
🔥 6511 views
Contents hide
1) ng-infinite-scroll
2) Implementation
3) Usage
4) Getting Started With Infinite-scroll
5) Parameters

In this tutorial, we will see how to use ng-infinite-scroll For Infinite Scrolling In AngularJS. ng-infinite-scroll gives a directive to load data automatically on scrolling down the page.

Check out the demo on how to use ng-infinite-scroll For Infinite Scrolling In AngularJS.



ng-infinite-scroll

infiniteScroll allows you to specify behavior when the bottom of an element nears the bottom of the browser window. Infinite scroll not only improves the interaction but also helps in putting less latency to Server because we don’t have to load all of the data from the server in the browser at once.

 

Implementation

To create an infinite scroll we will be using the AngularJS and its directive ng-infinite-scroll and the Bootstrap for design purpose.
let’s start with implementing the dependencies.

Now include the required libraries into our index.html

index.html

<html>
  <head>
    <link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>

  <body>
	
 	 <!-- OUR APP GOES HERE -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"></script>
	<script src="app/app.js"></script>	
	
  </body>

</html>

Usage

After implementing all the dependencies in the index.html file. we have to define our app and Inject the ng-infinite-scroll module in our application.
So let’s inject dependencies in our main app module.


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

 

and after that, we have to set the directive attribute to an element.


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

And Now that scroll_function will be invoked once you reach the bottom of the page.

Get more parameters related to ng-infinite-scroll Here!

 

Getting Started With Infinite-scroll

Let’s start with an actual example by implementing directives and the function to our index.html file.

index.html

<body ng-app="infinite-Scrolling">
  <div class="container" ng-controller="scrolling">
    <div class="main-wrapper">
      <div class="row" infinite-scroll='load()'>
        <div class="col-xs-6 col-md-3" ng-repeat='image in images'>
          <a class="thumbnail">
            <img src="http://placehold.it/200x100/black/&text={{image}}">
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

As you can see we have defined the app by infinite-scroll containing controller scrolling with the function load(). every time it reaches the bottom of the page it invokes the function and loads the additional data to the bottom of the page.

Now let us the controller functioning:

app.js

var app = angular.module("infinite-Scrolling", ["infinite-scroll"]);

angular.module("infinite-scroll").value("THROTTLE_MILLISECONDS", 250);

app.controller("scrolling", function($scope, $http) {
  $scope.images = [1, 2, 3, 4, 5];

  $scope.load = function() {
    var last = $scope.images[$scope.images.length - 1];
    for (var i = 1; i <= 5; i++) {
      $scope.images.push(last + i);
    }
  };
});

As you can see adding throttle for preventing lack of effects on the screen while loading more data. and adding 5 more data on every time when we called that function.

Parameters

  • infinite-scroll – {expression} – Expression to evaluate (usually a function call) when the bottom of the element approaches the bottom of the browser window.
  • infinite-scroll-distance (optional) – {number} – A number representing how close the bottom of the element must be to the bottom of the browser window before the expression specified by infinite-scroll is triggered. Measured in multiples of the window height; for example, if the browser window is 1000 pixels tall and infinite-scroll-distance is set to 2, the infinite scroll expression will be evaluated when the bottom of the element is within 2000 pixels of the bottom of the browser window. Defaults to 0 (e.g. the expression will be evaluated when the bottom of the element crosses the bottom of the browser window).
  • infinite-scroll-disabled (optional) – {boolean} – A Boolean expression that, when true, indicates that the infinite scroll expression should not be evaluated even if all other conditions are met. This is usually used to throttle or pause the infinite scroll, for example when data is loading via Ajax. If a scroll event triggers the directive but this attribute prevents the expression evaluation, the event will be handled instead immediately after this attribute again evaluates to false.
  • infinite-scroll-immediate-check (optional) – {boolean} – A boolean expression that indicates that the directive should check immediately to see if a scroll event would trigger an evaluation of the infinite scroll expression even if a scroll event does not occur. Useful if it’s possible that the content inside the directive’s element is not tall enough to fill up the entire browser window’s height. Defaults to true.
  • infinite-scroll-listen-for-event (optional) – {string} – The name of an event that, when received, will cause the scroll position check to be re-run. This is useful if you need to manually trigger the scroll handler, for instance, if your items have been filtered or modified without altering the collection.
  • infinite-scroll-container (optional) – {HTMLElement | [] | string} – The HTMLElement in which scrolling is contained. This is an expression that results in an HTMLElement object, an array whose first element is evaluated using angular.element(), or a string which is used as the parameter to document.querySelector(). The selector is similar to jQuery selectors but should evaluate to a single element. Remember to use single quotes around string constants.
  • infinite-scroll-use-document-bottom (optional) – {boolean} – True, use the bottom of the document, rather than the containing element, to determine infinite-scroll-distance.
  • infinite-scroll-parent (optional) – When present, the scroll container that is tracked is the parent element of the element on which the ngInfiniteScroll directive is placed.

Get Some More Angular Here!

Tags: , , , , , , ,