Showing posts with label angular infinite scrolling. Show all posts
Showing posts with label angular infinite scrolling. Show all posts
Infinite Scrolling for AngularJS

Infinite Scrolling for AngularJS

May 14, 2017
ngInfiniteScroll is a directive for AngularJS to evaluate an expression when the bottom of the directive's element approaches the bottom of the browser window, which can be used to implement infinite scrolling.

Demos


Check out the running demos at the ngInfiniteScroll web site
Infinite Scrolling for AngularJS http://sroze.github.com/ngInfiniteScroll/

Version Numbers


ngInfinite Scroll follows semantic versioning

Getting Started


  • Install it with npm
  •  npm install --save ng-infinite-scroll  
    
  • Import ng-infinite-scroll and angular.
  •  import angular from 'angular';  
     import ngInfiniteScroll from 'ng-infinite-scroll';  
    
  • Ensure that your application module specifies ngInfiniteScroll as a dependency:
  •  const MODULE_NAME = 'myApplication';  
     angular.module(MODULE_NAME, [ngInfiniteScroll]);  
     export default MODULE_NAME;  
    
  • Use the directive by specifying an `infinite-scroll` attribute on an element.
  •  <div infinite-scroll="$ctrl.myPagingFunction()" infinite-scroll-distance="3"></div>  
    
    Note that the directive does not use the ng prefix, as that prefix is reserved for the core Angular module.

    Detailed Documentation


    ngInfiniteScroll accepts several attributes to customize the behavior of the directive; detailed instructions can be found on the ngInfiniteScroll web site

    Ports


    If you use AngularDart, Juha Komulainen has a port of the project you can use.

    License


    ngInfiniteScroll is licensed under the MIT license. See the LICENSE file for more details.

    Testing


    ngInfiniteScroll uses Protractor for testing. Note that you will need to have Chrome browser.
     npm install  
     npm run test  
    
    Thank you very much @pomerantsev for your work on these Protractor tests.

    Bower


    While a Bower repo has been created for legacy use, it is still recommened to use npm and a module bundler (webpack, rollup, SystemJS) to use
     ng-infinite-scroll  
    
    To install using bower:
     bower install ngInfiniteScroll  
    

    Note: Special thanks to Samuel ROZE

    Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.