Capturing Page Source (HTML Snapshot) After Angular Templating

Question

Quick angular.js question...

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!"

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

Hello world!

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

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

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>

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?

Answer 1

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

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.

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

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
3. Run npm install -g grunt-cli to install grunt command line tools globally.
4. Run npm install grunt grunt-html-snapshot to install a local copy of all of grunt's needed-to-run-in-a-project filesto your project, and the html snapshot task.

5. 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']);
   };
   

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

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.

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