Захват источника страницы (моментальный снимок HTML) После Angular Templating

Быстрый angular.js вопрос...

Если у меня есть веб-страница с контентом вроде этого:

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

И я установил модель для "сообщения", чтобы

$scope.message = "Hello world!"

Затем на экране содержимое div будет отображаться как

Hello world!

Но если я просматриваю источник в Chrome или Firefox, источник все равно выглядит следующим образом:

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

Есть ли способ захватить источник страницы после Angular templating, поэтому, когда я просматриваю исходный код, я вижу

<div>Hello world!</div>

Например, если я работаю над проектом, в котором я использую Angular, чтобы помочь мне с шаблоном, но клиент хотел бы получить последние страницы в HTML без angular, как я мог бы захватить HTML-страницы после того, как шаблон был применен для предоставления этому клиенту?

Ответы

Ответ 1

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

Это задача, которая делает снимок HTML на странице: он запустит страницу в "поддельном" или "безгласном" браузере, называемом phantomjs, выполнит запуск javascript, а затем сохранит отображаемый HTML для вас.

Вот шаги по настройке Grunt для этого, из ничего:

  • Установите node.js из http://nodejs.org - это установит node и npm (node диспетчер пакетов) для тебя. Grunt доступен на npm.
  • Откройте свою командную строку и перейдите в папку проекта.
    • В окнах: 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
  • Запустите npm install -g grunt-cli, чтобы установить инструменты командной строки grunt глобально.
  • Запустите npm install grunt grunt-html-snapshot, чтобы установить локальную копию всего необходимого для запуска проекта проекта, а также задачу моментального снимка html.

  • Создайте суперпростой Gruntfile.js в корне вашего проекта с помощью этого содержимого:

    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 в корне вашего проекта, и он сделает снимок: -)

Возможно, вам сначала нужно запустить свой сайт на сервере и установить sitePath в файле Gruntfile, чтобы указать на то, что он будет работать правильно.

Посмотрите на страницу grunt-html-snapshot, если вам нужна помощь в настройке моментального снимка.

Ответ 2

Как сказал Лэнгдон, Chrome сделает это. Мне удалось сделать это через опцию "Редактировать как HTML" в Chrome Inspector.

Сначала сохраните страницу (теперь PAGE_ORIGINAL) как "Веб-страница, заполните". (Сохраненная страница будет называться PAGE_COPY.)

  • Откройте Chrome и проверьте любой элемент на PAGE_ORIGINAL. Инспектор откроется.
  • Щелкните правой кнопкой мыши тег body PAGE_ORIGINAL, выберите "Редактировать как HTML" и скопируйте тег и все внутри.
  • Замените тело и его содержимое на PAGE_COPY на то, что вы только что скопировали.
  • Удалите Angular, удалив ссылки на него на PAGE_COPY.

Работал для меня.:-) (Я пробовал комментировать Langdon ответ, но не хватило репутации.)

Ответ 3

Невозможно "посмотреть источник" в традиционном смысле и увидеть HTML, измененный с помощью Angular. Это потому, что источник представления будет показывать источник с сервера, а Angular только вносит изменения в разметку, уже загруженную с сервера.

Что вы хотите сделать, это использовать инспектор Chrome (F12) или FireBug (возможно, все еще существует) в FireFox. Инспектор Chrome и FireBug покажут вам "активный" источник или то, как HTML выглядит в то время, когда вы его просматриваете.

Ответ 4

В Firefox просто используйте встроенные инструменты разработчика и выберите "Инспектор". Это дает вам текущую DOM, включая изменения, сделанные Angular.

Ответ 5

Если вы хотите быть уверены, что ваш контент готов до момента создания снимка, grunt-html-snapshots будет ждать, пока селектор будет виден в вывод (с помощью jQuery ( ": visible" )) перед тем, как сделать снимок. Конкретные параметры конфигурации моментальных снимков найдены здесь.

Ответ 6

У меня было такое же требование, но мне нужен html из одного сеанса браузера. Простое решение заключалось в использовании element.innerHTML.

(Все еще думая, что было бы неплохо избавиться от всех атрибутов ng- * и других angular -специфических атрибутов.)