22

感谢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 创建“图片”对象，ng-app.config但这不是我想要的。我正在寻找适用于 3rd 方模块的解决方案，例如angular-resource.

4

3 回答 3

17

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

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

它处理配置函数和乱序模块定义。

希望这可以帮助其他寻求帮助他们进行 RequireJS 和 AngularJS 集成的人。

于 2013-10-09T21:36:02.917 回答
10

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

该项目旨在展示一个想法并激发讨论。但这就是你想要的（检查费用-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 但 A 在模块中的 B 之后定义，则 DI 将失败。这是因为lazyAngular 代理会立即执行定义，这与真正的 Angular 不同，后者会确保在执行定义之前解决依赖关系。
于 2013-10-02T09:51:11.583 回答
1

看起来 Node.js 模块ocLazyLoad定义了一种执行这种延迟加载的方法，尽管与其他答案中的方法或硬编码依赖项相比，我不确定它在性能方面的表现如何。任何有关此的信息将不胜感激。一件有趣的事情是其他答案需要RequireJS操作，而不需要ocLazyLoad。

它看起来像ocLazyLoad定义了另一个在包含模块已经被实例化之后注入依赖的提供者。它似乎通过本质上复制一些低级 Angular 行为来做到这一点，比如模块加载和提供，因此它看起来如此复杂。看起来它几乎添加了每个核心 Angular 模块作为依赖项：$compileProvider、$q、$injector、ng等等。

于 2014-09-28T03:41:29.353 回答