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.

Answer 2

As Langdon said, Chrome will do. I managed to get this done through Chrome's Inspector's "Edit as HTML" option.

First save the page (from now on PAGE_ORIGINAL) as "Webpage, complete". (Saved page will be referred as PAGE_COPY.)

1. Open Chrome and inspect any element on PAGE_ORIGINAL. Inspector will open.
2. Right-click on PAGE_ORIGINAL's source code's body tag, choose "Edit as HTML", and copy tag and everything within.
3. Replace body and its contents on PAGE_COPY with what you just copied.
4. Remove Angular by deleting references to it on PAGE_COPY.

Worked for me. :-) (I tried commenting on Langdon's answer, but didn't have enough rep.)

Answer 3

There is no way to "view source" in the traditional sense and see HTML modified by Angular. That's because view source will show the source from the server and Angular is only making changes to the markup already loaded from the server.

What you want to do is use Chrome's inspector (F12) or FireBug (maybe? does that still exist) in FireFox. Chrome's inspector and FireBug will show you the "active" source, or how the HTML looks at the time you're viewing it.