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/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM