你的位置:首页 > 软件开发 > Java > Angular Universal(统一平台)笔记

Angular Universal(统一平台)笔记

发布时间:2017-04-25 00:00:24
angular官网高级文档AngularUniversal部分的翻译总结,这东西在angular4开始正式被官方支持了,目前其实支持的服务器端还没有很多,但好歹包括了node和DotNetCore,算是个进一步优化应用以及扩展需求(强化服务端能力)的方案。正文开始:------- ...

Angular Universal(统一平台)笔记

angular官网高级文档AngularUniversal部分的翻译总结,这东西在angular4开始正式被官方支持了,目前其实支持的服务器端还没有很多,但好歹包括了node和DotNetCore,算是个进一步优化应用以及扩展需求(强化服务端能力)的方案。

正文开始:

------------------- 手动分割线 ---------------------

注意: 本文属于实验性质,可能会更改。

Angular 统一平台

目录

  • 概述
    • 如何工作
    • 为何这么做
      • SEO / 无JavaScript
      • 启动性能
    • 例子
  • 准备
    • 安装工具
    • 相对组件的URL
    • 服务端转换
  • AOT配置
    • 主入口
    • 创建teconfig-aot.json
    • webpack配置
      • 加载器
      • 插件
      • 输入
      • 输出
  • AOT构建
    • 源映射
    • AOT服务端
  • 统一平台配置
    • 服务端代码
      • 应用服务器模块
      • Universal引擎
      • Web服务器
    • 创建tsconfig-uni.json
    • 创建webpack.config.uni.js
      • 入口
      • 输出文件
  • Universal的构建与服务
    • 运行
      • 禁用客户端App
      • 节流
  • 总结

一、概述

Angular统一平台(Universal)是一项让angular应用运行在浏览器之外的技术。使用Universal你可以运行你的angular应用在一个基于node的服务器中,你可以用它来按需生成html输出或预先生成html文件。

如何工作

angular统一平台通过编译app来让其能运行在服务器端,也可以是预先在服务器端编译好(AOT编译)。这跟传统的AOT不同因为应用是使用platform-server来编译而不是platform-browser。这一更改会让app有能力在服务端先渲染好HTML字符串而不是在浏览器端操作DOM。Angular Universal(统一平台)笔记

示例

AOT与Universal版本的app都通过AOT编译器来编译。区别是AOT版本将编译好的打包文件发送到客户端,而Universal版本则是编译到一个服务端页面,渲染成实际界面后才发送到浏览器。

二、准备

安装工具

需要安装以下依赖:

  • npm install @angular/compiler-cli @angular/platform-server --save-dev
  • npm install webpack @ngtools/webpack raw-loader express --save-dev

组件相对路径

Angular Universal(统一平台)笔记

服务端转换

Angular Universal(统一平台)笔记

三、AOT配置

普通的AOT加Webpack配置略过

四、AOT构建

即 npm run build:aot

2. Universal引擎

Angular Universal(统一平台)笔记

3. web服务器

Angular Universal(统一平台)笔记Angular Universal(统一平台)笔记

差不多就是在express服务器上引导angular模块并渲染到index-aot.html,将页面返回给浏览器呈现。

七、构建与服务

即使用npm run build:uni这些指令来构建,以及使用npm指令运行express服务器监听端口。

八、总结

angular Universal可以极大的加快应用的启动速度与优化体验。网络越慢能得到的好处越大(首次加载)。


原标题:Angular Universal(统一平台)笔记

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录