角度 – 前瞻者如何实际工作？

服务器端渲染上的资源很少,实际上,我找不到任何明确说明事情如何工作的东西.我看到了一些repos,试图遵循代码,但并没有弄清楚它的要点.如果我正常运行角度,我基本知道会发生什么：

> 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

原文地址：https://www.jb51.cc/angularjs/140783.html

角度 – 前瞻者如何实际工作？

相关推荐