Javascript 将模块注入AngularJS

我正在尝试将一个文件上传程序注入我的Angular应用程序。我让它工作得很好，但是我从项目中休息了一下，重新访问了它。现在我决定使用requireJS，并且我在尝试注入这个模块时经历了一段糟糕的时光。我确信这只是语义学，关于如何让它真正工作，但我不确定我做错了什么

文件：main.js

在此处加载上载程序，并将

角度

作为依赖项

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

});

文件：app.js

这是所有angular模块加载到应用程序中的地方，这主要是我尝试以类似方式注入文件上传程序的地方

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

});

文件：angular-File-upload.js

该模块，看起来它的所有设置，以适应AMD的结构。。这是文件的顶部，其余部分是指令和工厂，如

angularFileUpload.directive（）

---

如果有人能提供任何关于如何注射的信息，我将不胜感激

基本上，首先需要在requirejs配置中定义模块的路径：

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

正如你们所看到的，我还需要定义一个垫片——这本不需要，因为angular文件上传已经是AMD友好的，并且定义了它依赖于angular。这就是你在这里看到的：

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

然而，由于我认为是一个bug（我在这里已经描述过），angular file upload脚本在加载时会检查angular是否存在，但是由于

angular

还不是一个全局变量，因此会出现异常（

Uncaught ReferenceError:angular未定义angular file upload.js:13

）导致库不能作为requirejs模块使用

无论如何，应用垫片修复后，现在这不是问题

然后，在我们都设置好之前，在你的

app.js

文件中-你需要将

angular file upload

设置为模块依赖项，并确保向angular app模块注册angular模块

angularFileUpload

，然后你应该准备好摇滚了。因此，类似这样的方法应该有效：

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

---

非常感谢您的详细解释。这对理解这一点很有帮助！我得把这个项目的灰尘吹掉，让它工作起来@ShanRobertson很高兴我能帮忙；）当我开始使用requirejs时，我发现他们的文档在一开始就非常强大（有很多文本）——但实际上，花时间阅读主要部分对我理解正在发生的事情有很大帮助。顺便说一句-如果你认为我的答案解决了你的问题，请将其标记为已接受；）

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