Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
angular-promise-buttons
Advanced tools
Readme
Chilled Buttons for AngularJS
For Angular 2+ version go 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 the DEMO!
Also you can play with the code on Plnkr.
Bug-reports or feature request as well as any other kind of feedback is highly welcome!
Install it via bower or npm
bower install angular-promise-buttons -S
# or via npm
npm install angular-promise-buttons -S
and add angularPromiseButtons
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 to ng-click
:
<button ng-click="yourServiceCaller()"
promise-btn>Click me to spin!</button>
// inside some controller
$scope.yourServiceCaller = function ()
{
return fakeFactory.method().then(...);
};
For using the promise buttons with ng-submit
you need to apply them to the form directive and add `type="submit" to the buttons you want to show a loader for:
<form ng-submit="yourServiceCaller()"
promise-btn>
<button type="submit">MyBtn</button>
</form>
// inside some controller
$scope.yourServiceCaller = function ()
{
return fakeFactory.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:
<button ng-click="yourServiceCaller($event)"
promise-btn="yourPromise">MyBtn</button>
Now you just have to assign a promise to yourPromise
:
// 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:
There are also some defaults for you to set, if you like. You can do this by using the angularPromiseButtonsProvider
:
angular.module('exampleApp', [
'angularPromiseButtons'
])
.config(function (angularPromiseButtonsProvider)
{
angularPromiseButtonsProvider.extendConfig({
spinnerTpl: '<span class="btn-spinner"></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'
});
});
promise-btn-options
You can also change all the options (but not the spinner template) by specifying the options via promise-btn-options
:
<button class="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 to yourPromise
:
// 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 any issue 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 run grunt serve
for development. Another important factor is the number of developers using and thus testing angular-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 the The GNU Lesser General Public License V2.1.
FAQs
[![npm version](https://badge.fury.io/js/angular-promise-buttons.svg)](https://badge.fury.io/js/angular-promise-buttons) [![Build Status](https://travis-ci.org/johannesjo/angular-promise-buttons.svg)](https://travis-ci.org/johannesjo/angular-promise-butto
The npm package angular-promise-buttons receives a total of 286 weekly downloads. As such, angular-promise-buttons popularity was classified as not popular.
We found that angular-promise-buttons demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.