Requirejs dependency not working

Question

I am trying to use angular-ladda directive in my app. Here is my main.js which is the requirejs manifesto file:

requirejs.config({

    paths: {
        underscore: 'lib/underscore/underscore',
        angular: 'lib/angular/angular',
        jquery: 'lib/jquery/dist/jquery.min',
        'angular-route': 'lib/angular-route/angular-route',
        'controllers': 'js/controllers',
        'services': 'js/services',
        'providers': 'js/providers',
        'filters': 'js/filters',
        'directives': 'js/directives',
        'app': 'js/app',
        'spin': 'lib/ladda/dist/spin.min',
        'ladda': 'lib/ladda/js/ladda', 
        'ngLadda': 'lib/angular-ladda/src/angular-ladda'

    },

    shim: {
        underscore: {
            exports: '_'
        },
        'angular': {
            exports: 'angular'
        },
        'states': {
            deps: ['angular'],
            exports: 'states'
        },
        'angular-route': {
            deps: ['angular']
        },
        'ladda': {
            deps: ['spin'],
            exports: 'Ladda'
        },
        'ngLadda': {
            deps: ['ladda']
        }
    },
    priority: [
        'angular'
    ]
});

requirejs(['angular',
            'app',
            'underscore',
            'js/routes',
            'jquery',
            'services/services',
            'providers/providers',
            'directives/directives',
            'filters/filters',
            'controllers/controllers',
            'ngLadda'

           ], function (angular, app, _) {
               angular.element(document).ready(function () {
                   angular.bootstrap(document, ['App']);
                   document.getElementsByTagName('html')[0].dataset.ngApp = 'App';
               });

           });

Here is the ladda directive:

/**!
 * AngularJS Ladda directive
 * @author Chungsub Kim <subicura@subicura.com>
 */

/* global Ladda */
(function () {
  'use strict';

  angular.module('angular-ladda', []).directive(
    'ladda',
    [
      '$compile',
      function ($compile) {
        return {
          restrict: 'A',
          link: function (scope, element, attrs) {
            element.addClass('ladda-button');
            if(angular.isUndefined(element.attr('data-style'))) {
              element.attr('data-style', 'zoom-in');
            }


            var ladda = Ladda.create( element[0] ); //here is were Ladda is not defined
            $compile(angular.element(element.children()[0]).contents())(scope);

            scope.$watch(attrs.ladda, function(loading) {
              if(loading || angular.isNumber(loading)) {
                if(!ladda.isLoading()) {
                  ladda.start();
                }
                if(angular.isNumber(loading)) {
                  ladda.setProgress(loading);
                }
              } else {
                ladda.stop();
              }
            });
          }
        };
      }
    ]
  );
})();

In the directive code (line 22, where commented) there is an erroe "Ladda is not defined".
If I will add the following line:

var Ladda = require('ladda');

It all will work, so why the dependency in the main.js not doing this already?

Can you please help me with this one?

Answer 1

I think for the dependency to work, you'd have to define ngLadda declaration as a module

define(function (require) {
    // your ngLadda declaration here
}

Edit: there is another possibility When you look at code of Ladda: https://github.com/hakimel/Ladda/blob/master/js/ladda.js

You see that Ladda is being wrapped in define(){}

    // AMD module
    else if( typeof define === 'function' && define.amd ) {
        define( [ 'spin' ], factory );
    }

In requireJS docs it's stated that:

Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.

http://requirejs.org/docs/api.html#config-shim

So, Ladda is an AMD module with deps already defined. In your main.js put it outside of shim:

'ladda': {
     exports: 'Ladda'
 },
'ngLadda': {
     deps: ['ladda']
 }
 shim: {
    //your other shimmed modules
 }

Put your ngLadda in define(function(require){}) like it's said in original answer, but don't put any dependencies inside.