用RequireJS延迟加载AngularJS模块

Question

感谢Dan Wahlin的精彩文章，我设法实现了Angular的控制器和服务的延迟加载。但是，似乎没有一种干净的方法来懒惰加载独立的模块。

为了更好地解释我的问题，假设我有一个没有RequireJS的应用，其结构如下：

// Create independent module 'dataServices' module with 'Pictures' object
angular.module("dataServices", []).factory("Pictures", function (...) {...});

// Create 'webapp' ng-app, with dependency to 'dataServices', defining controllers
angular.module("webapp", ['dataServices'])
.controller("View1Controller", function (...) {...})
.controller("View2Controller", function (...) {...});

这是在Plunker中带有RequireJS的示例应用程序：http
://plnkr.co/aiarzVpMJchYPjFRrkwn

问题的核心是Angular不允许ng- app在实例化后添加依赖。结果，我的解决方案是使用angular.injector检索Picture要在my中使用的对象的实例View2Controller。查看js/scripts/controllers/ctrl2.js文件。

这给我带来了两个问题：

1. 注入的服务在angular之外运行，因此所有异步调用都必须以$ scope。$ apply（）结尾
2. 杂乱的代码，其中某些对象可以使用标准角度语法进行注入，而其他对象则需要明确使用注入器。

你们中有没有人知道如何使用RequireJS来延迟加载独立模块，并以某种方式将其挂在angular上，以便可以使用正常的角度依赖注入语法？

注意 ：
问题在于 独立模块的 延迟加载。此特定示例的一种简单解决方案是在期间使用缓存的$ providers创建“图片”对象，ng- app.config但这不是我想要的。我正在寻找可与第三方模块配合使用的解决方案angular-resource。

Answer 1

看看我在GitHub上的项目：angular-require-lazy

该项目旨在展示一个想法并激发讨论。但是， 这 正是您想要的（请检查Expenses-
view.js
，它会延迟加载ng-
grid）。

我对评论，想法等非常感兴趣。

（编辑）ng-grid Angular模块的延迟加载如下：

1. expenses-view.js``/expenses激活路线后，会延迟加载
2. expenses-view.js 将ng-grid指定为依赖项，因此RequireJs首先加载ng-grid
3. ng-grid是调用 angular.module(...)

为了做到这一点，我 用angular.module支持懒惰的我自己的方法 替换了
（实际上是代理）真实的方法。请参阅bootstrap.js和route-
config.js（功能initLazyModules()和callRunBlocks()）。

此实现有其缺点，您应该意识到：

1. 尚未实现配置功能。我不知道是否有可能 懒惰地 提供 配置时间 依赖性。
2. 顺序在定义中很重要。如果服务A依赖于B，但在模块中B之后定义了A，则DI将失败。这是因为lazyAngular代理会立即执行定义，这与真正的Angular不同，真正的Angular确保在执行定义之前先解决依赖关系。