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版本，來使用新版本。