如何卸载angularjs模块

时间:2013-09-19 10:31:54

标签: javascript angularjs architecture module

我有一个由N个模块组成的应用程序。几乎所有这些模块都将按需加载。

有没有什么好方法可以用动态加载和卸载的模块组织AngularJS应用程序?

为什么我们需要卸载模块

  • 模块数量(N)可以尽可能多,我不能保证任何最大数量。所以我尽量避免过度使用内存;
  • 我不认为将代码留在我们不会使用的浏览器中是最佳做法(我不喜欢使用我的webapp的选项卡会消耗所有可用内存并挂起浏览器的想法);
  • 我认为谷歌也是这样。您可以整天使用Gmail,但它仍然可以正常运行( Google I / O 2013 - 使用Gmail和DevTools浏览记忆内容 http://www.youtube.com/watch?v=x9Jlu_h_Lyw)。

链接的

3 个答案:

答案 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

一起使用

关于你的项目,我不关心大量的角度模块,它们只是一个轻量级的对象,允许你将代码分成逻辑部分。 如果你遇到一些内存问题,可以考虑一些代码重构来摆脱性能杀手。