延迟加载AngularJS模块与RequireJS

感谢伟大的article from Dan Wahlin，我设法实现了Angular的控制器和服务的延迟加载。但是，似乎没有一种干净的方式来延迟加载独立模块。延迟加载AngularJS模块与RequireJS

为了更好地解释我的问题，假设我有一个应用程序将是结构如下图无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不允许在实例化后添加对依赖项的依赖。因此，我的解决方案是使用angular.injector来检索要在我的View2Controller中使用的Picture对象的实例。请参阅js/scripts/controllers/ctrl2.js文件。

这给了我两个问题：

注入的服务运行的角度之外，因此所有异步调用必须以$范围END $适用（）
凌乱的代码，其中的一些对象可以被注入。使用标准的角度语法，而其他需要明确使用注射器。

有没有人想出了如何使用RequireJS来延迟加载独立模块，并且以某种方式将该模块挂接到角度中，因此可以使用正常的角度依赖注入语法？

注意：
的议题是独立的模块的延迟加载。这个特定示例的一个简单解决方案是在ng-app.config期间使用缓存$提供程序创建“图片”对象，但这不是我正在寻找的。我正在寻找适用于第三方模块的解决方案，如angular-resource。

来源

2013-10-02 marcoseu

我发现了这一点[解决方案] [1] $ routeProvider的jQuery和决心 [1]：http://stackoverflow.com/a/28199498/4504198 –

@marcoseu：OFFTOPIC：请尝试看看这个与angularAMD相关的问题。：http://stackoverflow.com/questions/31288001/how-to-use-chart-js-with-angular-chart-using-requirejs – VBMali

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

该项目的目的是展示一个想法和激发讨论。但是确实是你想要什么（检查expenses-view.js，它加载ng-grid lazily）。

我的意见很感兴趣，思想等

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

expenses-view.js被延迟加载，当/expenses路由被激活
expenses-view.js指定ng-grid作为依赖项，所以RequireJs首先加载ng-grid
ng-g RID是调用angular.module(...)

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

此实现有它的缺点，你应该知道的：

配置的功能没有实现（还）。我不知道是否有可能懒洋洋地提供配置时间依赖关系。
订单在定义中很重要。如果服务A依赖于B，但A在模块B之后定义，则DI将失败。这是因为lazyAngular代理立即执行定义，与真正的Angular不同，它确保在执行定义之前解决依赖关系。

来源

2013-10-02 09:51:11

有趣的实现，但它并没有真正回答我的问题，懒惰加载“角。模块“，除非我错过了一些东西。您的所有费用-view.js依赖关系都使用“angular.module”进行编码。但我会记住我想要做的事情。 – marcoseu

也许编辑解释的东西好一点。 –

我将你的代码复制到bootstrap.js中，更具体地说，与'makeLazyModule'和'lazyAngular.module'有关的所有东西都是真的。现在，如果我只理解它为什么工作... – marcoseu

我完成我自己的实现称为angularAMD，这里是使用它的示例站点：

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

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

希望这可以帮助其他寻找的东西，以帮助他们RequireJS和AngularJS整合。

来源

2013-10-09 21:36:02 marcoseu

嗨，我想实现angularAMD。使用它必须遵循你的文件夹结构吗？我想包括服务和指令，如果他们在不同的文件夹？我可以那样做吗？ – VishwaKumar

@VishwaKumar不，你根本不需要关注我的文件夹结构。它们都与'main.js'中的'baseUrl'相关。 – marcoseu

@marcoseu：请看看这个问题（尚未解决）：https：//github.com/marcoslin/angularAMD/issues/148 – VBMali

它看起来像Node.js模块ocLazyLoad定义了一种做这种惰性加载的方式，但我不知道它与其他答案中的方法相比在性能上如何，或者硬编码依赖。任何有关此信息将不胜感激。一个有趣的事情是，其他答案需要RequireJS来操作，而ocLazyLoad不需要。

它看起来像ocLazyLoad定义了另一个提供商注入依赖的模块包含已经被实例化后。它似乎是通过基本上复制一些低级别的Angular行为来实现的，例如模块加载和提供，因此它看起来如此复杂。它看起来像它增加了几乎所有核心角模块作为依赖：$compileProvider，$q，$injector，ng，等等等等。

来源

2014-09-28 03:41:29 trysis

延迟加载AngularJS模块与RequireJS

回答

相关问题