Skip to content

Angular directives to display loading of an indicate after pressing a button or a form based on promises

License

Notifications You must be signed in to change notification settings

helloilya/angular-promise-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular promise loader

Angular directives to display loading of an indicate after pressing a button or a form based on promises.

Demo

Example loader is located here.

Usage

Install via bower:

$ bower install angular-promise-loader --save

or via npm:

$ npm install angular-promise-loader --save

or download the files from the dist folder into your repo.

Add dist/loader.min.js and dist/loader.min.css to your index.html. Then add angularPromiseLoader as a module dependency to your angular module.

angular.module('myApp', ['angularPromiseLoader']);

Create a new tag element, for example button, and add ng-element-loader attribute to element. Specify the promise function as an option.

<button type="button" class="apl-button" ng-element-loader="promiseFunction()">Button</button>

If you have a form, add ng-form-loader attribute to submit button. After submitting, all ng-model elements of the form will be disabled until the promise response is received.

<form name="loaderForm">
	<input type="text" ng-model="input">
	<button type="submit" class="apl-button" ng-form-loader="promiseFunction()">Submit</button>
</form>

The module adds classes to an element for each state:

  • apl-progress while you are waiting for a promise response;
  • apl-success if response was a resolve;
  • apl-error if response was a reject.

The dist/loader.min.css file includes the default styles for states. You can use them with every front-end framework. Just add apl-button class to a button element.

Development

Install gulp via npm.

npm install -g gulp

Then you can use the following commands for development:

  • gulp watch run a watcher for the src and demo folders;
  • gulp build build the project in dist folder.

Release History

  • 1.0.2 — Added npm support.
  • 1.0.1 — Updated texts.
  • 1.0.0 — Added bower support.
  • 0.1.1 — Added form loader example in the demo.
  • 0.1.0 — Initial release.

License

MIT © Ilya Fedotov

About

Angular directives to display loading of an indicate after pressing a button or a form based on promises

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published