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
,可以参考另一篇教程Ionic2入门教程 实现TodoList App-2 实现TodoList App 。在新版中,我们可以使用IonicPage
装饰器来简化配置,具体用法如下:
这样就能把’about’这个url对应到AboutPage
这个组件上。
延时加载
Ionic3.0版本开始,支持了延迟加载,我们可以将某些模块设置为延时加载,只有用户打开相关的页面的时候,这个模块所在的js才会被下载,这样能减少用户初次下载的文件的大小。
需要注意的是,ionic-cli的3.0版还没有正式发布,目前是beta版,正式版的可能还需要1,2周。如果想使用3.0 beta版的命令行,可以参考:http://blog.ionic.io/ionic-cli-v3-beta/ 。
当然,你也可以直接修改package.json里面的ionic和angular版本,来使用新版本。
转自:http://codin.im/2017/04/21/ionic3-angular4-release-and-what-is-new/
Ionic3与Angular4新特性的更多相关文章
- Ionic3新特性--页面懒加载1
Ionic3新的懒加载机制给我带来了如下新特性: 避免在每一个使用到某Page的Module或其他Page中重复的import这个类(需要写一堆路径) 允许我们通过字符串key在任何想使用的地方获取某 ...
- Angular4.0.0正式发布,附新特性及升级指南
本文首发地址:Angular4.0.0正式发布,附新特性及升级指南 作者|孙薇 编辑|尾尾 经历了6个RC版本之后,Angular项目组终于发布了新版,即正式版 Angular 4.0.0.新版的 A ...
- HTML5 & CSS3初学者指南(3) – HTML5新特性
介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据 ...
- SQL Server 2014 新特性——内存数据库
SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...
- ElasticSearch 5学习(10)——结构化查询(包括新特性)
之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...
- [干货来袭]C#6.0新特性
微软昨天发布了新的VS 2015 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下也是昨天发布的新的C#6.0的部分新特性吧.. ...
- CSS3新特性应用之结构与布局
一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...
- 【译】Meteor 新手教程:在排行榜上添加新特性
原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...
- 跨平台的 .NET 运行环境 Mono 3.2 新特性
Mono 3.2 发布了,对 Mono 3.0 和 2.10 版本的支持不再继续,而且这两个分支也不再提供 bug 修复更新. Mono 3.2 主要新特性: LLVM 更新到 3.2 版本,带来更多 ...
随机推荐
- Python 数据结构与算法——链表
#构造节点类 class Node(object): def __init__(self,data=None,_next=None): ''' self.data:为自定义的数据 self.next: ...
- .Net Core与跨平台时区
由于开发者不熟悉不同操作系统管理时区的方式,当用.Net Core开发与时区相关的应用运行在不同操作系统上会出现错误.这片文章将会探索一下在不同操作系统上用.Net Core 使用时区信息出现的问题与 ...
- C#将网页数据导出Excel时编码设置
public void DGToExcel() { Response.ClearContent(); Response.Charset = "GB2312";//内容编码 Resp ...
- python 实现获取电脑IP、主机名、Mac地址
import socket import uuid # 获取主机名 hostname = socket.gethostname() #获取IP ip = socket.gethostbyname(ho ...
- Android Studio无法连接真机的问题?
我不说,你可能又浪费半天时间,最后的结果,你可能还是没能解决!!! 现在,一般安卓手机为了安装软件方便,一般都安装了豌豆荚,但是,就是这个豌豆荚占用了Android Studio的ADB端口,导致An ...
- 790. Domino and Tromino Tiling
We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...
- win10 下Oracle安装
在win10 64bit下安装oracle 11的时候,有些问题不注意,安装的时候才遇到就gg了.下面将介绍win10下安装oracle 11的步骤以及安装过程中遇到的一些问题及解决方案. 安装过程中 ...
- webpack快速入门——插件配置:HTML文件的发布
1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...
- Java基础梳理(一)
List和Set比较,各自的子类比较 对比一:Arraylist与LinkedList的比较 1.ArrayList是实现了基于动态数组的数据结构,因为地址连续,一旦数据存储好了,查询操作效率会比较高 ...
- Winform—C#读写config配置文件
现在FrameWork2.0以上使用的是:ConfigurationManager或WebConfigurationManager.并且AppSettings属性是只读的,并不支持修改属性值. 一.如 ...