Capturing Page Source (HTML Snapshot) After Angular Templating

Question

Quick angular.js question...

If I have a webpage with content like this:

{{message}}

And I

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.