angularjs - уроки - ng-cloak not working




возможно ли сбросить и восстановить window.angular для создания восстановимого моментального снимка (4)

Мое приложение требует сложных шагов в UX для достижения некоторых из многих состояний. Это делает цикл dev / test чрезвычайно громоздким для простых изменений компоновки, которые должны быть визуально проверены для широкого диапазона состояний.

Итак, я изучаю практичность получения дампа / моментального снимка работающего приложения (например, window.angular или, возможно, $ rootcope) таким образом, что я могу быстро восстановить из этого моментального снимка, запустив $ cccorncope. $ digest () и et voila.

Любые предложения о том, как это можно достичь?

Я не ищу, чтобы восстановленный моментальный снимок был функциональным, например, он не должен иметь активных наблюдателей или широковещательных подписчиков. Ему просто нужно добросовестно визуализировать визуальный осмотр.

--редактировать--

Я начинаю думать, что это невозможно.

То, что я понял, состоит в том, что у всех моих Углеродных проектов с этого момента будет одна служба VmStateService, и в основном каждый отдельный элемент данных VM, который влияет на визуализированное представление, должен жить в этой единственной службе, которая вводится в каждый контроллер. Таким образом, у меня есть только один чистый объект (у него нет функций), я могу сбросить строку или сохранить в локальное хранилище и восстановить, чтобы создать любое представление, которое я хочу проверить.

Я думаю, что, к сожалению, все учатся AngularJS, делая $ scope.foo = "bar", а затем тратит остальную часть своей карьеры, понимая, что создает беспорядок.


Вот наивный пример.

Применение:

  • serialize($rootScope) чтобы получить строку, сериализованную версию корневой области и дочерних элементов, которые вы сохраните в файле, localStorage и т. д.

  • restore(myCopy, $rootScope) чтобы вернуть все обратно в $ rootScope. myCopy - это строка, сериализованная версия, ранее возвращаемая методом копирования.

Сериализованы только пользовательские свойства (а не функции). Все, что начинается со знака доллара, считается закрытым для углового и его не следует путать. Если у вас есть пользовательские свойства, которые начинаются со знака $ вы можете настроить функцию, чтобы игнорировать только одну из угловых.

function serialize(target, source) {
  source = source || {};
  for (var key in target) {
    if (!target.hasOwnProperty(key)) { continue; }
    if (key[0] === '$' || key === 'constructor') continue;

    if (typeof target[key] !== 'function') {
      try {
        source[key] = JSON.stringify( target[key] );
      } catch(e) {}
    }
  }

  if (target.$$nextSibling) {
    source.$$nextSibling = {};
    serialize(target.$$nextSibling, source.$$nextSibling);
  }

  if (target.$$childHead) {
    source.$$childHead = {};
    serialize(target.$$childHead, source.$$childHead);
  }

  return JSON.stringify(source);
}

function restore(copy, $rootScope) {
  try {
    copy = JSON.parse(copy);
  } catch(e) {}

  for (var key in copy) {
    if (!copy.hasOwnProperty(key)) { continue; }

    try {
      $rootScope[key] = JSON.parse(copy[key]);
    } catch(e) {
      $rootScope[key] = copy[key];
    }
  }

  if (copy.$$nextSibling) {
    $rootScope.$$nextSibling = $rootScope.$$nextSibling || {};
    restore(copy.$$nextSibling, $rootScope.$$nextSibling);
  }

  if (copy.$$childHead) {
    $rootScope.$$childHead = $rootScope.$$childHead || {};
    restore(copy.$$childHead, $rootScope.$$childHead);
  }
}

// Create a $rootScope serialized copy that can be stored in local storage, etc
var copy = serialize($rootScope);

// Restore a serialized copy into $rootScope
restore(copy, $rootScope);

Проблема с просто использованием JSON.Stringify заключается в том, что он не будет правильно записывать функции и не будет захватывать законные undefined значения или циклические ссылки. То, что вы можете использовать в качестве отправной точки, это util.inspect() Node JS:

https://github.com/nodejs/node/blob/master/lib/util.js#L87

Это уже делает половину работы - читает объект, форматирует его правильно, управляет всеми нюансами. Также читает функции и круговые ссылки. Вы должны сделать вторую половину работы в переводе, но вы должны уметь.

(И это условия лицензии Node - лицензия MIT для самого узла, другие библиотеки могут быть немного более строгими (но не намного)):

https://raw.githubusercontent.com/nodejs/node/master/LICENSE


редактировать

Во-первых, если все, что вам интересно, это получить визуальный контроль, почему бы не сделать это?

document.body.parentNode.innerHTML

Но, скорее всего, вы захотите больше, особенно если хотите записать значение любых полей ввода и т. Д., Которые не представлены статическим HTML DOM.

Чтобы решить вашу проблему, вы должны захватить любую требуемую информацию, чтобы повторно создать свое состояние просмотра. В Angular это, вероятно, означает:

  • Текущий URL-адрес
  • Любые значения на $ rootScope
  • Внутреннее состояние любых служб, которые подают данные на ваш уровень представления.

Это трудно сделать, если вы не планируете архитектуру приложения вокруг этой функции. Независимо от того, как вы нарезаете его, вам нужно будет сделать рефакторинг. Вам также понадобится архитектура, которая поощряет состояние, которое вы можете сделать снимок, так что будущее развитие также может быть сохранено / восстановлено.

Похоже, вы могли бы воспользоваться архитектурой FLUX. Если вы не знакомы с FLUX, я рекомендую вам посмотреть веб-сайт flux .

Я реализовал версию FLUX в своем приложении Enterprise Angular, используя RxJS для действий и сервисов для магазинов (я просто module.service('<Feature>Store', /*Definition*/) их <Feature>Store , и они вводятся через module.service('<Feature>Store', /*Definition*/) ).

Тем не менее, существует реализация Flux, которая может решить то, что вы ищете, https://github.com/rackt/redux . Redux построен вокруг React, поэтому вам нужно будет построить мост из уровня состояния приложения, в представление (которое может контролироваться угловым).

Redux сохраняет состояние приложения в одном объекте JS и отслеживает каждое атомное изменение этого объекта. Теоретически вы сможете мгновенно сохранять / загружать состояние приложения.


Если вы проводите тестирование с karma тогда вы можете использовать karma-fixtures-preprocessor .

Суть:

  1. создать службу, которая возвращает макет или создать тестовые приборы
  2. использование инъекции зависимостей (угловой для победы); вставляйте свои макет / макет данных и проверяйте свою логику изолированно.

Если у вас возникли проблемы с этим подходом; то у вас, скорее всего, есть слабое разделение проблем .

Ознакомьтесь с этими замечательными ресурсами:

мой анализ за 0,02 $

Мое приложение требует сложных шагов в UX для достижения некоторых из многих состояний. Это делает цикл dev / test чрезвычайно громоздким для простых изменений компоновки, которые должны быть визуально проверены для широкого диапазона состояний.

Это очень похоже на слабое разделение проблем. Если вам даны все данные; это должно быть легко вызвать просмотр или перейти в состояние.

Итак, я изучаю практичность получения дампа / моментального снимка работающего приложения (например, window.angular или, возможно, $ rootcope) таким образом, что я могу быстро восстановить из этого моментального снимка, запустив $ cccorncope. $ digest () и et voila.

Это очень похоже на использование светильников. Что касается данных, которые вам нужно будет записывать; использование http-перехватчиков для регистрации контента может работать для вас (не делайте этого в prod). Затем вы можете использовать контент, который вы только что запустили, для использования в ваших макетных данных.

тестирование вида с различными входами

Обычно это означает, что вы хотите протестировать пользовательские директивы с разными данными. Вы можете сделать это с помощью:

  • как и многие приспособления, необходимые для каждого тестового теста,
  • beforeEach для загрузки правильных данных для группы beforeEach ,
  • используя $digest() чтобы обновить представление,
  • проверяя обновленную разметку с помощью .find() или .attr() и т. д. на элементе.
  • проверка рендеринга с помощью .clientHeight , .clientWidth и т. д.

проверка (визуально) множества различных элементов пользовательского интерфейса

Существует много возможностей для ручной проверки элементов.

Добавление «тестовой страницы», где одни и те же элементы отображаются с разными данными, классами, стилями и т. Д. Когда некоторые данные предоставляются как пользовательский ввод, и его сложно проверить автоматическим способом; это может быть ценным подходом. Примерами являются: Bootswatch который позволяет проверять многие элементы пользовательского интерфейса bootstrap под разными темами. jquery UI ThemeRoller который позволяет вам быстро проверять многие элементы под разными темами.

функция сброса / восстановления

У этого вопроса есть несколько хороших моментов в доступе к дочерним областям из родительской области: AngularJS - Доступ к охвату ребенка

Дополнительные пункты:

  • вам нужно знать, что такое разметка, прежде чем она будет обновлена,
  • демпинг может быть легким, если вам удастся получить данные из всех необходимых областей,
  • однако выполнение восстановления может вообще не работать из-за того, как вы будете делать обновления. например, выполнение одного элемента за раз может инициировать обновления, а не делать это в правильном порядке, может инициировать обновления, которые могут изменять элементы и т. д.

Это становится очень волосатым. Я не знаю библиотеки, которая предоставляет общие функции дампа / восстановления.





angularjs