angular-ladda

WebJar for angular-ladda

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-ladda
Last Version

Last Version

0.3.4
Release Date

Release Date

Type

Type

jar
Description

Description

angular-ladda
WebJar for angular-ladda
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/remotty/angular-ladda

Download angular-ladda

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-ladda/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-ladda</artifactId>
    <version>0.3.4</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ladda/
implementation 'org.webjars.bower:angular-ladda:0.3.4'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ladda/
implementation ("org.webjars.bower:angular-ladda:0.3.4")
'org.webjars.bower:angular-ladda:jar:0.3.4'
<dependency org="org.webjars.bower" name="angular-ladda" rev="0.3.4">
  <artifact name="angular-ladda" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-ladda', version='0.3.4')
)
libraryDependencies += "org.webjars.bower" % "angular-ladda" % "0.3.4"
[org.webjars.bower/angular-ladda "0.3.4"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.2.0,2)
org.webjars.bower : ladda jar [0.9.8,0.10)

Project Modules

There are no modules declared in this project.

angular-ladda

License Bower NPM Build Status

An angular directive wrapper for Ladda.

Check out the demo page.

Getting started

(1) Get angular-ladda via Bower

$ bower install angular-ladda

or add bower.json

$ bower install angular-ladda --save

(2) add css & javascript link to html

...
<link rel="stylesheet" href="bower_components/ladda/dist/ladda-themeless.min.css">
...
<script src="bower_components/ladda/dist/spin.min.js"></script>
<script src="bower_components/ladda/dist/ladda.min.js"></script>
<script src="bower_components/angular-ladda/dist/angular-ladda.min.js"></script>
...

*!!!Order of .js includes is very important!!!

(3) add 'angular-ladda' to your main module's list of dependencies

var myApp = angular.module('myApp', ['angular-ladda']);

(4) enjoy!

Quick example

options

use laddaProvider

  • style
    • expand-left
    • expand-right
    • expand-up
    • expand-down
    • zoom-in
    • zoom-out
    • slide-left
    • slide-right
    • slide-up
    • slide-down
    • contract
angular.module(xxxx)
  .config(function (laddaProvider) {
    laddaProvider.setOption({ /* optional */
      style: 'expand-left',
      spinnerSize: 35,
      spinnerColor: '#ffffff'
    });
  })

controller

  $scope.login = function() {
    // start loading
    $scope.loginLoading = true;
    loginService.login(function() {
      // stop loading
      $scope.loginLoading = false;
    });
  }

view

basic

<button ladda="loginLoading" ng-click="login()">
  Login
</button>

change style of effect

<button ladda="loginLoading" ng-click="login()" data-style="expand-left">
  Login
</button>

change size of spinner

<button ladda="loginLoading" ng-click="login()" data-spinner-size="10">
  Login
</button>

change color of spinner

<button ladda="loginLoading" ng-click="login()" data-spinner-color="#FF0000">
  Login
</button>

Browserify support

angular-ladda doesn't work properly with browserify, since it references the Spinner and Ladda libraries, which are not proper AMD modules (and are also not always used as such in angular-ladda's code). In order to make it works with browserify you will need to use browserify-shim.

$ npm install --save browserify-shim

in your package.json, add the following object:

"dependencies": {
    ...
},
"browserify-shim": {
    "ladda": "global:Ladda",
    "spin.js": "global:Spinner"
}

require Spinner, Ladda and angular-ladda wherever you usually require external modules (the ordering here is important):

window.Spinner = require('/components/ladda/js/spin');
window.Ladda = require('/components/ladda/js/ladda');
require('/components/angular-ladda/dist/angular-ladda');

Using ladda-themeless.min.css

overrides in your bower.json (Thanks @benjamincharity)

{
  "name": "client",
  "version": "0.0.0",
  "dependencies": {
    "ladda": "~0.9.8"
  },
  "overrides": {
      "ladda": {
          "main": [
              "dist/ladda-themeless.min.css"
          ]
      }
  }
}

Links

Contributing

  1. Fork it ( https://github.com/remotty/angular-ladda/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request

setup

$ bower install
$ npm install
$ node_modules/protractor/bin/webdriver-manager update

test

$ gulp test

build

$ gulp
org.webjars.bower

remotty

Versions

Version
0.3.4
0.3.1
0.2.2