18

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

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

为什么我们需要卸载模块

  • 模块数量（N）可以尽可能多，我不能保证它们的最大数量。所以我尽量避免过度使用内存；
  • 我不认为将代码留在我们不会使用的浏览器中是最佳做法（我不喜欢我的 web 应用程序的选项卡会消耗所有可用内存并挂起浏览器的想法）；
  • 我认为谷歌也是如此。您可以整天使用 Gmail，并且它仍然正常运行（Google I/O 2013 - 使用 Gmail 和 DevTools 的记忆之旅 http://www.youtube.com/watch?v=x9Jlu_h_Lyw）。

链接

4

3 回答 3

5

从 Angular 1.2.16 和 1.3.0 beta 开始，该bootstrap()方法将 DOM 上的特定元素定义为模块集合的根范围。没有对应的解绑方法。该ng-app指令只是 的快捷方式bootstrap()，因此适用相同的限制。

链接到的 angular-requirejs-seed 项目 Artemis 无法回答您的问题。它使用该NG_DEFER_BOOTSTRAP!属性暂停引导过程并动态定义在加载页面时要添加的模块。它不会卸载任何东西。

克服 Angular 固有的无法卸载模块的最直接方法是销毁运行模块的 DOM 元素。不幸的是，通过破坏元素，你也会失去你拥有的任何标记。该问题的一种解决方案是将应用程序的标记放入 HTML5<template>元素并克隆其内容。这是我在 JSBin 中编写的一个示例，其中一个含糊不清的someGuyInASuit指令根据加载的模块加载了 Jekyll 博士或 Hyde 先生的图片。

这种解决方法不太适合由许多模块组成的应用程序，尤其是当您打算在用户与其交互时频繁地交换它们时。一方面，您的所有模型都将被销毁。此外，所有config()和run()块将重新运行。你可能想要 fork Angular 并添加你自己的 un-bootstrap 方法，或者看看另一个框架，例如 React，它有一个内置的卸载组件的方法。

于 2014-04-10T22:41:39.480 回答
1

也许你会发现这篇文章很有帮助。http://raraboolaza.tumblr.com/post/56707155391/a-plugin-based-architecture-for-angularjs-apps

它描述了使用 requirejs 和一些元数据来创建基于插件的 Angular 应用程序的近似方法，其中每个插件都是一个模块，也许您可​​以根据自己的需要调整它或获得一些想法。但恐怕没有模块卸载。

如果您认为这可以帮助您，我目前正在修改它并（我相信）改进这些想法，所以请随时提问

高温高压

于 2013-09-19T11:20:46.540 回答
0

看看这个项目。您可以将 Angular 与 RequireJs 一起使用https://github.com/tnajdek/angular-requirejs-seed

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

于 2013-10-30T21:54:14.943 回答