动态注入模块，仅在需要时 [英] Inject module dynamically, only if required

问题描述

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

I'm using Require.js in combination with Angular.js.

有些控制器需要大量的外部依赖，而其他控制器则不需要，例如，FirstController 需要 Angular UI Codemirror.这是一个额外的 135 kb，至少:

Some controllers need huge external dependencies which others don't need, for example, FirstController requires Angular UI Codemirror. That's a extra 135 kb, at least:

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

我不想在每次我的页面加载时都包含指令和 Codemirror 库只是为了让 Angular 开心.
这就是为什么我现在只在路由被命中时加载控制器，like这里做了什么.

I don't want to have to include the directive and the Codemirror lib everytime my page loads just to make Angular happy.
That's why I'm right now loading the controller only when the route is hit, like what's done here.

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

However, when I need something like

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 模块(或任何其他模块)?
我不在乎这是否是一种骇人听闻的方式来实现这一点，除非它涉及修改外部依赖项的代码.

How can I tell Angular to inject ui.codemirror module (or any other module) in the app module aswell?
I don't care if it's a hackish way to accomplish this, unless it involves modifying the code of external dependencies.

如果有用:我正在运行 Angular 1.2.0.

If it's useful: I'm running Angular 1.2.0.

推荐答案

我已经尝试混合使用 requirejs+Angular 有一段时间了.到目前为止，我努力在 Github (angular-require-lazy) 上发布了一个小项目，因为范围是对于内联代码或小提琴来说太大了.该项目展示了以下几点:

I have been trying to mix requirejs+Angular for some time now. I published a little project in Github (angular-require-lazy) with my effort so far, since the scope is too large for inline code or fiddles. The project demonstrates the following points:

• AngularJS 模块是延迟加载的.
• 指令也可以延迟加载.
• 有一个模块"发现和元数据机制(参见我的另一个宠物项目:require-lazy)立>
• 应用程序被自动拆分成多个包(即使用 r.js 构建工作)

它是如何完成的:

• 提供程序(例如 $controllerProvider、$compileProvider)是从 config 函数(我第一次在 angularjs-requirejs-lazy-controllers).
• 引导后，angular 被我们自己的包装器取代，该包装器可以处理延迟加载的模块.
• 注入器被捕获并作为承诺提供.
• AMD 模块可以转换为 Angular 模块.

• The providers (e.g. $controllerProvider, $compileProvider) are captured from a config function (technique I first saw in angularjs-requirejs-lazy-controllers).
• After bootstraping, angular is replaced by our own wrapper that can handle lazy loaded modules.
• The injector is captured and provided as a promise.
• AMD modules can be converted to Angular modules.

这个实现满足您的需求:它可以延迟加载 Angular 模块(至少是我使用的 ng-grid)，绝对是 hackish :) 并且不修改外部库.

This implementation satisfies your needs: it can lazy-load Angular modules (at least the ng-grid I am using), is definitely hackish :) and does not modify external libraries.

非常欢迎评论/意见.

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

(EDIT) The differentiation of this solution from others is that it does not do dynamic require() calls, thus can be built with r.js (and my require-lazy project). Other than that the ideas are more or less convergent across the various solutions.

祝大家好运！

这篇关于动态注入模块，仅在需要时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！