> HTML文件被加载：< html>< body>< my-app> …< / my-app>< SCRIPTS />< / body>< / html>
>脚本已加载…
角度进程代码,并替换< my-app>与所有的好东西里面
对于这个应用程序：
@Component({
selector: 'my-app'
template: `<p *ngFor="let i of items">{{ i }}</p>`,})
export class AppComponent {
items = [1,2,3];
}
我可以看到检查html(plunker),看看：
<my-app>
<!--template bindings={
"ng-reflect-ng-for-of": "1,3"
}-->
<p>1</p>
<p>2</p>
<p>3</p>
</my-app>
一切清楚到目前为止！ (：
但是,先行者会怎么样？如果我创建一个这样的文件：
<html>
<body>
<my-app>
<!--template bindings={
"ng-reflect-ng-for-of": "1,3"
}-->
<p>1</p>
<p>2</p>
<p>3</p>
</my-app>
<SCRIPTS/>
</body>
</html>
一旦脚本加载,Angular会做什么？我可以使用这个html而不是第一个吗？如果有人明白这个过程是如何工作的,请分享(;有关这些内容的任何信息将会很有用)可以复制outerHTML,并将其“预渲染的页面”这样吗？
如果没有,为什么？我正在寻找这个过程的本质,一个可以手工编写的例子…
>在服务器端,您使用angular-universal渲染您的应用程序的任何视图给路由URL;
>在客户端上,您的应用程序正常启动,客户端渲染的视图被放入应用程序根标记中,并替换服务器呈现的视图.在客户端发生的唯一的魔法是将状态转移到通用项目的preboot.js模块的客户端应用程序,通过记录在服务器呈现的视图上触发的事件,然后在客户端呈现的视图之后重播它们该应用被加载.因此,如果在应用程序加载之前输入框中输入内容,则在客户端呈现的视图取代服务器渲染的视图后,将通过preboot.complete()命令重播按键.
你的问题：
What will Angular do once scripts are loaded?
您的应用正常启动,< my-app>< / my-app>的内容标签被客户端呈现的视图替换.
Can I Copy outerHTML,and make that my “prerendered page”?
是.但是,使用角度通用模块是可取的,因此您可以在任何路线后面动态渲染视图.
至于样本,这里是Angular 2 Universal Starter,它是一个示范应用程序,演示了通用的操作.玩它：
>更改字符串’这是从服务器呈现！在dist / server / index.js中,看到它在应用程序加载时被还原.这意味着在呈现客户端视图之后,该声明成为谎言.
>启用预引导并推迟preboot.complete()以查看它在操作中(在输入框中输入内容)：
SRC / main.node.ts
let config: ExpressEngineConfig = {
// ...
preboot: { appRoot: 'app' } // your top level app component selector
};
SRC / client.ts
ngApp()
.then(function() {
setTimeout(function() {
preboot.complete();
},5000);
});
在这里,客户端上预先启动的“预渲染”视图的简单DEMO.在应用程序引导之前有一个5秒的延迟时间来查看预启动的操作.
我没有角色2的专家,所以,如果我错了,请纠正我.我以下列资源为依据：
> Angular universal repo
> Universal design doc
> Universal starter
> Angular universal in practice
