Ionic3與Angular4新特性

2022-05-15 11:38:17 字數 2087 閱讀 4705

之前(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的新特性。

新的版本下,打包的檔案將更小,執行也更快。從angular2.x開始,它就支援aot(ahead of time)的編譯,或者叫預編譯。此』編譯』不是一般說的把typescript**編譯打包成js**。這裡說的編譯,是在瀏覽器裡載入完js**和模板的內容以後,根據angular框架的需要,把模板編譯成執行時需要的樣子,以及一些其他的處理。使用aot編譯的**,不需要在客戶端的瀏覽器裡面編譯,所以載入也會更快。其次,在客戶端編譯,需要用到一些編譯用的**,而這些**在執行時又用不到。所以,編譯後打包的js檔案也會較小。在angular4裡,aot編譯技術進一步得到改進,使得angular應用大小更小、執行更快。

angular universal也就是在伺服器端渲染angular,這樣,對於一些比較老的裝置或瀏覽器也能夠很好的執行angular應用,而且,也能夠支援搜尋引擎的優化。

從angular4開始,angular universal從之前的社群維護的專案,成為了angular的正式專案,也有angular團隊維護。

最近typescript的發展也是非常快,其中也有angular的原因,新版本總是會有一些新的東西或改進。

現在,如果在模板渲染的時候,發生了異常,這個模板的source map會被生成,這樣你就能準確的值得到底是那乙個地方導致了錯誤。不像以前,需要根據錯誤裡面的變數或者其他原因,自己去模板檔案裡面查詢或分析。

從4.x版本開始,animation不再是@angular/core裡面的一部分,它被移到單獨的模組@angular/animations裡,

現在*ngif支援else了。*ngfor指令也更加靈活。

除此以外,還有一些更新,請參考官方的部落格

ionic3對應angular4,ionic3的新特性主要有下面2個:

這樣就能把』about』這個url對應到aboutpage這個元件上。 

需要注意的是,ionic-cli的3.0版還沒有正式發布,目前是beta版,正式版的可能還需要1,2周。如果想使用3.0 beta版的命令列,可以參考: 。

當然,你也可以直接修改package.json裡面的ionic和angular版本,來使用新版本。

**:

ionic3 常用指令

npm install 安裝依賴 npm install g cnpm registry 映象源指向 cnpm install g cordova ionic 安裝cordova ionic cnpm update g cordova ionic 更新cordova ionic ionic help...

安裝使用ionic3

1 安裝ionic3 npm install g ionic latest 2 建立ionic3專案 ionic start mynewproject blank 3 啟動ionic3專案 cd mynewproject ionic serve 4 以cordova的方式啟動專案 如果 中使用了io...

ionic3公升級ionic4寫法變化大全

ionic3寫法 忘了 ionic4寫法 在scss下定義 ion color gray text這裡有6個屬性,只需定義第乙個base顏色,其他的可以在ionic 上自動生成 ionic3寫法 ion ios backwhite 2.將ios backwhite.svg放入svg目錄下 3.修改a...