Infinite scrolling, also known as "endless scrolling," "unpagination," and others, is a technique where additional content for a web page is appended dynamically to the bottom of the page as the user approaches the end of the content. You may have seen this technique on the Facebook timeline or on Pinterest's homepage.
ngInfiniteScroll is a directive that you can use to implement infinite scrolling in your AngularJS applications. Simply declare which function to call when the user gets close to the bottom of the content with the directive and the module will take care of the rest. Of course, you can specify several options to ensure that the behavior is just what you're looking for.
Using ngInfiniteScroll is easy—just follow these simple steps:
Include the ngInfiniteScroll JavaScript source script tag on your page, after the script tag for AngularJS.
<script type='text/javascript' src='path/to/jquery.min.js'></script>
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
Ensure that your application module (or whatever module is going to use ngInfiniteScroll)
specifies infinite-scroll as a dependency.
angular.module('myApplication', ['infinite-scroll']);
Note that the module name does not include ng, as that namespace is used
by the official Angular module.
Use the directive by specifying an infinite-scroll attribute on an element.
<div infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"></div>
Note that the attribute does not include ng, as that namespace is used
by the official Angular module.
That's it! ngInfiniteScroll will call myPagingFunction() any time the bottom of the element
approaches the bottom of the browser window. See the API documentation
for more information about what attributes are available for use, and take a look at
the demos to see ngInfiniteScroll in action.
If you use Bower to manage your client-side packages, you can use it to install ngInfiniteScroll. To install, simply run:
bower install ngInfiniteScroll#{{selectedVersion}}
Bower cannot be used to install ngInfiniteScroll for the development head; please select another version to install with Bower.
Select a different version: