AngularJS RequireJS加載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

如果您查看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 。