如何在AngularJS中减轻模块化？

Question

我一直在玩AngularJS的种子应用程序,我注意到应用程序的大多数依赖项(控制器,指令,过滤器,服务)都是预先加载的.我想知道如何将Angular应用程序模块化为更小的字节,除非需要,否则不会加载依赖项.

例如,如果我有一个有购物车的大型应用程序,添加/编辑送货地址,搜索结果,产品详细信息,产品列表等等......购物网站上的用户可能永远不会遇到任何这些视图,但它看起来像喜欢(来自种子应用程序)在启动时加载这些所有视图的代码.

如何在AngularJS中减轻模块化？

Answer 1

关于模块化的这个问题在SO和谷歌小组中经常被问到.我不是核心团队的一员,但我的理解如下:

您可以通过包含它们(ngInclude)或在指令/路由中引用它们来轻松地按需加载部分(HTML /模板片段).所以至少你不需要预先下载所有的部分内容(虽然你可能想这样做,请看这里的另一个问题:有没有办法让AngularJS在开始时加载部分而不是在需要时？)
谈到JavaScript(控制器,指令,过滤器等 - 基本上是AngularJs模块中定义的所有内容),我认为目前还没有支持AngularJS中模块的按需加载.核心团队关闭的这个问题证明了这一点:https://github.com/angular/angular.js/issues/1382

缺乏AngularJS模块的按需加载可能听起来像一个很大的限制,但是:

现在,由于这个问题经常回来,我确信AngularJS团队已经意识到了这一点.事实上,我最近看到了一些实验提交(https://github.com/mhevery/angular.js/commit/1d674d5bfc47d18dc4a14ee0feffe4d1f77ea23b#L0R396),表明支持可能正在进行中(或者至少有一些实验).

有些人乱搞使用requirejs动态加载模块:https://groups.google.com/forum/？fromgroups =#!searchin/angular/simplyjs/angular/rs1dj097oHA/_GEqy56peE0J (2认同)
我正在考虑使用Angular,因为我正在研究一个非常大的应用程序,这绝对是一个问题.目前有超过425个html文件,有自己的js和css,每天都有更多.大多数都作为"仪表板"的一部分或作为lightboxed子对话框加载到iframe中.我非常喜欢到目前为止我对Angular的了解,但是没有任何方法可以加载前面的所有内容.我们当前的iframe方法应该适用于Angular,但需要注意的是管理多个异步iframe并不总是很好.这是另一种可能的策略. (2认同)

Answer 2

我最近一直在玩需求模块和角度,我已经实现了部分和控制器的延迟加载.

无需对Angular源(版本1.0.2)进行任何修改即可轻松完成.

还有一个实现使用Charles Fulnecky制作的yepnope(https://github.com/cmelion/angular-yepnope).