Capturing Seite Quelle (HTML Snapshot) Nach Angular Templating

Schnell Angularjs Frage ...Capturing Seite Quelle (HTML Snapshot) Nach Angular Templating

Wenn ich eine Webseite mit Inhalten wie dieses:

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

Und stelle ich das Modell für ‚Nachricht‘, so dass

$scope.message = "Hello world!"

Dann auf dem Bildschirm, wird der Inhalt des div als

angezeigt

Hello world!

Aber wenn ich die Quelle in Chrome oder Firefox zu sehen, sieht die Quelle immer noch wie diese

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

Gibt es eine Möglichkeit, die Quelle einer Seite nach Angular Templat zu erfassen, so dass, wenn ich sehe die Quelle ich sehe

<div>Hello world!</div>

zum Beispiel, wenn ich an einem Projekt arbeite, wo ich Angular bin mit mir mit dem Templat zu helfen, aber der Client würde die letzten Seiten in HTML ohne Winkel mag, wie könnte ich das erfassen HTML von Seiten nach dem Templating wurde angewendet, um diesem Kunden zu geben?

Quelle

2013-05-13 Code Whisperer

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

Dies ist ein Grunzen Aufgabe, die einen HTML-Snapshot einer Seite nimmt: es wird die Seite in einem „falschen“ oder „kopflos“ Browser, genannt PhantomJS, macht einen Lauf des Javascript läuft, dann Speichern Sie den gerenderten HTML-Code für Sie.

Hier sind Schritte zum Einrichten Grunt, dies zu tun, aus dem Nichts:

installiert node.js von http://nodejs.org - die node und npm (Knoten Paket-Manager) für Sie installieren. Grunt ist am npm verfügbar.
Öffnen Sie die Befehlszeile und navigieren Sie zu Ihrem Projektordner.
- an Fenstern: cd c:/myprojects/superproject
- Mac OS X: cd /Users/itcouldevenbeaboat/myprojects/superproject
- Unter Linux: i hope you know how to do this already if you use linux :D
Run npm install -g grunt-cli Tools Grunzen Befehlszeile global zu installieren.
Führen Sie npm install grunt grunt-html-snapshot aus, um eine lokale Kopie aller Dateien von grunt, die zum Ausführen in einem Projekt benötigt werden, in Ihrem Projekt und der HTML-Snapshot-Aufgabe zu installieren.

Erstellen Sie eine super einfache Gruntfile.js in Ihrem Projektstamm mit diesen Inhalten:

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']); 
};

Run grunt in Ihrem Projektstamm, und es wird einen Snapshot erstellen :-)

Möglicherweise müssen Sie Ihre Website auf einem Server starten zuerst , und legen Sie sitePath in der Gruntdatei fest, um darauf zu verweisen, damit es ordnungsgemäß funktioniert.

Schauen Sie sich die grunt-html-snapshot page an, wenn Sie Hilfe bei der Snapshot-Konfiguration benötigen.

Quelle

2013-05-13 14:53:39

Danke, das ist natürlich eine sehr gute und gut qualifizierte Antwort, aber ich habe auf etwas weniger technisches für jemanden gehofft, der nicht weiß, wie man grunzen soll. –

OK, bearbeitet und hinzugefügt Schritte für Sie :-) –

Wahrlich, eine Antwort, die darüber hinaus geht! –

Es gibt keine Möglichkeit, "Quelle anzeigen" im herkömmlichen Sinne und HTML von Angular geändert zu sehen. Das liegt daran, dass View Source die Quelle vom Server anzeigt und Angular nur Änderungen am Markup vornimmt, das bereits vom Server geladen wurde.

Was möchten Sie tun, ist Chrome-Inspektor (F12) oder FireBug (vielleicht? Ist das noch vorhanden) in FireFox. Der Inspector von Chrome und FireBug zeigen Ihnen die "aktive" Quelle oder wie der HTML-Code zu dem Zeitpunkt aussieht, zu dem Sie ihn ansehen.

Quelle

2013-05-13 14:46:16 Langdon

ich in der Lage war, diese Strategie einige Ergebnisse zu erhalten verwenden, auf jeden Fall keine schlechte Antwort. –

Wenn Sie sicher sein möchten, dass Ihr Inhalt bereit ist, bevor der Snapshot erstellt wird, wartet grunt-html-snapshots, bis ein Selektor in der Ausgabe sichtbar ist (mit jQuery is (": visible")), bevor der Snapshot erstellt wird. Spezifische Snapshot-Konfigurationsoptionen sind here gefunden.

Quelle

2013-08-22 00:20:26

Verwenden Sie in Firefox einfach die integrierten Entwicklerwerkzeuge und wählen Sie "Inspector". Dadurch erhalten Sie das aktuelle DOM einschließlich der von Angular vorgenommenen Änderungen.

Quelle

2013-12-17 15:47:11 pors

Wie Langdon sagte, wird Chrome tun. Das habe ich mit der Option "Als HTML bearbeiten" von Chrome erledigt.

Speichern Sie zuerst die Seite (von nun an PAGE_ORIGINAL) als "Webseite, fertig". (Gespeicherte Seite wird als PAGE_COPY bezeichnet.)

Öffnen Sie Chrome und überprüfen Sie jedes Element auf PAGE_ORIGINAL. Der Inspektor öffnet sich.
Klicken Sie mit der rechten Maustaste auf PAGE_ORIGINALs Quellcode body Tag, wählen Sie "Als HTML bearbeiten" und kopieren Sie das Tag und alles darin.
Ersetzen Sie Körper und seinen Inhalt auf PAGE_COPY mit, was Sie gerade kopiert haben.
Entfernen Sie Angular, indem Sie Referenzen auf PAGE_COPY löschen.

Arbeitete für mich. :-) (Ich habe versucht, Langdon's Antwort zu kommentieren, aber nicht genug Rep.)

Quelle

2014-07-02 06:43:20 jsruok

Ich hatte die gleiche Anforderung, aber ich brauchte den HTML-Code innerhalb derselben Browsersitzung. Die einfache Lösung war die Verwendung von element.innerHTML.

(Still dachte, es wäre schön, wenn alle der ng- * Attribute und andere Winkelspezifische Attribute loszuwerden.)

Quelle

2014-10-17 03:20:28

Capturing Seite Quelle (HTML Snapshot) Nach Angular Templating

Antwort

Verwandte Themen