Question

快速 angular.js 问题......

如果我的网页内容如下：

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

我为“消息”设置了模型

$scope.message = "Hello world!"

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

Hello world!

但如果我在Chrome或Firefox中查看来源，则源代码仍然如此

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

有没有办法在Angular模板后捕获页面的来源，所以当我查看源代码时我看到了

<div>Hello world!</div>

例如，如果我正在处理一个项目，我正在使用Angular帮助我进行模板化，但是客户端希望HTML中的最终页面没有角度，那么在模板化之后如何捕获页面的HTML是否适用于给这个客户？

Answer 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。

Answer 2

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

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

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

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

Answer 3

传统意义上无法“查看源代码”并看到Angular修改的HTML。那是因为视图源将显示来自服务器的源，而Angular仅对已经从服务器加载的标记进行更改。

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

Answer 4

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

Answer 5

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

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

Answer 6

如果您想在拍摄快照之前确定您的内容已准备就绪，grunt-html-snapshots将等到输出中的选择器可见（使用jQuery是（“：visible”）），然后才能拍摄快照。找到特定的快照配置选项here。

角度模板后捕获页面源（HTML快照）

6 个答案: