angularjs - 在 Angular 模板化之后捕获页面源(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 中的最终页面没有 Angular，那么我如何在模板化后捕获页面的 HTML已申请给予该客户？

Answer 1

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

这是一个获取页面 HTML 快照的 grunt 任务:它将在称为 phantomjs 的“假”或“ headless ”浏览器中运行页面，运行 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. 在项目根目录中创建一个 super 简单的 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 page如果您需要快照配置方面的帮助。