angularjsbrowserifybrowserify-shim

Angular-Ladda not working properly with browserify-shim / browserify


I have installed angular-ladda using browserify-shim / browserify, but am unable to get the buttons to work properly. When I click on the button, the spinner is outside of the button, not matter which data-style I use.

You can find the instructions to browserify install here, but they did not work as I hoped. I ended using the information on this issue on GitHub to help me out, but I'm not sure that I did it correctly.

My app dependencies look like this:

require('angular').module('admin', [
  require('Spinner'),
  require('Ladda'),
  require('angular-ladda')
])

My package.json file dependencies look like this:

"dependencies": {
    "aliasify": "^2.0.0",
    "angular": "^1.5.7",
    "angular-bootstrap-show-errors": "^2.3.0",
    "angular-breadcrumb": "^0.4.1",
    "angular-cookies": "^1.5.7",
    "angular-ladda": "^0.4.2",
    "angular-ui-router": "^0.3.1"
}

  "browser": {
    "angular": "./node_modules/angular/angular.js",
    "angular-breadcrumb": "./node_modules/angular-breadcrumb/release/angular-breadcrumb.js",
    "spin.js": "./node_modules/angular-ladda/node_modules/js/spin.js" 
  }
"browserify-shim": {
    "angular": {
      "exports": "angular"
    },
    "angular-ladda": {
      "depends": [
        "ladda"
      ]
    }, 
    "ladda": {
      "exports": "Ladda",
      "depends": [
        "spin.js"
      ]
    },
    "spin.js": {
      "exports": "Spinner"
    }
 }

This is a gif of what the final result looks like: http://recordit.co/g2CmpETMC5.gif


Solution

  • What I did not realize is that with browserify-shim, you still have to link the style sheet. In my case, I had to compile the css file into a less file using:

    @import (less) "/node_modules/angular-ladda/node_modules/ladda/dist/ladda-themeless.min.css";