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

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做到这一点的步骤，什么都不做：

1. 从http://nodejs.org安装node.js- 这将为您安装node和npm（节点程序包管理器）。Grunt在npm上可用。
2. 打开命令行并导航到项目文件夹。
   • 在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
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']);
    };

1. grunt在您的项目根目录中运行，它将生成一个快照:-)

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

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