标准的 Angular 应用运行在 浏览器 中,在 DOM 中渲染页面,响应用户的操作。 而Angular Universal 会在 服务端 运行,生成一些 静态 的应用页面,通过客户端进行启动。 这意味着该应用的渲染通常会更快。
熟悉后台开发的朋友应该对服务器端渲染比较熟悉,Java、php 这些开发语言,使用它们开发后台管理系统,都有对应的模板引擎,前端发出请求,后台把数据和模板引擎结合起来,然后编译成 html 页面,把编译好的页面返回给浏览器,直接展现出来。
服务器端渲染就是在后台生成相应的静态页面,通过客户端启动。
1.新建项目
2.进入项目
3.创建服务器端应用模块
4.文件结构变化
运行项目,执行一下命令
可以感觉到,渲染速度提高了不少。
模拟网络比较慢的情况下的渲染速度
服务端渲染的应用仍然可以快速启动,但完整的客户端应用可能需要几秒钟才能加载完。
Universal 应用没有运行在浏览器上,因此不能使用浏览器特有的 api 和 一些特殊的能力。比如不能使用浏览器特有的全局对象,window、document、navigator 或者 location。
但是 Angular 提供了一套这些对象可注入的抽象层,比如 Location、DOCUMENT,他可以作为你所调用的 api 的等效替身。
同样,由于没有鼠标或者键盘事件,Universal 应用必须依靠客户端传递过来的请求决定要显示的内容。所以,把应用做成可路由的,是一种好方案。
Universal 应用中,发出的网络请求的地址必须是全路径的,不能使用相对路径。
Universal 模板引擎配置是在 server.ts 中,这个文件最重要的部分就是在 ngExpressEngine 这个函数
ngExpressEngine() 是对 Universal 的 renderModuleFactory() 函数的封装。它会把客户端请求转换成服务端渲染的 HTML 页面。 你还要在某个适用于你服务端技术栈的 模板引擎 中调用这个函数。
第一个参数是 AppServerModule。 它是 Universal 服务端渲染器和你的应用之间的桥梁。
第二个参数 extraProviders 是可选的。它能让你指定一些在服务端运行时特有的服务提供商。 只有当你的应用需要一些运行在服务器中才需要的信息时,才需要这么做。 比如这个运行中的服务器的源地址,当像前面例子中那样无法使用 Request 令牌时,可用它来计算 HTTP URL 的绝对地址。
这篇文章只是理论讲述,具体的实际用途将来在另一篇文章中讲解