AngularJS Any Loader Module

At one point or another, AngularJS applications will rely on loading data. And when that moment arrives, it’s nice to let your users know about it. The most common practice is some variation of a loading indicator. You’ve seen them; the spinning circle of patience, that only disappears when whatever you were waiting for finally arrives – hooray!

Any Loader To the Rescue

Wouldn’t it be great if you could add these loading indicators to your app by dropping a simple directive into your markup? At Intridea we’ve developed any-loader-ng, a module to easily display a loading indicator anywhere in your app. The module has two highly customizable directives for a stand-alone loading spinner (<any-loader>) and a button with multiple loading state configurations (<loader-button>). Both directives can accept a simple configuration object that determine the loading behavior. We’ve also used Font Awesome as the icon font with the default spinner icon being fa-spinner, but that can be customized.

Examples:

Here we have the <any-loader> directive in its simplest form:

Controller:

var loaderConfig = {   "isLoading": false }; 

Markup:

<any-loader cfg=”loaderConfig”></any-loader> 

By changing the controller’s loaderConfig.isLoading value to true, perhaps while you are loading some data over HTTP, it will enable the loading indicator to be displayed. There are other optional properties you can add to the configuration object to further customize the directive. The size property takes a string to change the css font-size of the icon (i.e. ‘3em’) to suit your visual needs. The iconClass property allows you to override the default icon class with whichever you choose. These customizations make the directive versatile enough for almost any app.

This time, let’s take a look at using all the optional configurations for the <loader-button> directive.

Controller:

var buttonConfig = {   "label": "Load Something",   "isLoading": false,   "isSuccess": false,   "isFail": false,   "successMsg": "Success!",   "failMsg": "Failed :(" }; 

Markup:

<loader-button cfg="buttonConfig"></loader-button> 

With this configuration, there are four separate states of the button:

1. the default state uses the `label` as the button text
2. the loading state uses the loading indicator as the button text
3. the successful state uses the `successMsg` as the button text
4. the failed state uses the `failMsg` as the button text

The button is also disabled while loading and after it finishes (regardless if it succeeds or fails).

Installing the Module

The module can be added to your project through Bower. Simply install the package using this line in your terminal:

bower install any-loader-ng --save-dev 

Once downloaded, the module requires AngularJS and Font Awesome to work properly, so be sure to have those downloaded and added to your project. To include the module to your project, just add the <bower directory>/any-loader-ng/dist/any-loader-ng.min.js file. We’ve distributed a non-minified version for development as well.

Adding the module to your AngularJS application is the same as any other module dependency:

angular.module(‘myApp’, [‘anyLoader’]); 

Go Load Stuff!

Thanks to Any Loader, there’s one less thing you have to worry about in your next AngularJS project! Check out this demo created to show off all the wonderful ways to use Any Loader.