angular-ladda

!License
!Bower 

An angular directive wrapper for Ladda.

Check out the demo page.

Getting started

(1) Get angular-ladda via Bower

``sh
$ bower install angular-ladda
`
or add bower.json
`sh
$ bower install angular-ladda --save
`

(2) add css & javascript link to html

`html
...

...



...
`

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


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

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

(4) enjoy!

Quick example

$3

use laddaProvider

- style
- expand-left
- expand-right
- expand-up
- expand-down
- zoom-in
- zoom-out
- slide-left
- slide-right
- slide-up
- slide-down
- contract

`js
angular.module(xxxx)
.config(function (laddaProvider) {
laddaProvider.setOption({ / optional /
style: 'expand-left',
spinnerSize: 35,
spinnerColor: '#ffffff'
});
})
`

$3

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

$3

basic

`html

Login

`

change style of effect

`html

Login

`

change size of spinner

`html

Login

`

change color of spinner

`html

Login

`

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.

`sh
$ npm install --save browserify-shim
`

in your package.json, add the following object:

`js
"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):

`javascript
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

* Ladda

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

$3

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

$3

`
$ gulp test
`

$3

`
$ gulp
``