如果我有一个这样的内容的网页:
<div>{{message}}</div>
而且我设置了’消息’的模型
$scope.message = "Hello world!"
Hello world!
但是,如果我在Chrome或Firefox中查看源代码,源仍然如此
<div>{{message}}</div>
有没有办法在角色模板之后捕获页面的源码,所以当我查看我看到的源代码
<div>Hello world!</div>
例如,如果我正在使用一个项目,我使用Angular来帮助我模板,但是客户端希望HTML中的最终页面没有任何变化,那么在模板应用之后如何捕获页面的HTML给这个客户?
解决方法
这是一个抓取页面的HTML快照的grunt任务:它将以“伪造”或“无头”浏览器运行页面,称为phantomjs,执行javascript,然后为您保存呈现的HTML。
以下是设置Grunt来执行此操作的步骤:
>从http://nodejs.org安装node.js – 这将为您安装节点和npm(节点包管理器)。咕噜在npm上可用。
打开你的命令行并导航到你的项目文件夹。
>在windows上:cd c:/ myprojects / superproject
>在mac上:cd / Users / itcouldevenbeaboat / myprojects / superproject
在linux上:我希望你知道如何使用linux:D
>运行npm install -g grunt-cli以全局安装grunt命令行工具。
>运行npm安装grunt grunt-html-snapshot,将您所有项目中需要的所有项目文件的本地副本以及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。