Angularjs 如何正确地将角度模块与AMD模块分开？

我对在一个非常大的AngularJS SPA中实现requireJS（和r.js优化器）的正确方法感到困惑。我想要一些关于如何组织项目的建议，这样我就可以从AMD模块化中获益，但不要过于复杂（将角度模块包装在里面需要js

define

d模块，这些模块都被转储到一个优化的.js文件中…）

我处理的文件有几个不同的类别：

我有一组供应商库（jquery、angular、angular resource、require、lodash等）

我有一些容器级AMD模块（身份验证、分析等）

我有很多角度模块、服务、过滤器等

使用r.js将所有供应商的东西浓缩并缩小似乎是一件很简单的事情，但是当我开始添加所有其他代码时，我觉得我的项目变得一团糟。例如，我有一个身份验证服务、一对控制器和我的供应商依赖项（jquery…）。因此，我需要查看的

main.js

大致如下：

require.config({
  paths: {
    // load vendor libraries
    'domReady':      '../vendor/requirejs-domready/domReady',
    'angular':       '../vendor/angular/angular',
    'jquery':        '../vendor/jquery/jquery.min',
    requireLib:      '../vendor/requirejs/require'
     ... lots of these

    //load app code
    'app':           '../app/app',
    'AuthCtrl':      '../app/modules/auth/AuthCtrl',
    'UserCtrl':      '../app/modules/auth/UserCtrl',
    'SettingsCtrl':  '../app/modules/auth/SettingsCtrl',
    // potentially dozens and dozens of these...

    //load auth library
    'auth':          '../app/modules/common/auth',
    'analytics'      '../analytics'

  },
  include: ['domReady', 'requireLib'],

  shim: {
    'angular': {
      exports: 'angular'
    }
  }
...
});

目前，我已经将上面3个“类别”中的所有代码转储到一个大的丑陋js文件中

我不满意的是，我觉得我的控制器开始需要一份详细的模块依赖项列表：

require('app',[
  'angular',
  'jquery',
  'AuthCtrl',
  'UserCtrl',
  'SettingsCtrl',
  ' ... potentially dozens? '
  ...
], function (angular, $, Auth, user, settings, ...potentially dozens?) {
  'use strict';

  return angular.module('ngAD', ['AuthCtrl', 'UserCtrl', 'SettingsCtrl' ...]);
});

我想我的问题有两个：

将我所有的角度模块、控制器、过滤器等保留在自己的AMD模块中并通过requirejs手动包含有什么好处？它们都已经在内存中（已经通过r.js加载到大文件堆中）。有没有一个更聪明的方法来处理所有这些谨慎的角度模块时，将有吨他们？我是否应该将它们全部合并到它们自己的模块中，该模块可以是单个可注入依赖项

我被我的“AMD模块”和“角度模块”搞混了。我所有的角度组件（控制器、指令等）都需要在自己的AMD模块中吗？我觉得我是在一个模块（要求的AMD格式）内包装一个模块（角度）

---

应该没有必要做所有这些

我以此为出发点

然后，所需要的就是将控制器和服务添加到AMD文件末尾的require部分。e、 g

require(
    [
    // Dependencies from lib
            'angular', 
            'ngRoute',
            '../lib/less.min.1.5.0',  
    // Angular directives/controllers/services
            'app',
            'core/viewHomeController',
            'core/commonRoutes',
            'core/header',
            'events/events-ctrl
    ], 
    function (angular) {
            var AppRoot = angular.element(document.getElementById('ng-app'));
            AppRoot.attr('ng-controller','AppCtrl');
            angular.bootstrap(document, ['TheApp']);
    });

events-ctrl.js作为已添加的新控制器/服务，将以相同的方式添加更多控制器/服务

然后控制器/服务需要包装在require代码中，例如，这是events-ctrl.js的开始

define(['app'], function (app) {

  app.factory('EventService', function($resource) {
    return $resource('/api/events/:id');
  });

  app.controller('EventListCtrl', ['$scope', '$modal', 'EventService', function($scope, $modal, EventService) {
    console.log('EventListCtrl working');
    ...

---

我对这个问题没有正确的答案，只是一直在努力解决它。另请参阅另一篇文章（并查看参考资料中的文章）。我试图解决的确切问题是在r.js中使用Angular+Require+lazy加载。我的项目是一个小（但不是琐碎的）应用程序，你可以（也可以不：）通过浏览代码找到有用的东西。欢迎评论。@NikosParaskevopoulos谢谢你Nikos，我会的-我感谢你的推荐！这太棒了，谢谢你花时间帮忙。这就是我需要的。