Repository files navigation

Chilled Buttons for AngularJS

For Angular 2+ versiongo here.

There are cool loading buttons out there for angular. Only thing which annoys me, is that you (most of the times) have to manually trigger their loading state via a boolean which leads to a bit of repetition, declaring those again and again.angular-promise-buttons exists to take away some of that, by handling the loading state directly by passing the promise. Saves you at least two lines of code every time. Check out theDEMO!

Also you can play with the code onPlnkr.

Bug-reports or feature request as well as any other kind offeedback is highly welcome!

Install it via bower or npm

bower install angular-promise-buttons -S# or via npmnpm install angular-promise-buttons -S

and addangularPromiseButtons as dependency in your main module:

angular.module('yourApp',[  'angularPromiseButtons']);

Using the buttons is easy. Just return the promise in question in your service caller and you're good to go:You can also directly return the promise via the function passed tong-click:

<buttonng-click="yourServiceCaller()"promise-btn>Click me to spin!</button>

// inside some controller$scope.yourServiceCaller=function(){returnfakeFactory.method().then(...);};

For using the promise buttons withng-submit you need to apply them to the form directive and add `type="submit" to the buttons you want to show a loader for:

<formng-submit="yourServiceCaller()"promise-btn><buttontype="submit">MyBtn</button></form>

// inside some controller$scope.yourServiceCaller=function(){returnfakeFactory.method().then(...);};

There is also an alternative syntax, which allows you to share promises between buttons (and possibly other directives) and is especially useful, if you want to use the$event somehow:

<buttonng-click="yourServiceCaller($event)"promise-btn="yourPromise">MyBtn</button>

Now you just have to assign a promise toyourPromise:

// inside some controller$scope.yourServiceCaller=function(){$scope.yourPromise=fakeFactory.method().then(...);// this is now also possible$event.preventDefault();};

The base-styles might not be overwhelmingly sexy, but it is easy to fix that! There are lots of free css-spinners out there. Just find one of your liking and add the css.

Ressources:

• http://cssload.net/
• http://projects.lukehaas.me/css-loaders/
• http://tobiasahlin.com/spinkit/

There are also some defaults for you to set, if you like. You can do this by using theangularPromiseButtonsProvider:

angular.module('exampleApp',['angularPromiseButtons']).config(function(angularPromiseButtonsProvider){angularPromiseButtonsProvider.extendConfig({spinnerTpl:'<span></span>',disableBtn:true,btnLoadingClass:'is-loading',addClassToCurrentBtnOnly:false,disableCurrentBtnOnly:false,minDuration:false,CLICK_EVENT:'click',CLICK_ATTR:'ngClick',SUBMIT_EVENT:'submit',SUBMIT_ATTR:'ngSubmit',BTN_SELECTOR:'button'});});

You can also change all the options (but not the spinner template) by specifying the options viapromise-btn-options:

<buttonclass="btn"ng-click="yourServiceCaller()"promise-btn-options="options"promise-btn="yourPromise">MyBtn<span>Look I'm nested content</span></button>

Now you just have to assign a promise toyourPromise:

// inside some controller$scope.options={disableBtn:false,btnLoadingClass:'is-spinning'};$scope.yourServiceCaller=function(){$scope.yourPromise=fakeFactory.method().then(...);};

Thats all the logic there is (for now). Adjusting the look and feel of the spinner can be done using your own styles.

I'm happy for anyissue or feature request, you might encounter or want to have. Even a one liner is better, than no feedback at all. Pull requests are also highly welcome. Just fork the repository, clone it and rungrunt serve for development. Another important factor is the number of developers using and thus testingangular-promise-buttons. Tell your fellow programmers,say that you use it on ng-modules, tweet or even blog about it.

angular-promise-buttons is published under theThe GNU Lesser General Public License V2.1.

• your feature request!