GitHub - cgross/angular-busy: Show busy/loading indicators on any element during $http requests (or any promise). (original) (raw)

angular-busy Build Status

Show busy/loading indicators on any httporhttp or httporresource request, or on any promise.

Demo

Live Demo

Getting Started

Install with Bower, npm, yarn, or download the files directly from the dist folder in the repo.

bower install angular-busy --save npm install @cgross/angular-busy

Add dist/angular-busy.js and dist/angular-busy.css to your index.html.

Add cgBusy as a module dependency for your module.

angular.module('your_app', ['cgBusy']);

Add your promise to $scope and reference that in the cg-busy directive:

function MyCtrl($scope,$http,User) {

//using $http scope.myPromise=scope.myPromise = scope.myPromise=http.get('...');

//if you have a User class based on $resource scope.myPromise=User.scope.myPromise = User.scope.myPromise=User.save();

}

Options

The cg-busy directive expects either a promise or a configuration object.

In other words. You may do this:

or this:

Providing Custom Templates

The angular-busy indicator is a regular Angular template. The templates have access to the scope where cg-busy was declared so you may reference your local scope variables in your custom templates. Additionally, the scope is augmented with a $message field containing the indicator message text.

Overriding Defaults

The defaut values for message, backdrop, templateUrl, delay, and minDuration may all be overriden by overriding the $injector value for cgBusyDefaults, like so:

angular.module('your_app').value('cgBusyDefaults',{ message:'Loading Stuff', backdrop: false, templateUrl: 'my_custom_template.html', delay: 300, minDuration: 700, wrapperClass: 'my-class my-class2' });

Only the values you'd like overriden need to be specified.

Release History