Lazy-loading and infinite scroll library for AngularJS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
.travis.yml
Gulpfile.js
LICENSE
README.md
bower.json
package.json

README.md

#ng-Lazy

Lazy-loading and infinite scroll library for AngularJS

Live Demo: http://ng-Lazy.com

Demo App with Spec Suite: https://github.com/adrichman/ngLazy-demo.git

Requires one simple directive wrapping the targeted area.

The widget is configured via the element's attributes, which miror the keys:

  • data : The object on which you are storing the data sets:
$scope.data = { dbCollection: [], otherHash: {}, anotherList: []} 
  • collectionKey : The key(string) to access the collection you will iterate through:
collectionKey = "dbCollection" 
  • dataService : The angular service that makes external api calls

  • fetchMethod : The method on your dataService that makes the api call. Must return a promise.

  • range : number of items to be loaded on each lazyLoad trigger

  • dataKeys : the keys expected to be found on the response of the api call (used to map the response onto a cache object)

  • startDelay : time in milliseconds to delay the start of the api call

  • appendDelay : time in milliseconds to delay appending the response of the api call (because too quick of a response can feel less magical to the user)

  • spinnerColor: the rgb or hex color code to determine the spinner's fill color

####Implementation:

In your index.html:

<script src="bower_components/ngLazy/dist/lazyLoader.js"></script>

In your AngularJS app:

angular.module('myApp', [
      'aDependency',
      'anotherDependency',
      'ngLazy'
])

In your view, wrap the element containing the ng-repeat with the lazy-load element, using the 'lazy' prefix on attributes for configuring:

     <lazy-load 
      lazy-data="data" 
      lazy-data-service="dataService" 
      lazy-fetch-method="getData" 
      lazy-range="12" 
      lazy-data-collection-key="dbCollection" 
      lazy-data-keys="['dbCollection','otherHash','anotherList']" 
      lazy-start-delay="150" 
      lazy-append-delay="2000"
      lazy-spinner-color="#4FA7D9">
          <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <td>NAME</td>
                </tr>
              </thead>
               <tbody>
                 <tr class="cohort-id-col fx-fade-down fx-easing-bounce fx-speed-800" ng-repeat="datum in data.mongo">
                      <td class="cohort-pic">
                        <span class="cohort-name">{{ datum.First }} {{ datum.Last }}</span><br>
                        <img class="avi" ng-src="{{ datum.Email | MD5 }}">
                      </td>
                 </tr>
               </tbody>
          </table>
      </lazy-load>

Testing!

This library is difficult to test, and improve, without any sort of integration in a working application. That's why there's ng-Lazy.com. Please visit the ng-Lazy.com repo for the unit and e2e tests.

###Library installation:

bower install ngLazy

###Building and editing

Please reference the demo app and its specs while developing in this library. Upon making changes and needing to re-build:

gulp build

###Demo App / Specs Installation

clone down the repo:

git clone https://github.com/adrichman/ngLazy-demo

install the dependencies:

cd ngLazy-demo
npm install
bower install

###Running it:

serve it:

grunt serve

###Run the specs:

first, serve it. then:

grunt test

Pull Requests are Welcomed

###TODO:

  • more flexibility with different api responses and data services