Angular5.0新特性

文章來自官網部分翻譯 https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Angular5.0.0版本已經正式釋出

1.構建優化 5.0版本預設採用CLI構建和打包。構建優化器是包含在CLI裡面的一個工具，通過對你的應用程式更加語義化的理解可以使得你的打包程式(bundles)更小。構建優化器有兩個主要工作。第一，我們可以將應用程式的一部分標記為純應用(pure)，改進了現有工具提供的搖樹優化，刪除了應用中其它不需要的部分。第二，從你的應用程式在執行時刪除裝飾符程式碼(decorators),裝飾(decorators)是由編譯器使用的，而在執行時並不需要可以被刪除。這些工作減少了生成的JavaScript bundles的大小，並增加了你的使用者應用程式的啟動速度。

2.服務端狀態轉換和DOM支援有了這個支援，可以讓應用程式在伺服器端和客戶端版之間共享狀態更容易。 Angular Universal是一個幫助開發者實現SSR的開源專案，通過在服務端渲染 Angular應用程式，然後在客戶端引導啟動程式並生成HTML，由此更好的支援那些對javascript不太友好的化境來提高應用程式效能。 5.0版本中，Angular開發團隊新增了ServerTransferStateModule(與之對應的BrowserTransferStateModule),這個模組允許你在服務端生成模組資訊並傳輸到客戶端，不需要在客戶端重複建立。這一點在通過HTTP獲取資料並展示時非常有用。通過服務端狀態轉移，客戶端不需要在傳送第二個HTTP資料請求，狀態轉移的API文件將在未來幾周內釋出。此處另一個改變是AngularUniversal團隊新增了Domino渲染工具，Domino的加入意味著我們在伺服器端上下文中將可以支援更多的DOM操作，改進了對第三方JS和元件庫的支援。

3.編譯器改進改進了Angular編譯器來支援增量編譯,重新構建變得更快，特別是對生產環境的構建和AOT編譯，增強的裝飾器可以通過更精細化的去除空格來減小產生的包. 改進後的AOT編譯的效能大幅度,提升可以節省約95%的構建時間，40s可以提升至2s完成一次構建。 Preserve Whitespace 通過編譯器，模板開發中的製表符、換行符、空格等可以原樣的保留下來，並提供選項可以自選是否使用Preserve Whitespace來保留這些東西。

也可以在tsconfig.json設定作用到全域性

注：元件級別的選項會覆蓋應用程式級別的設定。增強的裝飾符支援裝飾符降低了在使用useValue、useFactory、data對lambda表示式的要求，開發者也可以使用一個lamdba表示來代替一個已定義的命名函式,也就意味著你可以不事先在*.d.ts中宣告而直接執行程式碼。

去掉表示式方式

4.國際化號碼、日期和貨幣管道 Angular5中已經建立了新的號碼，日期和貨幣管道，增加了跨瀏覽器的標準化實現，消除國際化在不同環境中的差異。在5.0中管道可以使用我們自己的實現，可以在任何地方實現本地化的支援和配置。 V4 V5之間管道差異對比 https://docs.google.com/spreadsheets/d/12iygt-_cakNP1VO7MV9g4lq9NsxVWG4tSfc98HpHb0k/edit#gid=0

5.StaticInjector取代ReflectiveInjector依賴注入器為了更多的減少polyfills，5.0中使用了StaticInjector注入器來替換原有的ReflectiveInjector注入器，這種注入器不再裡來與ReflectPolyfill，可以大幅減少應用程式體積在4.x中，依賴注入器一共有兩種，即Injector的抽象類子類： 1._NullInjector (該類的例項用於表示空的注入器) 2.ReflectiveInjector (表示一個依賴注入容器，用於例項化物件和解析依賴)

之前提供依賴注入方式：
ReflectiveInjector.resolveAndCreate(providers);

5.0中方式：
Injector.create(providers);
複製程式碼

6.Zone執行速度的提升 5.0中預設提供的zones已經優化過，速度大幅提升，並且在應用程式中繞過zonee區域更加關於應用程式的效能。繞過zone引導啟動應用程式的方式：

platformBrowserDynamic().bootstrapModule(AppModule,{ngZone:'noop'}).then( ref => {} );
複製程式碼

7.exportAs 5.0中提供了元件/指令的多命名支援，在對使用者不修改程式碼情況下進行元件的遷移操作等非常有用，將一個元件匯出多個名字，可以讓元件已一個新名字來使用而達到不破壞現有程式碼的目的。

8.HttpClient 在4.3中HttpClient模組被封裝在@angular/common中，新的HttpClient被封裝在@angular/common/http中，更新Http模組後，需要使用HttpClientModule替換原有HttpModule，並在使用http服務時，可以去掉map(res=>res.json())的呼叫，新模組中已經不再需要這麼寫了。

9.CLI v1.5 Angular CLI v1.5版本中已經新增了對5.0版本的支援，後期將會把v5.0.0作為CLI的預設版本。這個版本中已經預設開啟了構建優化，所以開發者可以直接感受到更小的js打包優化帶來的收益。同時也更新了.tsconfig將更嚴格的遵循TypeScript標準，

10.Angular Forms adds updateOn Blur / Submit 可以使用blur/submit來進行事件更新，而不用每個input都寫一個事件了。

Template Driven Forms
Before
<input name="firstName" ngModel>
After
<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
or
<form [ngFormOptions]="{updateOn: 'submit'}">


Reactive Forms
Before
new FormGroup(value);
new FormControl(value, [], [myValidator])
After
new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
asyncValidators可以不再是作為一個引數傳遞 而是直接作用到表單上了。
複製程式碼

11.RxJS 5.5 支援V5.2+ 5.5在bundle上更加優化了

12.New Router Lifecycle Events GuardsCheckStart ChildActivationStart ActivationStart GuardsCheckEnd ResolveStart ResolveEnd ActivationEnd ChildActivationEnd

Angular5.0新特性

相關文章