一尘不染

用RequireJS延迟加载AngularJS模块

angularjs

感谢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


阅读 224

收藏
2020-07-04

共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.jsroute-
config.js
(功能initLazyModules()callRunBlocks())。

此实现有其缺点,您应该意识到:

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