Angular 模板化后捕获页面源（HTML 快照）答案

【问题标题】：Capturing Page Source (HTML Snapshot) After Angular TemplatingAngular 模板化后捕获页面源（HTML 快照）
【发布时间】：2013-05-13 14:39:12
【问题描述】：

快速 angular.js 问题...

如果我的网页内容如下：

<div>{{message}}</div>

我为“消息”设置了模型，这样

$scope.message = "Hello world!"

然后在屏幕上，div的内容会显示为

Hello world!

但如果我在 Chrome 或 Firefox 中查看源代码，源代码仍然是这样的

<div>{{message}}</div>

Angular 模板化后有什么方法可以捕获页面的源代码，所以当我查看源代码时我看到了

<div>Hello world!</div>

例如，如果我在一个项目中使用 Angular 来帮助我进行模板制作，但客户希望 HTML 中的最终页面没有 Angular，我如何在模板完成后捕获页面的 HTML被申请给这个客户？

【问题讨论】：

嗨，你有没有解决这个问题，如果得到它，请指导我......

标签： angularjs angular-template

【解决方案1】：

https://github.com/cburgdorf/grunt-html-snapshot

这是一个获取页面 HTML 快照的繁重任务：它将在名为 phantomjs 的“假”或“无头”浏览器中运行页面，运行 javascript，然后为您保存呈现的 HTML .

以下是设置 Grunt 执行此操作的步骤，从无到有：

从http://nodejs.org 安装node.js - 这将为您安装node 和npm（节点包管理器）。 Grunt 在 npm 上可用。
打开命令行并导航到您的项目文件夹。
- 在 Windows 上：cd c:/myprojects/superproject
- 在 Mac 上：cd /Users/itcouldevenbeaboat/myprojects/superproject
- 在 Linux 上：i hope you know how to do this already if you use linux :D
运行 npm install -g grunt-cli 以全局安装 grunt 命令行工具。
运行 npm install grunt grunt-html-snapshot 将 grunt 的所有需要在项目中运行所需的文件和 html 快照任务安装到本地副本。

在您的项目根目录中创建一个超级简单的 Gruntfile.js，其中包含以下内容：

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-html-snapshot');

  grunt.initConfig({
    htmlSnapshot: {
      all: {
        options: {
          snapshotPath: 'snapshots/',
          sitePath: 'www/index.html', 
          urls: ['#/home', '#/about', '#/users/itcouldevenbeaboat']
        }
      }
    }
  });

  grunt.registerTask('default', ['htmlSnapshot']);
};

在您的项目根目录中运行grunt，它会拍摄快照:-)

您可能需要先在服务器上启动您的网站，并在 Gruntfile 中设置 sitePath 以指向该服务器以使其正常工作。

如果您需要有关快照配置的帮助，请查看grunt-html-snapshot page。

【讨论】：

谢谢，这显然是一个非常好的和合格的答案，但我希望为不知道如何使用 grunt 的人提供一些技术性较低的东西。
真的，一个超越一切的答案！
+1 nice.. @Andy Joslin 有没有可以看到 Angular 相关任务列表的仓库
@Andrew Joslin 如果我想用 php 来做呢？？
您好，这个向我抛出了一个错误，例如 - 由于警告而中止。有人请帮帮我。

【解决方案2】：

我有同样的要求，但我需要来自同一个浏览器会话中的 html。简单的解决方案是使用 element.innerHTML。

（仍然认为摆脱所有 ng-* 属性和其他特定于角度的属性会很好。）

【讨论】：

【解决方案3】：

正如兰登所说，Chrome 可以。我设法通过 Chrome 的 Inspector 的“编辑为 HTML”选项来完成这项工作。

首先将页面（从现在开始为 PAGE_ORIGINAL）保存为“网页，完成”。（保存的页面将被称为 PAGE_COPY。）

打开 Chrome 并检查 PAGE_ORIGINAL 上的任何元素。检查器将打开。
右键单击PAGE_ORIGINAL源代码的body标签，选择“编辑为HTML”，然后复制标签和其中的所有内容。
将 body 及其在 PAGE_COPY 上的内容替换为您刚刚复制的内容。
通过在 PAGE_COPY 上删除对 Angular 的引用来移除它。

为我工作。 :-)（我尝试评论兰登的回答，但没有足够的代表。）

【讨论】：

【解决方案4】：

没有办法通过传统意义上的“查看源代码”，看到 Angular 修改的 HTML。这是因为查看源代码会显示来自服务器的源代码，而 Angular 只是对已经从服务器加载的标记进行更改。

您想要做的是在 FireFox 中使用 Chrome 的检查器 (F12) 或 FireBug（也许？仍然存在）。 Chrome 的检查器和 FireBug 将向您显示“活动”源，或 HTML 在您查看时的外观。

【讨论】：

我能够使用这种策略获得一些结果，这绝对是一个不错的答案。

【解决方案5】：

在 Firefox 中，只需使用内置的开发人员工具并选择“Inspector”即可。这将为您提供当前的 DOM，包括 Angular 所做的更改。

【讨论】：

【解决方案6】：

如果您想在拍摄快照之前确定您的内容已准备就绪，grunt-html-snapshots 将等到选择器在输出中可见（使用 jQuery is(":visible")），然后再拍摄快照。具体的快照配置选项见here。

【讨论】：