将模块注入 AngularJS

Question

我正在尝试将 third party 文件上传器注入到我的 Angular 应用程序中。我让它工作正常，但从项目中休息了一下，现在重新审视它，我决定使用 requireJS，并且在尝试注入这个模块时遇到了很糟糕的时间。我确信这只是关于如何获取它的语义实际工作，但我不确定我做错了什么。

文件：main.js

在此处加载上传器并将angular 作为依赖项。

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()

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

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

Answer 1

基本上，您首先需要在 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"]
    }
})

如您所见，我还需要定义一个 shim - 因为 angular-file-upload 已经是 AMD 友好的，并且定义它依赖于 angular。这就是你在这里看到的：

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

但是，由于我认为是一个错误（我在这里描述了 https://github.com/nervgh/angular-file-upload/issues/171），所以 angular-file-upload 脚本在加载时会检查 angular 是否存在 - 但因为 angular 不是全局变量但是，这会失败并出现异常 (Uncaught ReferenceError: angular is not defined angular-file-upload.js:13)，导致库无法将自身作为 requirejs 模块提供。

无论如何，应用 shim 修复后，这暂时不会成为问题。

然后，在我们全部设置之前，在您的 app.js 文件中 - 您需要将 angular-file-upload 设置为模块依赖项，并确保向您的角度应用程序模块注册角度模块 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'
    ]);
});