与RequireJS延迟加载AngularJS模块 [英] Lazy loading AngularJS modules with RequireJS

问题描述

感谢伟大的<一个href=\"http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx\">article从丹Wahlin ，我成功地实现了角的控制器和服务的延迟加载。然而，似乎没有成为一个干净的方法来延迟加载独立的模块。

Thanks to the great article from Dan Wahlin, I managed to implement lazy loading of Angular's controllers and services. However, there does not seem to be a clean way to lazy load independent modules.

要更好地解释我的问题，假设我有一个应用程序将是结构如下无RequireJS：

To better explain my question, assume that I have an app would be structure as below without 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

Here is the sample app with RequireJS in Plunker:
http://plnkr.co/aiarzVpMJchYPjFRrkwn

问题的核心是，角不允许添加依赖性 NG-应用后实例化。至于结果，我的解决方案是使用 angular.injector 检索图片对象的实例中使用我的 View2Controller 。参见 JS /脚本/控制器/ ctrl2.js 文件。

The core of the problem is that Angular does not allow adding dependency to ng-app post instantiation. As result, my solution is to use angular.injector to retrieve the instance of Picture object to be used in my View2Controller. See js/scripts/controllers/ctrl2.js file.

这对我产生两个问题：

1. 注入的服务运行的角度之外，因此所有异步调用必须以$范围结束。$适用（）


2. 凌乱code其中一些对象可以使用标准的角度语法而有些则需要明确使用注射器注射。

如何延迟加载独立的模块使用RequireJS不知何故钩角等都正常角度依赖注入语法此模块可用于有任何你想通了？

Have any of you figured out how to lazy load independent module using RequireJS and somehow hook this module in angular so normal angular dependency injection syntax can be used?

注意：结果
现在的问题是对的独立的模块的延迟加载的。一个简单的解决这个具体的例子是在使用缓存$提供商打造图片对象NG-的app.config 但是这不是我所期待的。我要寻找的解决方案，为角资源。

Note:
The question is on lazy loading of independent module. One simple solution to this specific example is to create "Pictures" object using cached $providers during ng-app.config but that is not what I am looking for. I am looking for solution that works with 3rd party module such as angular-resource.

推荐答案

看看我在GitHub上的项目：的角需要懒

Take a look at my project in GitHub: angular-require-lazy

此项目的目的是展示一个想法和激励的讨论。但确实的你想要什么（检查<一href=\"https://github.com/nikospara/angular-require-lazy/blob/master/WebContent/scripts/app/modules/expenses/expensesCtrl.js\"相对=nofollow>费用-view.js ，它加载NG-电网懒洋洋地）。

This project is intended to demonstrate an idea and motivate discussions. But is does what you want (check expenses-view.js, it loads ng-grid lazily).

我的意见很感兴趣，想法等。

I am very interested in comments, ideas etc.

（编辑）NG-电网角模块是延迟加载如下：

(EDIT) The ng-grid Angular module is lazy loaded as follows:

1. 费用-view.js 被延迟加载，当 /费用路线被激活


2. 费用-view.js 指定NG网作为依赖，所以RequireJs负载NG-电网第一个


3. NG-电网是调用 angular.module一（...）

1. expenses-view.js is loaded lazily, when the /expenses route is activated
2. expenses-view.js specifies ng-grid as a dependency, so RequireJs loads ng-grid first
3. ng-grid is the one that calls angular.module(...)

为了达到这个目标，我的代替的（实际代理）真正的 angular.module 方法与我自己，支持懒惰。见<一href=\"https://github.com/nikospara/angular-require-lazy/blob/master/WebContent/scripts/app/bootstrap.js\"相对=nofollow> bootstrap.js 和<一个href=\"https://github.com/nikospara/angular-require-lazy/blob/master/WebContent/scripts/lib/angular-require/route-config.js\"相对=nofollow>路由config.js （功能 initLazyModules（）和 callRunBlocks（））。

In order to accomplish this, I replaced (proxied actually) the real angular.module method with my own, that supports laziness. See bootstrap.js and route-config.js (the functions initLazyModules() and callRunBlocks()).

本实施有它的缺点，你应该知道的：

This implementation has its drawbacks that you should be aware of:

1. 配置的功能没有实现（还）。我不知道，如果有可能的懒洋洋地的提供的配置时间的依赖关系。


2. 在定义订购事宜。如果服务A依赖于B，但A是B的模块定义后，西港岛线DI失败。这是因为，lazyAngular代理立即执行的定义，与真实的角，使得确保依赖关系执行定义之前得到解决。

1. Config functions are not implemented (yet). I do not know if it is possible to lazily provide config-time dependencies.
2. Order matters in definitions. If service A depends on B but A is defined after B in your module, DI wil fail. This is because the lazyAngular proxy executes definitions immediately, unlike real Angular that makes sure dependencies are resolved before executing the definitions.

这篇关于与RequireJS延迟加载AngularJS模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！