19

快速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给这个客户？

4

6 回答 6

35

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

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

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

  1. 从http://nodejs.org安装 node.js - 这将为您安装node和npm（节点包管理器）。Grunt 在 npm 上可用。
  2. 打开命令行并导航到您的项目文件夹。
    • 在窗户上：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
  3. 运行npm install -g grunt-cli以全局安装 grunt 命令行工具。
  4. 运行npm install grunt grunt-html-snapshot以将 grunt 的所有需要​​在项目中运行的文件的本地副本安装到您​​的项目中，以及 html 快照任务。

  5. 在您的项目根目录中创建一个超级简单的 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']);
};
  6. 在您的项目根目录中运行grunt，它将拍摄快照:-)

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

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

于 2013-05-13T14:53:39.367 回答
6

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

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

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

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

于 2014-07-02T06:43:20.743 回答
4

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

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

于 2013-05-13T14:46:16.947 回答
3

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

于 2013-12-17T15:47:11.647 回答
2

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

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

于 2014-10-17T03:20:28.533 回答
1

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

于 2013-08-22T00:20:26.297 回答