lazycontainer
v1.0.10
Published
LazyContainers for AngularJS allows you to transparently retrieve elements from Arrays or any end-point into a container (the lazyContainer) and easily signal it to load, remove, update, insert, filter, sort, change their look, etc.
Downloads
16
Maintainers
earcamoneReadme
lazyContainers
LazyContainers are a simple and yet powerful tool. The concept behind lazyContainers is simple, you define a block of content (the lazyContainer), assign to it an iterator (aka lazyIterator) from which it will retrieve the content and just let it do the hard repetitive work for you. Once set up, you will just have to focus on coding your controller to signal the LazyContainer what to do.
Just to mention a few of its features, lazyContainers will take care of transparently retrieving content when signaled from any Array of Objects or almost any remote end-point and build each elements HTML using a directive or template you previously defined. At any given point, you can request the lazyContainer to switch this template/directive for another one and your elements will instantly change their look, you will even be able to filter, sort, update or remove the lazyContainer elements by any of its properties. Let's say you are retrieving content from an end-point which outputs the content un-ordered, lazyContainers can take care of sorting the content transparently for you before loading it. You will, of course, also be able to update/remove or insert elements from within code inside your lazyContainers and assign to any of its actions, which are a lot, your own callbacks to get triggered when these actions are requested which might also decide if they allow or not the action completion.
Installation
$ npm install lazycontainer lazyiteratorsUsage:
lazyContainers are a simply to use and yet very robust AngularJS component in which you will rely almost all the work related with the elements listed in your application and you will simply signal from within your controller what you want it to do so, in this README file i will quickly show you a classic and simply lazyContainer "squeleton" composed by the HTML initializating a lazyContainer and the controller which will signal it to do some simple tasks. For more information, kindly check its full documentation at: http://www.slidonjqueryslider.com/lazycontainer/
In this example, our lazyContainer will be loading its content from within an Array of Objects through an Array iterator called lazyArrayIterator, at any point you can switch the lazyArrayIterator for a lazyEndPointIterator and the elements can be retrieved from almost any HTTP end-point transparently without any sort of code change.
Let's create the HTML with our lazyContainer:
<body ng-app="myApp" ng-controller="myAppController as controller">
<div ng-if="controller.status.loading.elements">
Loading content, please wait..
</div>
<div ng-if="controller.status.loading.done">
No more elements in collection
</div>
<div ng-if="controller.status.error.elements" ng-click="controller.load = true">
Error loading content, click to retry
</div>
<button ng-click="controller.load = true">LOAD ELEMENTS</button>
<lazy-container
next="controller.load"
status="controller.status"
config="controller.config"
iterator="controller.iterator" >
</lazy-container>
</body>As you can see in the previous HTML, lazyContainers will also help you easily inform client when content is loading, there was an error while trying to retrieve the content or there are no more elements to load by simply setting true some of the properties of its status object when any of those conditions happen so you don't even have to bother in adding this UI logic in your controller, lazyContainers will handle this for you.
Finally, we create our Angular module which must require the 'lazyContainer' module (registered when you included/required lazyContainer's file) which will register the lazyContainer directive, then we will create the initial "Config Object" and the lazyIterator our lazyContainer will be using to retrieve content from:
var angular = require('angular');
var LazyIterators = require('lazyiterators');
/* Create Angular App */
var myApp = angular.module("myApp", [require('lazycontainer')]);
/* Create App Controller */
myApp.controller("myAppController", [function() {
var i, elements = [];
/*
* Initial lazyContainer "Config Object". We tell lazyContainer to
* use the '/templates/elements.html' template to render each element
*
**/
this.config = {
elements: {
template: "/templates/elements.html",
},
};
/*
* lazyIterator used by our lazyContainer, we build a list
* of bogus elements and build a lazyArrayIterator over it.
*
**/
for (i = 0; i < 100; i++) {
elements.push({
id: i,
name: 'element ' + (i + 1),
});
}
this.iterator = new LazyIterators.ArrayIterator(elements);
}]);
You are done! as simple as that, now the lazyContainer will retrieve the content from the lazyArrayIterator (passed via its "iterator" property) each time the user clicks the load button, which simply sets true the "next" lazyContainer parameter signaling it to retrieve a badge of elements from the currenty assigned iterator. The retrieved elements will be rendered using the "/templates/elements.html" template specified in the "Config Object" passed to the lazyContainer in its "config" parameter.
Please note that the parameter used to load elements is called "next" instead of "load" as in the near future you will be able to specify different lazyContainers types which will let you both load content forward (next) and backward (prev).
LazyContainers will set to true the different status properties specified in the "status" object parameter when any of this conditions happen, for example when its loading content from the lazyIterator, there was an error loading the elements or there are no more elements to load from within it. Also note that the user (or your controller from code) can request any number of concurrent loads and the lazyContainer will simply schedule them and set the "loading" property to false once all the loads had been processed (when iterating over an Array this is instant but when doing so with an end-point, connection might delay between requests and lazyContainers will handle this transparently for you). In other words, no more "UI loading/error logic" in your controllers either.
At this point we already have a lazyContainer set up and working, handling for you the loading of content and the UI loading/error reporting logic, kindly check its full documentation at: http://www.slidonjqueryslider.com/lazycontainer/
Authors
- Emiliano Arcamone - earcamone
See also the list of contributors who participated in this project.
License
This project is licensed under the Apache License