プリレンダリングは実際にどのように機能しますか？

サーバーサイドのレンダリングに関するリソースが不足しています。実際、実際にどのように動作するかを明確に説明するものは見つかりませんでした。私はいくつかのリポジトリを見て、コードに従おうとしましたが、その要点を把握することはできませんでした。 ... <html><body><my-app>...</my-app><SCRIPTS/></body></html> プリレンダリングは実際にどのように機能しますか？

スクリプトがロードされている

角度のプロセスコードを、内部のすべてのグッズで<my-app>を置き換える：

HTMLファイルがロードされています。私は、通常の角度を実行した場合、私は何が起こるか基本的に知っています。

<my-app> 
    <!--template bindings={ 
    "ng-reflect-ng-for-of": "1,2,3" 
    }--> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
</my-app>

をすべて明確にこれまで私は、HTML（plunker）を検査し、見る見ることができます

@Component({ 
    selector: 'my-app' 
    template: `<p *ngFor="let i of items">{{ i }}</p>`, 
}) 
export class AppComponent { 
    items = [1, 2, 3]; 
}

：このアプリのために

！（：

しかし、私はこのようなファイルを作成する場合は事前レンダリングで発生します：？

<html> 
<body> 
    <my-app> 
    <!--template bindings={ 
     "ng-reflect-ng-for-of": "1,2,3" 
     }--> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    </my-app> 
    <SCRIPTS/> 
</body> 
</html>

スクリプトがロードされると角度は何をします誰かが理解している場合、私は、このHTMLの代わりに、最初のものを使用することはできますか？？

：このようなものについてのすべての情報は有用であろう...することができます私のコピーouterHTML、このように...私の「レンダリング済みのページ」ことを確認、このプロセスがどのように働くか、（共有してください！

そうでない場合、なぜですか？私は、サーバー側でアプリをレンダリングするためにangular2-universal-previewを使用するために持っていると思う...プロセスの本質、手作業で符号化することができ、たとえば

出典

2016-06-19 Sasxa

を探しています：

import * as express from 'express'; 
    import {ng2engine} from 'angular2-universal-preview'; 

    // Angular 2 
    import {App} from './src/app'; 

    let app = express(); 

    // Express View 
    app.engine('.ng2.html', ng2engine); 
    app.set('views', __dirname); 
    app.set('view engine', 'ng2.html'); 


    // static files 
    app.use(express.static(__dirname)); 


    app.use('/', (req, res) => { 
     res.render('index', { App }); 
    }); 



    app.listen(3000,() => { 
     console.log('Listen on http://localhost:3000'); 
    });`

出典

2016-06-19 07:54:36 AngJobs

'Universal'が私たちのために仕事をしてちょうどツーリングで、」doesnのAngularの理解を助けます。ユニバーサルなしでどのようにプリレンダーしますか？それともサーバーなしで... – Sasxa

サーバーサイドのレンダリングでは、ページはレンダリングされます：サーバー上では、レンダリングされたビューを非常に早く見ることができます。

サーバー側では、angular-universalを使用して、ルートURLを指定してアプリの任意のビューをレンダリングします。
クライアントでは、アプリは通常のようにブートストラップされます。クライアントレンダリングビューはアプリルートタグに入れられ、サーバレンダリングビューはに置き換えられます。クライアント側で起こっている唯一の魔法は、汎用プロジェクトのpreboot.jsモジュールによってクライアントアプリケーションに状態を転送することです。これは、サーバレンダリングビューでトリガされたイベントを記録し、その後、クライアントレンダリングビューで再生しますアプリが読み込まれます。したがって、アプリケーションがロードされる前にinputボックスに何かを入力すると、クライアントレンダリングビューがサーバーレンダリングビューに置き換えられた後、preboot.complete()コマンドによってキーストロークが再生されます。

ご質問：

スクリプトがロードされると角度は何をしますか？

あなたのアプリは正常にブートストラップされ、<my-app></my-app>タグの内容はクライアントレンダリングビューに置き換えられます。

outerHTMLをコピーして、「プリレンダリングされたページ」にすることはできますか？

はい。ただし、代わりにangular-universalモジュールを使用することが望ましいため、ルートの後ろにビューを動的にレンダリングできます。

サンプルについては、Angular 2 Universal Starterがあります。これは普遍的な動作を実証するサンプルアプリです。それを再生する：

変更dist/server/index.js内の文字列'This was rendered from the server!'アプリがロードされたとき、それが戻って戻っています参照してください。これは、クライアントビューがレンダリングされた後でそのステートメントがうそになることを意味します。

prebootを有効にして、アクション（inputボックスにタイプのもの）でそれを見るためにpreboot.complete()を延期：SRC/client.ts

let config: ExpressEngineConfig = { // ... preboot: { appRoot: 'app' } // your top level app component selector };

のsrc/main.node.ts

ngApp() .then(function() { setTimeout(function() { preboot.complete(); }, 5000); });

ここでは、クライアント上でプリブートされた静的に提供されたプレレンダリングビューの単純なDEMOが表示されます。 appがブートストラップされる前に5秒間の遅延があり、プレブートの実際の動作を確認できます。

私は角度2の専門家ではありませんので、間違っている場合は、私に修正してください。私は、次のリソースを読めば私の判断の基礎：

Angular universal repo

Universal design doc

Universal starter

Angular universal in practice

出典

2016-06-19 15:36:49

ありがとう@アレック。私はそれらのリソースも読んだり、少なくともスキミングしたりしましたが、ほとんどのものは**ありません**どうやって***なのですか？***。私はノードサーバー側ではうまくいきませんでした。そのため、ユニバーサルがうまくいけない理由のもう1つです。 P – Sasxa

今のところ私は***に興味があるので、非常に早いうちにレンダリングされたビュー***を見ることができます。私は今コピー＆ペーストを試してみましょう。*クライアントレンダリングされたビューがアプリのルートタグに入れられ、サーバレンダリングビューを置き換えることを期待しています*事はひどく間違っていません（： – Sasxa

）サーバーを必要としていますか？静的なホスト**を持っていれば何ができますか？ – Sasxa

プリレンダリングは実際にどのように機能しますか？

答えて

関連する問題