npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-promise-buttons

v0.1.23

Published

[![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

Downloads

2,311

Readme

npm version Build Status Coverage Status

angular-promise-buttons

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!

getting started

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(...);
};

using it for forms

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(...);
};

alternative syntax and using $event

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();
};

styling the button

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/

configuration

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'
  });
});

change options via 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.

❤ contribute ❤

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.

(possible) promising future features