#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