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

In Firefox, simply use the built-in developer tools and select "Inspector". This gives you the current DOM, including changes made by Angular.

Answer 2

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.

Answer 3

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 4

I had the same requirement, but I needed the html from within the same browser session. The simple solution was to use element.innerHTML.

(Still thinking it would be nice to get rid of all the ng-* attributes and other angular-specific attributes though.)

Answer 5

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 6

If you want to be certain that your content is ready before the snapshot is taken, grunt-html-snapshots will wait until a selector is visible in the output (using jQuery is(":visible")) before taking the snapshot. Specific snapshot configuration options are found here.