动态注入模块（仅在需要时）

Question

我将Require.js与Angular.js结合使用。

一些控制器需要巨大的外部依赖关系，而其他控制器则不需要，例如，FirstController需要Angular UI
Codemirror
。这至少是135 kb，至少：

require([
  "angular",
  "angular.ui.codemirror" // requires codemirror itself
], function(angular) {
  angular.module("app", [ ..., "ui.codemirror" ]).controller("FirstController", [ ... ]);
});

我不想每次我的页面加载时都只包含指令和Codemirror lib只是为了使Angular开心。
这就是为什么我现在仅在遇到路线时才加载控制器，就像这里所做的那样。

但是，当我需要类似的东西时

define([
  "app",
  "angular.ui.codemirror"
], function(app) {
  // ui-codemirror directive MUST be available to the view of this controller as of now
  app.lazy.controller("FirstController", [
    "$scope",
    function($scope) {
      // ...
    }
  ]);
});

我如何告诉Angular ui.codemirror在应用程序模块中也插入模块（或任何其他模块）？
我不在乎这是否是一种骇人听闻的方法，除非它涉及修改外部依赖项的代码。

如果有用： 我正在运行Angular 1.2.0。

Answer 1

我一直在尝试将requirejs + Angular混合使用一段时间。到目前为止，我一直在我的努力下在Github中发布了一个小项目（angular-
require-lazy
），因为对于内联代码或小提琴来说，范围太大。该项目演示了以下几点：

• AngularJS模块是延迟加载的。
• 指令也可以延迟加载。
• 有一个“模块”发现和元数据机制（请参阅我的另一个宠物项目：require-lazy）
• 该应用程序自动拆分为捆绑包（即使用r.js进行构建）

怎么做的：

• 提供者（例如$controllerProvider，$compileProvider）由捕获config功能（技术我第一锯在angularjs-requirejs-懒惰控制器）。
• 引导完成后，angular将被我们自己的包装程序代替，该包装程序可以处理延迟加载的模块。
• 注入器被捕获并作为承诺提供。
• AMD模块可以转换为Angular模块。

这个实现满足了您的需求：它可以延迟加载Angular模块（至少是我正在使用的ng-grid），绝对是hackish的:)且不会修改外部库。

评论/意见绝对值得欢迎。

（编辑）此解决方案与其他解决方案的区别在于它不执行动态require()调用，因此可以使用r.js（和我的require-
lazy项目）构建。除此之外，这些想法或多或少地融合在各种解决方案中。

祝你们好运！