角度模板化后捕获页面源(HTML快照) [英] Capturing Page Source (HTML Snapshot) After Angular Templating

问题描述

angular.js 快速问题...

如果我的网页内容如下:

If I have a webpage with content like this:

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

然后我将消息"模型设置为

And I set the model for 'message' such that

$scope.message = "Hello world!"

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

Then on the screen, the contents of the div will display as

Hello world!

但是，如果我在Chrome或Firefox中查看源代码，则源代码仍然看起来像这样

But if I view the source in Chrome or Firefox, the source still looks like this

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

在Angular模板化之后，有什么方法可以捕获页面的源代码，所以当我查看源代码时，我会看到

Is there any way to capture the source of a page after Angular templating, so when I view the source I see

<div>Hello world!</div>

例如，如果我正在一个项目中使用Angular帮助我进行模板制作，但是客户希望HTML中的最终页面没有角度，那么在模板制作完成后如何捕获页面的HTML?申请给这个客户?

For example, if I am working on a project where I am using Angular to help me with the templating but the client would like the final pages in HTML with no angular, how could I capture the HTML of pages after the templating has been applied to give to this client?

推荐答案

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

这是一项艰巨的任务，它会捕获页面的HTML快照:它将在名为phantomjs的假"或无头"浏览器中运行页面，运行javascript，然后为您保存呈现的HTML

This is a grunt task that takes an HTML snapshot of a page: it will run the page in a "fake" or "headless" browser, called phantomjs, do a run of the javascript, then save the rendered HTML for you.

以下是设置Grunt做到这一点的步骤，一无所有:

Here are steps to setup Grunt to do this, from nothing:

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

1. Install node.js from http://nodejs.org - this will install node and npm (node package manager) for you. Grunt is available on npm.
2. Open your command line and navigate to your project folder.
   • On windows: cd c:/myprojects/superproject
   • On mac: cd /Users/itcouldevenbeaboat/myprojects/superproject
   • On linux: i hope you know how to do this already if you use linux :D

在项目根目录中使用以下内容创建一个超级简单的Gruntfile.js:

Create a super simple Gruntfile.js in your project root with these contents:

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，它将创建一个快照:-)

Run grunt in your project root, and it will take a snapshot :-)

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

You may need to start your website up on a server first, and set sitePath in the Gruntfile to point to that for it to work properly.

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

Look at the the grunt-html-snapshot page if you need help with the snapshot configuration.

这篇关于角度模板化后捕获页面源(HTML快照)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！