angularjs - cloak - Capturar el origen de la página(instantánea HTML) después de la plantilla de plantillas angulares

ng-init

Question

Pregunta angular.js rápida ...

Si tengo una página web con contenido como este:

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

Y establezco el modelo para ''mensaje'' tal que

$scope.message = "Hello world!"

Luego en la pantalla, el contenido del div se mostrará como

Hello world!

Pero si veo la fuente en Chrome o Firefox, la fuente todavía se ve así.

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

¿Hay alguna forma de capturar la fuente de una página después de la creación de plantillas angulares, de modo que cuando veo la fuente veo

<div>Hello world!</div>

Por ejemplo, si estoy trabajando en un proyecto en el que estoy usando Angular para ayudarme con las plantillas, pero el cliente desea las páginas finales en HTML sin ángulo, ¿cómo podría capturar el HTML de las páginas después de haber aplicado la plantilla a dar a este cliente?

Answer 1

Como dijo Langdon, Chrome lo hará. Logré hacer esto a través de la opción "Editar como HTML" del Inspector de Chrome.

Primero guarde la página (a partir de ahora en PAGE_ORIGINAL) como "Página web, completa". (La página guardada se referirá como PAGE_COPY.)

1. Abre Chrome e inspecciona cualquier elemento en PAGE_ORIGINAL. El inspector se abrirá.
2. Haga clic derecho en la etiqueta del cuerpo del código fuente de PAGE_ORIGINAL, elija "Editar como HTML", y copie la etiqueta y todo lo que contiene.
3. Reemplace el cuerpo y su contenido en PAGE_COPY con lo que acaba de copiar.
4. Elimine Angular eliminando las referencias a él en PAGE_COPY.

Trabajó para mi. :-) (Intenté comentar sobre la respuesta de Langdon, pero no tuve suficiente reputación)

Answer 2

En Firefox, simplemente use las herramientas de desarrollador integradas y seleccione "Inspector". Esto le da el DOM actual, incluidos los cambios realizados por Angular.

Answer 3

No hay manera de "ver la fuente" en el sentido tradicional y ver HTML modificado por Angular. Esto se debe a que la fuente de vista mostrará la fuente del servidor y Angular solo está realizando cambios en el marcado ya cargado desde el servidor.

Lo que quieres hacer es usar el inspector de Chrome (F12) o FireBug (quizás? Todavía existe) en Firefox. El inspector de Chrome y FireBug te mostrarán la fuente "activa", o cómo se ve el HTML en el momento en que lo estás viendo.

Answer 4

Si desea estar seguro de que su contenido está listo antes de tomar la instantánea, grunt-html-snapshots esperará hasta que aparezca un selector en la salida (el uso de jQuery es (": visible")) antes de tomar la instantánea. Las opciones específicas de configuración de instantáneas se encuentran here .

Answer 5

Tenía el mismo requisito, pero necesitaba el html desde la misma sesión del navegador. La solución simple fue usar element.innerHTML.

(Aún pensando que sería bueno deshacerse de todos los atributos ng- * y otros atributos angulares específicos).

Answer 6

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

Esta es una tarea complicada que toma una instantánea HTML de una página: ejecutará la página en un navegador "falso" o "sin cabeza", llamado phantomjs, hará una ejecución del javascript y luego guardará el HTML renderizado para usted.

Aquí hay pasos para configurar Grunt para hacer esto, de la nada:

1. Instale node.js desde http://nodejs.org : esto instalará node y npm (administrador de paquetes de nodos) para usted. Grunt está disponible en npm.
2. Abra su línea de comando y navegue a la carpeta de su proyecto.
   • En windows: cd c:/myprojects/superproject
   • En mac: cd /Users/itcouldevenbeaboat/myprojects/superproject
   • En linux: i hope you know how to do this already if you use linux :D
3. Ejecute npm install -g grunt-cli para instalar las herramientas de línea de comandos de grunt globalmente.
4. Ejecute npm install grunt grunt-html-snapshot para instalar una copia local de todos los archivos necesarios para ejecutar en un proyecto de grunt para su proyecto y la tarea de instantáneas html.

5. Cree un Gruntfile.js super simple en la raíz de su proyecto con estos contenidos:

   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. Ejecute grunt en la raíz de su proyecto, y tomará una instantánea :-)

Es posible que deba iniciar su sitio web en un servidor primero, y configurar sitePath en el archivo Gruntfile para que funcione correctamente.

Mire la página de https://github.com/cburgdorf/grunt-html-snapshot si necesita ayuda con la configuración de la instantánea.