Как разгрузить модули angularjs

У меня есть приложение, состоящее из N модулей. Почти все эти модули будут загружаться по требованию.

Есть ли хороший способ организовать приложение AngularJS с динамически загружаемыми и разгруженными модулями?

Зачем нам нужно выгружать модули

Количество модулей (N) может быть как можно больше, и я не могу гарантировать их максимальное количество. Поэтому я стараюсь избегать чрезмерного использования памяти;
Я не думаю, что лучше оставить код внутри браузера, который мы не будем использовать (мне не нравится идея, что вкладка с моим webapp будет потреблять всю доступную память и будет зависать в браузере);
Я думаю, что Google тоже идет именно так. Вы можете работать со своим Gmail в течение всего дня, и он все еще работает должным образом (Google I/O 2013 - поездка вниз по памяти с помощью Gmail и DevTools http://www.youtube.com/watch?v=x9Jlu_h_Lyw).

Linked

Вложенные модули в AngularJS

Ответ 1

Как и в случае с Angular 1.2.16 и 1.3.0 beta, метод bootstrap() определяет конкретный элемент в DOM в качестве области корня для сбор модулей. Не существует соответствующего метода для развязывания. Директива ng-app просто ярлык для bootstrap(), поэтому применяется одно и то же ограничение.

Проект angular -requirejs-seed, связанный с Артемисом, не отвечает на ваш вопрос. Он использует свойство NG_DEFER_BOOTSTRAP! для приостанавливает процесс начальной загрузки и динамически определяет, какие модули добавлять в момент загрузки страницы. Он ничего не выгружает.

Самый простой способ преодолеть Angular неотъемлемую неспособность выгружать модули - уничтожить элемент DOM, в котором работают ваши модули. К сожалению, уничтожая элемент, вы также теряете всякую разметку имел. Одним из решений этой проблемы является включение разметки ваших приложений в элемент HTML5 <template> и клонирование ее содержимого. Heres пример, который я написал в JSBin, где неоднозначно названная директива someGuyInASuit загружает изображение доктора Джекила или мистера Хайд в зависимости от того, какой модуль загружен.

Этот подход не очень подходит для приложения, состоящего из множества модулей, особенно если вы намерены регулярно их менять и менять, когда пользователь взаимодействует с ним. Во-первых, все ваши модели будут уничтожены. Кроме того, все блоки config() и run() будут повторно запущены. Вы можете либо использовать fork Angular, либо добавить свой собственный метод un-bootstrap или посмотреть на другую структуру, такую как React, которая метод разгрузки компонентов встроенный.

Ответ 2

Возможно, вы могли бы найти это сообщение полезным. http://rarabaolaza.tumblr.com/post/56707155391/a-plugin-based-architecture-for-angularjs-apps

В нем описывается аппроксимация использования requirejs и некоторых метаданных для создания приложения angular с плагинами, где каждый плагин является модулем, возможно, вы можете адаптировать его к вашим потребностям или получить некоторые идеи. Но никакой разгрузки модуля я боюсь.

Если вы считаете, что это может помочь вам, я в настоящее время его пересматриваю и (я считаю), улучшая идеи, поэтому не стесняйтесь спрашивать

HTH

Ответ 3

Посмотрите на этот проект. Вы можете использовать Angular вместе с RequireJs https://github.com/tnajdek/angular-requirejs-seed

Что касается вашего проекта, мне бы не понравилось множество модулей Angular, это просто облегченные объекты, которые позволяют вам разделить ваш код на логические части. Если вы столкнулись с некоторыми проблемами памяти, рассмотрите некоторые рефакторинги кода, чтобы избавиться от убийц производительности.