キャプチャページのソース（HTMLスナップショット）

Question

クイックangular.js質問...

私はこのような内容を含むWebページがある場合：

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

を私はするためのモデルを設定

$scope.message = "Hello world!" 

は、画面に、DIVの内容は

として表示されるように、「メッセージ」

Hello world! 

しかし、私は見たとき、私はクロームやFirefoxでソースを表示する場合、ソースはまだこの

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

のように見える角度テンプレートの後にページのソースをキャプチャする方法はありますので、私はテンプレートを手伝ってアンギュラ使用していますが、クライアントがいない角度とHTMLの最後のページをしたいと思い、どのように私はキャプチャすることができ、プロジェクトに取り組んでいた場合、私は、例えば

<div>Hello world!</div> 

を参照してくださいソーステンプレート作成後のページのHTMLこのクライアントに与えるために適用されましたか？

Answer 1

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

これは、ページのHTMLスナップショットを取る面倒な作業です：それは、その後は、Javascriptの実行を行い、「偽」またはphantomjsいわゆる「ヘッドレス」のブラウザでページを実行しますレンダリングされたHTMLを保存します。 - これはあなたのためnodeとnpm（ノードパッケージマネージャ）をインストールします

1. http://nodejs.orgからのNode.jsをインストールします。ここでは

   は何もないから、これを行うには、セットアップの兵卒へのステップ、です。グランはnpmで利用可能です。

2. コマンドラインを開いて、プロジェクトフォルダに移動します。 Windows上
   • ：cd c:/myprojects/superproject
   • Mac上：Linux上でcd /Users/itcouldevenbeaboat/myprojects/superproject
   • ：グローバルイサキコマンドラインツールをインストールするには、i hope you know how to do this already if you use linux :D
3. 実行npm install -g grunt-cli。
4. npm install grunt grunt-html-snapshotを実行して、プロジェクトに必要な、プロジェクトに必要なすべてのファイルと、htmlスナップショットタスクのローカルコピーをインストールします。

5. スーパーシンプルな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']); 
   }; 
   

6. 実行grunt、それはあなたが最初のサーバー上のウェブサイトのアップを開始する必要があるかもしれません:-)

スナップショットを作成しますGruntfileにsitePathを設定して、正しく動作するようにします。

スナップショットの設定に関するヘルプが必要な場合は、grunt-html-snapshot pageをご覧ください。

Answer 2

伝統的な意味で「ソースを表示する」方法はありませんし、Angularで修正されたHTMLを見ることもできません。これは、ビューソースがサーバーからのソースを表示し、Angularが既にサーバーからロードされたマークアップのみを変更するためです。

FireFoxには、Chromeのインスペクタ（F12）やFireBug（それでもまだ存在しますか？）を使用してください。 ChromeのインスペクタとFireBugには、「アクティブな」ソース、またはHTMLが表示されているときの外観が表示されます。

Answer 3

grunt-html-snapshotsは、スナップショットを作成する前にコンテンツが準備完了であることを確認したい場合は、スナップショットを取得する前にセレクタが出力に表示されるまで待ちます（「：visible」）。特定のスナップショット構成オプションはhereです。

Answer 4

Firefoxでは、組み込みの開発ツールを使用して、「インスペクタ」を選択するだけです。これにより、Angularの変更を含む現在のDOMが得られます。

Answer 5

Langdonが言ったように、Chromeが行います。私はこれをChromeのインスペクタの「HTMLとして編集」オプションで処理することができました。

まず、ページを（現在はPAGE_ORIGINALに）「ウェブページ、完了」として保存します。 （保存されたページはPAGE_COPYと呼ばれます）

1. Chromeを開いてPAGE_ORIGINALの任意の要素を調べます。インスペクタが開きます。
2. PAGE_ORIGINALのソースコードの本文タグを右クリックし、[HTMLとして編集]を選択し、タグ内のすべてをコピーします。
3. 本文とその内容をPAGE_COPYにコピーしたものを置き換えてください。
4. PAGE_COPYの参照を削除して角を削除します。

私のために働きました。 :-)（私はLangdonの答えにコメントをしようとしましたが、十分な担当者がいませんでした）

Answer 6

同じ要件がありましたが、同じブラウザセッション内からhtmlが必要でした。簡単な解決策は、element.innerHTMLを使用することでした。

（まだしかし、すべてのng- *属性と他の角度固有の属性を取り除くためにいいだろう考えて。）