AngularJS RequireJS loading angular-file-upload

Question

我很难将angular-file-upload模块加载到我的应用程序中。我一直在阅读各种教程，例子，问题等等。你们能帮我弄清楚我在这里做错了什么吗？

我收到以下错误信息：Failed to instantiate module angular-file-upload

这里是我的代码

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']); 
    }); 
    } 
); 

Answer 1

如果你看看在source code为angular-file-upload你可以看到，它没有自己注册为AMD的模块，这意味着我们必须提供一个垫片，它可以确保所有依赖的我们加载angular-file-upload之前加载本身。

主要依赖当然angular的 - 所以我们需要建立一个垫片，以确保angular是angular-file-upload之前加载。在你的情况，我想requirejs配置应该是这个样子：

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"] 
    } 
}) 

那么你应该准备摇滚。

Answer 2

如果这是我用你可能要注入angularFileUpload而不是angular-file-upload相同的库。