Angular Universal相关整理

[JTangming]

服务器端渲染流程

预渲染流程：

使用构建工具生成静态 HTML ；
将生成的 HTML 部署到 CDN 服务器；
CDN 提供服务器视图；
服务器视图到客户端视图转换（见下文）

服务器重绘流程：

HTTP GET 请求发送到服务器;
服务器生成一个包含渲染的 HTML 和内联 JavaScript 的以便“Preboot”的页面（可以选择添加序列化数据进行缓存）；
服务器视图到客户端视图转换（见下文）

服务器视图到客户端视图转换流程：

浏览器从服务器接收初始化 payload；
用户看到服务器视图；
Preboot 创建隐藏的 div 以用于客户端初始化并开始记录事件；
浏览器对其他资源进行异步请求（如 image，css 等）；
一旦加载完外部资源，Angular 客户端初始化开始；
客户端视图呈现给由 Preboot 创建的隐藏 div；
初始化完成后，Angular 客户端调用 preboot.done()；
为了调整应用程序状态以反映用户在 Angular 初始化完成之前所做的更改（如 click 事件等），Preboot 事件将被重播；
Preboot 切换隐藏的客户端视图 div 为可见的服务器视图 div；
最后，Preboot 在可见的客户端视图上执行一些清理，包括设置焦点

Angular Universal相关整理

• 新版 Universal 支持的设计文档：https://docs.google.com/document/d/1eGEq0N7czS8nWWuCV3n4eMF3GFzk88rsN0bll6yE0bE/edit#
• 新版 Universal 路线图的 Github 讨论：
  http://link.zhihu.com/?target=https%3A//github.com/angular/angular/issues/13822
• PlatformServer 模块增加 Location 支持的 Commit：
  http://link.zhihu.com/?target=https%3A//github.com/angular/angular/commit/9e28568a8f7936ce165d359c21317fdcc0dd1669
• PlatformServer 模块增加 Public API 的 Commit：
  http://link.zhihu.com/?target=https%3A//github.com/angular/angular/commit/b4d444a0a7ee2c2b31b691d03b93368d1edd1572
• PlatformServer 模块增加多实例支持的 Commit：
  http://link.zhihu.com/?target=https%3A//github.com/angular/angular/commit/17486fd696a49fd2d11fe295ec5add8bb44fb398
• PlatformServer模块增加 Http 支持的 Commit：
  http://link.zhihu.com/?target=https%3A//github.com/angular/angular/commit/9559d3e949ef551dca9cc63b1459898f5a9e4af4
• Angular v4 Universal Demystified
  https://medium.com/@feloy/angular-v4-universal-demystified-f06a576d6ca2
• Angular Universal Roadmap for Angular 4.0
  Angular Universal Roadmap for Angular 4.0 angular/angular#13822