https://github.com/helloilya/angular-promise-loader

Angular directives to display loading of an indicate after pressing a button or a form based on promises
https://github.com/helloilya/angular-promise-loader

angular button form loader promise

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/helloilya/angular-promise-loader
• Owner: helloilya
• License: mit
• Created: 2015-05-31T07:45:24.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-07-19T07:57:27.000Z (over 9 years ago)
• Last Synced: 2024-05-03T00:18:25.286Z (8 months ago)
• Topics: angular, button, form, loader, promise
• Language: JavaScript
• Homepage:
• Size: 145 KB
• Stars: 20
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](http://fedotov.work/angular-promise-loader/).

### 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.

```js

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. 

```html

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.

```html

	

	Submit

```

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.

```bash

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](http://fedotov.me)