我有一个由N个模块组成的应用程序。几乎所有这些模块都将按需加载。
有没有什么好方法可以用动态加载和卸载的模块组织AngularJS应用程序?
答案 0 :(得分:5)
从Angular 1.2.16和1.3.0 beta开始,bootstrap()
方法defines a specific element on the DOM as the root scope for a collection of modules。解除绑定没有相应的方法。 ng-app
指令为just a shortcut for bootstrap()
,因此适用相同的限制。
与Artemis链接的angular-requirejs-seed项目没有回答你的问题。它在加载页面时使用NG_DEFER_BOOTSTRAP!
属性suspend the bootstrap process and dynamically define which modules to add。它不会卸载任何东西。
克服Angular固有无法卸载模块的最简单方法是销毁模块运行的DOM元素。不幸的是,通过销毁元素,你也会丢失你所拥有的任何标记。该问题的一个解决方案是将应用程序的标记放入HTML5 <template>
元素并克隆其内容。这里是an example I wrote in JSBin,其中一个含糊不清的someGuyInASuit
指令加载了Dr. Jekyll或Hyde先生的图片,具体取决于加载的模块。
这种解决方法不适合由许多模块组成的应用程序,特别是当您打算在用户与之交互时经常交换它们。首先,你的所有模型都将被销毁。此外,所有config()
和run()
块都将重新运行。您可能想要分叉Angular并添加自己的un-bootstrap方法,或者查看另一个框架,例如内置a method for unloading components的React。
答案 1 :(得分:1)
也许你会发现这篇文章很有帮助。 http://rarabaolaza.tumblr.com/post/56707155391/a-plugin-based-architecture-for-angularjs-apps
它描述了使用requirejs和一些元数据创建基于插件的角度应用程序的近似,其中每个插件都是一个模块,也许你可以根据自己的需要调整它或获得一些想法。但是没有模块卸载我害怕。
如果您认为这可以帮助您我正在修改它并且(我相信)改进想法,那么请随时提出
HTH
答案 2 :(得分:0)
看看这个项目。您可以将Angular与RequireJs https://github.com/tnajdek/angular-requirejs-seed
一起使用关于你的项目,我不关心大量的角度模块,它们只是一个轻量级的对象,允许你将代码分成逻辑部分。 如果你遇到一些内存问题,可以考虑一些代码重构来摆脱性能杀手。