感谢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文件。
ng- app
angular.injector
Picture
View2Controller
js/scripts/controllers/ctrl2.js
这给我带来了两个问题:
你们中有没有人知道如何使用RequireJS来延迟加载独立模块,并以某种方式将其挂在angular上,以便可以使用正常的角度依赖注入语法?
注意 : 问题在于 独立模块的 延迟加载。此特定示例的一种简单解决方案是在期间使用缓存的$ providers创建“图片”对象,ng- app.config但这不是我想要的。我正在寻找可与第三方模块配合使用的解决方案angular-resource。
ng- app.config
angular-resource
看看我在GitHub上的项目:angular-require-lazy
该项目旨在展示一个想法并激发讨论。但是, 这 正是您想要的(请检查Expenses- view.js,它会延迟加载ng- grid)。
我对评论,想法等非常感兴趣。
(编辑)ng-grid Angular模块的延迟加载如下:
expenses-view.js``/expenses
expenses-view.js
angular.module(...)
为了做到这一点,我 用angular.module支持懒惰的我自己的方法 替换了 (实际上是代理)真实的方法。请参阅bootstrap.js和route- config.js(功能initLazyModules()和callRunBlocks())。
angular.module
initLazyModules()
callRunBlocks()
此实现有其缺点,您应该意识到: