Question

我有一个使用RequireJS和AngularJS的相当大的项目。一切正常，但看着我的代码与模块定义有点混乱。例如，这里是'main'应用程序文件：

define(['angular',
        'jquery',
        'ui-router',
        'angular-restmod',
        'angular-cookies',
        'angular-animate',
        'angular-sanitize',
        'angular-touch',
        'angular-moment',
        'angular-ui-select2',
        'bower_components/jquery-ui/ui/resizable',
        'bower_components/jquery-ui/ui/draggable',
        'bower_components/jquery-ui/ui/sortable',
        'bower_components/jquery-ui/ui/droppable',
        'angularui',
        'angular-hotkeys',
        'splitter',
        'angular-loading-bar',
        'common/components/chart/chart',
        'common/utils/confirmLeave',
        'common/utils/listener',
        'common/components/toolbar/toolbar',
        'common/components/anchor/anchor',
        'common/utils/print',
        'common/components/notifications/notifications',
        'angular-shims-placeholder'], function (angular, $) {

    var app = angular.module('myapp', ['restmod', 'ngCookies', 'ui.router', 'oc.lazyLoad', 'ngAnimate', 'ngSanitize', 'angularMoment', 
        'ui.bootstrap', ui.select2', 'utils.listener', 'ng.shims.placeholder', 'interceptors.exceptions', 'interceptors.security', 'cfp.hotkeys', 'utils.offline', 'components.notifications', 'angular-loading-bar']);

    return module;

});

如果您注意到我同时定义了amd模块和角度模块两次。它看起来很讨厌（即使它确实很好）。

我的问题是，是否有人为此找到了更好的方法？我见过这个ngDefine项目，但我对此有所保留。

Answer 1

我最后编写了自己的小工具来处理这个...

define(['angular'], function(angular){
    angular.defineModule = function dm(name, modules){
       var pargs = dm.caller.arguments;

       var filtered = Array.slice(pargs)
            .filter(function (m) { return m && m.name; })
            .map(function (mm) { return mm.name; });

       modules && (filtered = filtered.concat(modules));

       return angular.module(name, filtered);
   };
});

然后你就可以使用它：

define(['angular',
        'core',
        'common/services/users',
        'common/services/account',
        'common/components/toolbar/toolbar',
        'common/components/multi-select/multi-select',
        './change-avatar',
        './change-password',
        'less!app/admin/users/detail/detail'], function (angular) {

    var module = angular.defineModule('admin.users.detail');   

    // fun code here //

    return module;

});

需要注意的是，所有需要的模块都必须在最后返回角度模块。如果他们不这样做，那么我创建了一个“垫片”技术，您可以手动传递它，如：

var module = angular.defineModule('admin.roles.settings', ['textAngular']);

有兴趣获得其他人的反馈......

Answer 2

您没有两次加载模块;您正在加载模块一次，以便在声明应用程序模块的依赖项时找到它。作为AMD模块，你第一次在物理上加载时依赖于它们，而作为AngularJS模块，你依赖它们，但只有当它们已经可见时才能使用它们。

我们采取的做法是删除一些样板代码，它有一个通用的core.js AMD模块，可以加载我们总是需要的所有库（jquery，plugins，angular等）。然后我们的主应用程序文件将依赖于核心模块。

你可以通过定义一个AngularJS＆＃39;核心来进一步做到这一点。模块也是。那么你所需要的只是：

define(['core'], function (angular, $) {
    return angular.module('myapp', ['core']);
});

您将其移出，但也使其可以在RequireJS和AngularJS的多个模块上重复使用。

关于ngDefine，它似乎是语法糖。考虑将AngularJS与RequireJS混合已经提供了必要的学习曲线，在不获得显着优势的同时疏远语法似乎是一个可以跳过的选择。问问自己：＆＃34; 我们目前的做法很难看，但我这么做了吗？这是一个真正的问题值得另一个库和定义角度应用程序的新方法吗？＆＃34;。可能不是！

AngularJS + RequireJS模块定义

2 个答案: