anglejs – 捕获页面源(HTML快照)角度模板后

概述Quick angular.js问题… 如果我有一个这样的内容的网页： <div>{{message}}</div> 而且我设置了’消息’的模型 $scope.message = "Hello world!" 然后在屏幕上，div的内容将显示为 Hello world! 但是，如果我在Chrome或Firefox中查看源代码，源仍然如此 <div>{{message}}</div> 有没有办法在角 Quick angular.Js问题…

如果我有一个这样的内容的网页：

<div>{{message}}</div>

而且我设置了’消息’的模型

$scope.message = "Hello World!"

然后在屏幕上，div的内容将显示为

Hello World!

但是，如果我在Chrome或firefox中查看源代码，源仍然如此

<div>{{message}}</div>

有没有办法在角色模板之后捕获页面的源码，所以当我查看我看到的源代码

<div>Hello World!</div>

例如，如果我正在使用一个项目，我使用Angular来帮助我模板，但是客户端希望HTML中的最终页面没有任何变化，那么在模板应用之后如何捕获页面的HTML给这个客户？

解决方法 https://github.com/cburgdorf/grunt-html-snapshot

这是一个抓取页面的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。

总结

以上是内存溢出为你收集整理的anglejs – 捕获页面源(HTML快照)角度模板后全部内容，希望文章能够帮你解决anglejs – 捕获页面源(HTML快照)角度模板后所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。