角度模板后捕获页面源(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']);
   };
   

6. grunt在您的项目根目录中运行,它将拍摄快照:-)

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

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

Answer 2

正如兰登所说,Chrome会这样做.我设法通过Chrome的Inspector的"编辑为HTML"选项完成了这项工作.

首先将页面(从现在开始在PAGE_ORIGINAL上)保存为"网页,完成".(保存的页面将被称为PAGE_COPY.)

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

为我工作.:-)(我试着评论兰登的答案,但没有足够的代表.)