19

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 をキャプチャするにはどうすればよいですか?このクライアントに与える？

4

6 に答える 6

35

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

これは、ページの HTML スナップショットを取得する単調なタスクです。phantomjs と呼ばれる「偽の」または「ヘッドレス」ブラウザでページを実行し、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すると、スナップショットが作成されます:-)

最初にサーバー上で Web サイトを起動し、Gruntfile で sitePath を設定して正しく機能させる必要がある場合があります。

スナップショットの構成についてサポートが必要な場合は、grunt-html-snapshot ページを参照してください。

于 2013-05-13T14:53:39.367 に答える
6

ラングドンが言ったように、クロムはそうします。Chromeのインスペクターの「HTMLとして編集」オプションを使用して、これを行うことができました。

最初にページ (以降 PAGE_ORIGINAL) を "Webpage, complete" として保存します。(保存されたページは PAGE_COPY と呼ばれます。)

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

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

于 2014-07-02T06:43:20.743 に答える
4

従来の意味で「ソースを表示」して、Angular によって変更された HTML を確認する方法はありません。これは、ソースを表示するとサーバーからのソースが表示され、Angular はサーバーから既に読み込まれているマークアップのみを変更するためです。

やりたいことは、FireFox で Chrome のインスペクター (F12) または FireBug (おそらくまだ存在しますか?) を使用することです。Chrome のインスペクターと FireBug は、「アクティブな」ソース、または HTML を表示しているときにどのように見えるかを示します。

于 2013-05-13T14:46:16.947 に答える
3

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

于 2013-12-17T15:47:11.647 に答える
2

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

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

于 2014-10-17T03:20:28.533 に答える
1

スナップショットを取得する前にコンテンツの準備ができていることを確認したい場合、grunt-html-snapshotsはスナップショットを取得する前に (jQuery is(":visible") を使用して) セレクターが出力に表示されるまで待機します。特定のスナップショット構成オプションは、ここにあります。

于 2013-08-22T00:20:26.297 に答える