@df-legacy/angular-ladda-3.11

    0.3.11 • Public • Published

    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
    

    Install

    npm i @df-legacy/angular-ladda-3.11

    DownloadsWeekly Downloads

    20

    Version

    0.3.11

    License

    MIT

    Unpacked Size

    21.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • di9