web-dev-qa-db-ja.com

Angularテンプレート作成後のページソース（HTMLスナップショット）のキャプチャ

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

次のようなコンテンツのWebページがある場合：

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

そして、私は「メッセージ」のモデルを次のように設定しました

$scope.message = "Hello world!"

次に、画面にdivの内容が次のように表示されます。

Hello world!

しかし、Chrome=またはFirefoxでソースを表示すると、ソースはまだこのように見えます

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

Angularテンプレート化した後、ページのソースをキャプチャする方法はありますか？

<div>Hello world!</div>

たとえば、私がAngularを使用してテンプレートを支援するプロジェクトで作業しているが、クライアントが角度のないHTMLの最終ページを希望している場合、どうすればHTMLをキャプチャできますか？このクライアントに与えるためにテンプレートが適用された後のページ数は？

angularjsangular-template
19
Code Whisperer

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

これは、ページのHTMLスナップショットを取得する面倒なタスクです。ファントムと呼ばれる「偽の」または「ヘッドレス」ブラウザでページを実行し、JavaScriptを実行して、レンダリングされたHTMLを保存します。

これを行うためにGruntをセットアップする手順を以下に示します。

  1. http://nodejs.org からnode.jsをインストールします-これにより、nodeおよびnpm（ノードパッケージマネージャー）がインストールされます。 Gruntはnpmで利用できます。
  2. コマンドラインを開き、プロジェクトフォルダーに移動します。
    • Windowsの場合：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
  3. npm install -g grunt-cliを実行して、gruntコマンドラインツールをグローバルにインストールします。
  4. npm install grunt grunt-html-snapshotを実行して、プロジェクトに実行する必要のあるすべてのgruntのローカルコピーをプロジェクトにインストールし、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ページ を参照してください。

35
Andrew Joslin

ラングドンが言ったように、Chromeで十分です。Chromeのインスペクタの[HTMLとして編集]オプションを使ってなんとかできました。

まず、ページ（これ以降PAGE_ORIGINAL）を「Webページ、完了」として保存します。 （保存されたページはPAGE_COPYと呼ばれます。）

  1. Chrome=を開き、PAGE_ORIGINALの要素を検査します。インスペクターが開きます。
  2. PAGE_ORIGINALのソースコードのbodyタグを右クリックし、[HTMLとして編集]を選択して、タグとその中のすべてをコピーします。
  3. bodyとPAGE_COPYの内容を、コピーした内容に置き換えます。
  4. Angularを削除して、PAGE_COPYで参照を削除します。

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

6
jsruok

従来の意味で「ソースを表示」して、Angularによって変更されたHTMLを表示する方法はありません。これは、ソースの表示にサーバーからのソースが表示され、Angularがサーバーから既にロードされているマークアップに変更を加えるだけだからです。

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

4
Langdon

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

3
pors

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

（それでも、すべてのng- *属性と他の角度固有の属性を取り除くのは良いことだとまだ考えています。）

2
Oran Fry

スナップショットが作成される前にコンテンツの準備が整っていることを確認したい場合、 grunt-html-snapshots はセレクターが出力に表示されるまで待機します（jQuery is（ "：visible"）を使用）スナップショットを撮る前。特定のスナップショット構成オプションが見つかります ここ 。

1
Alex Grant