使用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对象实例View2Controller.见js/scripts/controllers/ctrl2.js文件.

这给我带来了两个问题:

1. 注入的服务在angular之外运行,因此所有异步调用必须以$ scope结尾.$ apply()
2. 凌乱的代码,其中一些对象可以使用标准角度语法注入,而其他对象需要显式使用注入器.

你有没有想过如何使用RequireJS延迟加载独立模块,并以某种方式将此模块挂钩角度,因此可以使用正常的角度依赖注入语法？

注意:
问题是关于独立模块的延迟加载.这个具体示例的一个简单解决方案是使用缓存的$ providers创建"Pictures"对象,ng-app.config但这不是我想要的.我正在寻找适用于第三方模块的解决方案,例如angular-resource.

Answer 1

我最终确定了我自己的实现angularAMD,这里是使用它的示例站点:

http://marcoslin.github.io/angularAMD/

它处理配置功能和乱序模块定义.

希望这可以帮助其他人寻找帮助他们使用RequireJS和AngularJS集成的东西.

Answer 2

看看我在GitHub中的项目:angular-require-lazy

该项目旨在展示一个想法并激励讨论.但做你想要的(检查费,view.js,它加载NG网懒洋洋地).

我对评论,想法等很感兴趣.

(编辑)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但A在模块中的B之后定义,则DI将失败.这是因为lazyAngular代理立即执行定义,不像真正的Angular,它确保在执行定义之前解析依赖关系.