I am having a hard time with loading the angular-file-upload module to my application. I've been reading all sort of tutorial, example, questionc, etc. Can you guys help me figuring out what I am doing wrong here?
I get the following error message : Failed to instantiate module angular-file-upload
Here is my code
mymodule/module.js
define(['angular', 'angular.file.upload'], function (angular) {
'use strict';
return angular.module('app.mymodule', ['angularFileUpload']);
});
mymodule/index.js
define([
'./routes',
'./models/index',
'./controllers/index',
'./directives/index'
], function () {});
app.js
define([
'angular',
'angular.resource',
'angular.ui.bootstrap',
'angular.ui.router',
'./relation/index',
'./controllers/index',
'./directives/index',
'config'
], function (angular) {
'use strict';
return angular.module('app', [
'ngResource',
'ui.bootstrap',
'ui.router',
'app.relation',
'app.controllers',
'app.directives',
'app.constants'
]);
});
main.js
require.config({
paths: {
'angular': '../lib/angular/angular',
'angular.route': '../lib/angular-route/angular-route',
'angular.resource': '../lib/angular-resource/angular-resource',
'angular.ui.bootstrap': '../lib/angular-bootstrap/ui-bootstrap-tpls',
'angular.ui.router': '../lib/angular-ui-router/angular-ui-router',
'angular.file.upload': '../lib/angular-file-upload/angular-file-upload',
...
},
shim: {
'angular': {'exports': 'angular'},
'angular.resource': ['angular'],
'angular.ui.bootstrap': ['angular'],
'angular.ui.router': ['angular'],
'sails.io' : ['socket.io']
}
});
require([
'angular',
'app',
'config',
'routes'
], function(angular) {
'use strict';
angular.element().ready(function() {
angular.bootstrap(document, ['app']);
});
}
);
If you take a look at the source code for angular-file-upload
you can see that it does not register itself as an AMD module, meaning that we have to provide a shim that makes sure that all of its dependencies are loaded before we load angular-file-upload
itself.
The main dependency is of course angular
- so we need to setup a shim to make sure that angular
is loaded before angular-file-upload
. In your case, I guess the requirejs config should look something like this:
require.config({
paths: {
"angular" : "relative/path/to/angular",
"angular.file.upload" : "relative/path/to/angular-file-upload",
... other modules
},
shim: {
"angular": {
exports: "angular"
},
"angular.file.upload": ["angular"]
}
})
Then you should be ready to rock.
如果它是我使用的相同库你可能想要注入angularFileUpload
而不是angular-file-upload
。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.