CODEWITHSUNDEEP
javascriptangularjsrequirejsamd
Shan Robertson
Shan Robertson

Reputation: 2742

Injecting modules into AngularJS

I'm trying to inject a third party file uploader into my Angular App. I had it working fine but took a break from the project and revisiting it now I've decided to use requireJS, and am having a terrible time trying to inject this module in. I'm sure it's just semantics as to how to get it to actually work but I'm not exactly sure what I am doing wrong.

File: main.js

Loading the uploader here and giving angular as the dependancy.

require.config({
paths: {
    angular: '../bower_components/angular/angular.min',
    angularRoute: '../bower_components/angular-route/angular-route.min',
    angularFileUpload: 'modules/file-upload/angular-file-upload',
    jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
    fastclick: '//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.0/fastclick.min'
},
shim: {
    'angular' : {'exports' : 'angular'},
    'angularRoute': ['angular'],
    'angularFileUpload': ['angular'],
    'jquery': {
        exports: '$'
    }
},
priority: [
    "angular"
]
});

// http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = "NG_DEFER_BOOTSTRAP!";

require( [
'angular',
'routes',
'jquery',
'fastclick',
'app'
], function(angular, app) {
'use strict';

     // Some config stuff here

});

File: app.js

This is where all of the angular modules are loaded into the app, This is mainly where I have been trying to inject the file uploader, in a similar fashion.

define([
'angular',
'filters',
'services',
'directives',
'controllers',
'angularRoute'
], function (angular, filters, services, directives, controllers) {
    'use strict';

    // Declare app level module which depends on filters, and services
    return angular.module('myApp', [
        'ngRoute',
        'myApp.controllers',
        'myApp.filters',
        'myApp.services',
        'myApp.directives'
    ]);

});

File: angular-file-upload.js

The module, It looks like it's all setup to fit in with the AMD structure.. here is the top part of the file, the rest of the file is directives and factories like angularFileUpload.directive()

(function(angular, factory) {
if (typeof define === 'function' && define.amd) {
    define('angular-file-upload', ['angular'], function(angular) {
        return factory(angular);
    });
} else {
    return factory(angular);
}
}(angular || null, function(angular) {
/**
 * The angular file upload module
 * @author: nerv
 * @version: 0.2.9.6, 2013-12-06
*/
var angularFileUpload = angular.module('angularFileUpload', []);

If anybody could provide any information on how this could be injected I would greatly appreciate it!

Upvotes: 3

Views: 2163

Answers (1)

Lasse Christiansen
Lasse Christiansen

Reputation: 10325

Basically, you first need to define the path to the module in your requirejs config:

require.config({
    paths: {
        "angular"             : "relative/path/to/angular",
        "angular-file-upload" : "relative/path/to/angular-file-upload",
        ... other modules
    },
    shim: {
        "angular": {
            exports: "angular"
        },
        // Currently needed (see explanation below)
        "angular-file-upload": ["angular"]
    }
})

As you can see, I needed to define a shim as well - which should not have been needed since angular-file-upload already is AMD friendly and defines that it relies on angular. That is what you see here:

define('angular-file-upload', ['angular'], function(angular) {
    return factory(angular);
});

However, due to what I see as a bug (and which I have described here https://github.com/nervgh/angular-file-upload/issues/171) the angular-file-upload script checks for the existence of angular when loaded - but since angular is not a global variable yet, that fails with an exception (Uncaught ReferenceError: angular is not defined angular-file-upload.js:13) causing the library not to make itself available as a requirejs module.

Anyway, with the shim fix applied, that would not be an issue for now.

Then, before we are all set, in your app.js file - you need to set angular-file-upload as a module dependency and make sure to register the angular module angularFileUpload with you angular app module - and then you should be ready to rock. So something like this should work:

define([
'angular',
'filters',
'services',
'directives',
'controllers',
'angularRoute',
'angular-file-upload'
], function (angular, filters, services, directives, controllers) {
    'use strict';

    // Declare app level module which depends on filters, and services
    return angular.module('myApp', [
        'ngRoute',
        'myApp.controllers',
        'myApp.filters',
        'myApp.services',
        'myApp.directives',
        'angularFileUpload'
    ]);
});

Upvotes: 1

Related Questions