Question

我试图将third party文件上传器注入我的Angular App。我让它工作得很好，但是从项目中休息了一段时间并重新审视它我现在决定使用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

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

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

(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 config中定义模块的路径：

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-file-upload已经是AMD友好的并且定义它依赖于角度。这就是你在这里看到的：

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

然而，由于我看到的是一个错误（我在这里描述https://github.com/nervgh/angular-file-upload/issues/171），angular-file-upload脚本会在加载时检查是否存在角度 - 但是因为angular是还不是一个全局变量，因为异常（Uncaught ReferenceError: angular is not defined angular-file-upload.js:13）导致库不能作为requirejs模块使用而失败。

无论如何，在应用了垫片修复的情况下，这暂时不会成为问题。

然后，在我们完成设置之前，在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'
    ]);
});

将模块注入AngularJS

1 个答案: