Ionic3 与 Angular4 新特性

以前（17年3月底）Angular4.0.0正式发布，这个月（4月十几号）Ionic3又发布了，不少人看到这个估计都是一脸懵圈，其实，Angular4只是Angular2的后续版本，Ionic3也是Ionic2的后续版本，只是由于Angular如今严格按照版本更新策略来制定版本号，因此才会一会儿跳到4的版本。

先来看看新的版本号更新策略是怎么样。首先，以2.4.8为例，分为[主版本].[中间版本].[小版本]。当有api更新致使跟原先的版本的某些api不兼容的时候，就须要更新主版本，当添加一些新功能，而且全部的 api跟原先的版本兼容，就更新中间版本。当只是bug的修改，就更新小版本。
若是一直关注Angular2的同窗可能知道，在Angular2RC版本以前，每次更新新的Beta版，都会有api的更新，基于以前版本开发的应用，在新版本里就会出错。咱们也只能查看官方的升级日志，来判断是否有不兼容的更新，来以此来肯定是否须要更新到新版本。

如今，使用了新的版本策略之后，咱们只须要看版本号，只要第一个数字没变，咱们就能够放心的更新，特别是最后一个数字有变化时，应该及时更新，来避免框架中的隐藏的bug。

而Ionic也开始采用和Angular一致的版本策略，因此Ionic的版本升级到3。可是，Angular为何从2一下升到4了？原来，在Angular2的开发过程当中，路由模块angular/router经历了一次重写，重写之后版本是3.x。在升级Angular的时候，为了统一，使得全部的Angular子模块的版本都一致，就直接使用4.x的版本。可是，Ionic却没有跟着使用4.x的版本，不知道之后会不会改为一致的大版本。

须要说明的是，Angular之后官方的称呼就叫Angular，不是Angular2，也不是Angular4，而1.x版本的老版本，叫AngularJS。

Angular4的新特性

首先，先看看Angular4的新特性。

更小、更快

新的版本下，打包的文件将更小，运行也更快。从Angular2.x开始，它就支持AOT(Ahead of Time)的编译，或者叫预编译。此'编译'不是通常说的把TypeScript代码编译打包成js代码。这里说的编译，是在浏览器里加载完js代码和模板的内容之后，根据Angular框架的须要，把模板编译成运行时须要的样子，以及一些其余的处理。使用AOT编译的代码，不须要在客户端的浏览器里面编译，因此加载也会更快。其次，在客户端编译，须要用到一些编译用的代码，而这些代码在运行时又用不到。因此，编译后打包的js文件也会较小。在Angular4里，AOT编译技术进一步获得改进，使得Angular应用大小更小、运行更快。

Angular Universal

Angular Universal也就是在服务器端渲染Angular，这样，对于一些比较老的设备或浏览器也可以很好的运行Angular应用，并且，也可以支持搜索引擎的优化。
从Angular4开始，Angular Universal从以前的社区维护的项目，成为了Angular的正式项目，也有Angular团队维护。

TypeScript 2.1, 2.2的支持

最近TypeScript的发展也是很是快，其中也有Angular的缘由，新版本老是会有一些新的东西或改进。

模板的Source Map

如今，若是在模板渲染的时候，发生了异常，这个模板的Source Map会被生成，这样你就能准确的值获得底是那一个地方致使了错误。不像之前，须要根据错误里面的变量或者其余缘由，本身去模板文件里面查找或分析。

Animation模块

从4.x版本开始，animation再也不是@angular/core里面的一部分，它被移到单独的模块@angular/animations里，

ngIf, ngFor指令

如今*ngIf支持else了。*ngFor指令也更加灵活。

除此之外，还有一些更新，请参考官方的博客

Ionic3的新特性

Ionic3对应Angular4，Ionic3的新特性主要有下面2个：

IonicPage

在Ionic2的版本中，导航器不是基于url的，若是想设置基于url的导航，就须要使用DeepLinker，能够参考另外一篇教程{% post_link ionic2-tutorial-todolist-app-2 "Ionic2入门教程 实现TodoList App-2 实现TodoList App" %} 。在新版中，咱们可使用IonicPage装饰器来简化配置，具体用法以下：

@IonicPage({
  name: 'my-about',
  segment: 'about'
})
@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage { }复制代码

这样就能把'about'这个url对应到AboutPage这个组件上。

延时加载

Ionic3.0版本开始，支持了延迟加载，咱们能够将某些模块设置为延时加载，只有用户打开相关的页面的时候，这个模块所在的js才会被下载，这样能减小用户初次下载的文件的大小。

须要注意的是，ionic-cli的3.0版尚未正式发布，目前是beta版，正式版的可能还须要1，2周。若是想使用3.0 beta版的命令行，能够参考：blog.ionic.io/ionic-cli-v… 。固然，你也能够直接修改package.json里面的ionic和angular版本，来使用新版本。