是否可以转储和恢复window.angular以创建可恢复的快照

Question

我的应用程序需要UX中的复杂步骤才能到达其中的一些状态.这使得开发/测试周期非常麻烦,因为简单的布局更改必须在视觉上验证各种状态.

所以,我正在考虑以这样的方式获取正在运行的应用程序的转储/快照(即window.angular,或者也许是$ rootscope)的实用性,我可以从该快照快速恢复,运行$ rootscope. digest()和et voila.

有关如何实现这一目标的任何建议？

我不是在寻找恢复的快照来实现功能,例如它不需要有活跃的观察者或广播订阅.它只需要忠实地呈现视觉检查的视图.

- 编辑 -

我开始认为这不可能做到.

我已经意识到,从现在开始我的所有Angular项目都将有一个名为VmStateService的服务,基本上,影响渲染视图的每个VM数据项都必须存在于这个单一服务中,控制器.这样我只有一个干净的对象(它没有功能),我可以转储到字符串,或保存到本地存储,并恢复以创建我想要测试的任何视图.

我想不幸的是,每个人都通过做$ scope.foo ="bar"来学习AngularJS,然后花费他们职业生涯的剩余部分来实现创造的混乱.

Answer 1

这是一个天真的尝试。

用法：

• serialize($rootScope)获取根范围的字符串、序列化版本以及将保存在文件、本地存储等中的子项。

• restore(myCopy, $rootScope)将所有内容放回 $rootScope 中。myCopy 是之前的 copy 方法返回的字符串序列化版本。

仅序列化自定义属性（而不是函数）。任何以美元符号开头的东西都被认为是 Angular 私有的，不应该被弄乱。如果您碰巧有以符号开头的自定义属性，$您可以调整该函数以仅忽略 Angular 私有的属性。

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);