码迷,mamicode.com
首页 > 其他好文 > 详细

angular2版本迭代之特性追踪

时间:2018-06-20 21:19:26      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:compile   rms   14.   add   升级   ram   ima   element   browser   

# 2.0.0 — 2.4

升级前:

1、确保没有使用extends关键字实现OnInit的继承,以及没有用任何的生命周期中,而是全部改用implements。

2、停止使用deep imports,这些符号不再是公共api的一部分。

3、停止使用Renderer.invokeElementMethod,因为该方法已被删除,目前没有其他的替换方案。

4、停止使用DefaultIterableDiffer,KeyValueDiffers#factories, 或 IterableDiffers#factories

升级期间:

更新你项目中所有angular相关依赖包到最新版本,如果你是使用的 Linux/Mac,可以使用如下命令升级:

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@‘^2.0.0‘ typescript@‘>=2.1.0 <2.4.0‘

升级后:

目前没有建议的操作

# 2.4 — 4.4

升级前:

1、确保没有使用extends关键字实现OnInit的继承,以及没有用任何的生命周期中,而是全部改用implements。
2、停止使用deep imports,这些符号不再是公共api的一部分。

3、停止使用Renderer.invokeElementMethod,因为该方法已被删除,目前没有其他的替换方案。

4、停止使用DefaultIterableDiffer,KeyValueDiffers#factories, 或 IterableDiffers#factories

升级期间:

如果你在应用中使用了ng动画,需要在你应用的跟模块(NgModule)添加以下引入:import BrowserAnimationsModule from @angular/platform-browser/animations。

angular4+增加了一个novalidate属性给表单元素,当你引入FormsModule时,为了使原生表单的功能生效,需要使用ngNoForm或者增加ngNativeValidate属性标识(备注:novalidate 属性是一个布尔属性。是h5的一个新属性,novalidate 属性规定当提交表单时不对表单数据(输入)进行验证)

用RendererFactoryV2替换RootRenderer

If you use Animations and tests, add mods[1].NoopAnimationsModule to your TestBed.initTestEnvironment call.

更新你项目中所有angular相关依赖包到最新版本,如果你是使用的 Linux/Mac,可以使用如下命令升级

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@^4.4.0 typescript@‘>=2.1.0 <2.4.0‘

升级后:

将template重命名为ng-template。(备注:从angular4+开始,<template>将会被删除,因为template太通用了,导致了一些命名上的冲突,所以现在angular团队决定以ng作为名称的前缀)

用InjectionToken替换掉所有的OpaqueToken

如果你调用了DifferFactory.create(...),删除ChangeDetectorRef 参数。

停止给ErrorHandler构造函数传任何参数。

如果你使用了ngProbeToken,请确保执行了依赖的引入( import ngProbeToken from @angular/core instead of @angular/platform-browser)

如果你在使用TrackByFn,请用TrackByFunction替换它。

如果你引入了任何的动画服务或工具,需要从额外的动画依赖包导入(import xxx from @angular/animations)。

用ngTemplateOutletContext替换掉ngOutletContext。

用IterableChangeRecord替换掉CollectionChangeRecord。

使用Renderer2替换掉Renderer。

使用queryParamsHandling代替preserveQueryParams。

从HttpModule和Http服务切换到HttpClientModule和HttpClientservice,HttpClient简化了默认的人机工程学(你不再需要映射到json),并且现在支持类型返回值和拦截器。详见angular.io。

如果你从@angular/platform-browser中引入了DOCUMENT的使用,现在需要改成从@angular/common引入(即import this from @angular/common)

 

# Angular4升级点及新特性:

一、改进

1、体积更小,速度更快:

Angular应用程序变得更小更快,并且在未来几个月将进一步改进框架。

2、更好的模版引擎:

改进了AoT,将生成的代码的大小减少约60%。如果模板越复杂,那么优化的代码也会越多

3、动画模块改进:

Angular将动画部分从@angular/core拆分出来,单独打包。将核心模块精简后,在不使用动画时产品中将不包含冗余的动画代码。如果需要动画,可使用相关功能自行导入

新版本中的模板对于绑定语法做了些修改,将支持开发者使用if/else类型的语法,并支持在展开Observable(可观察对象)等代码中分配局部变量

二、新特性

1、增强 ngIf 和 ngFor 语法

模板绑定语法进行了几个有用的更改。现在可以使用if / else样式语法,并分配局部变量,例如在展开observable时

2、服务端渲染(Angular Universal)

原先的Angular Universal是社区人员维护的,后被angular官方采用。目前在4.0.0版本中,将大部分的代码集成在@angular/platform-server模块中。为大家带来更好的服务端渲染体验,更简单Api调用。请参见基于Angular4的服务端渲染demo: https://github.com/z827101859/angular-universal 。之后,官方会为大家带来更好更全面的例子。

3、TypeScript 2.1 和 2.2 的兼容

Angular已更新为更新版本的TypeScript,提高了ngc的速度,并且有更好的类型检查机制

4、模板的Source Maps

当模板中的某些内容发生错误时,Angular会生成源映射,从而为原始模板提供有意义的上下文。

# 其他

1、兼容性:该版本向后兼容大多数应用中的2.x.x系列

2、为什么跳过Angular 3?

根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch的顺序排列,如2.3.1。

之前最新的Angular router版本号是3.3.0,而其它模块的版本号是2.2.0,由于版本号不同步,团队计划将其同步,直接采用4.0.0作为新版的版本号。

 

angular2版本迭代之特性追踪

标签:compile   rms   14.   add   升级   ram   ima   element   browser   

原文地址:https://www.cnblogs.com/xudengwei/p/8855876.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!