文章來(lái)自官網(wǎng)部分翻譯

創(chuàng)新互聯(lián)公司專(zhuān)注于西疇企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城開(kāi)發(fā)。西疇網(wǎng)站建設(shè)公司,為西疇等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Angular5.0.0版本已經(jīng)正式發(fā)布

總結(jié)一下v5.0.0帶來(lái)的新變化都有哪些。

1.構(gòu)建優(yōu)化

　　5.0版本默認(rèn)采用CLI構(gòu)建和打包。構(gòu)建優(yōu)化器是包含在CLI里面的一個(gè)工具，通過(guò)對(duì)你的應(yīng)用程序更加語(yǔ)義化的理解可以使得你的打包程序(bundle)更小。

構(gòu)建優(yōu)化器有兩個(gè)主要工作。

第一，我們可以將應(yīng)用程序的一部分標(biāo)記為純應(yīng)用(pure)，改進(jìn)了現(xiàn)有工具提供的搖樹(shù)優(yōu)化，刪除了應(yīng)用中其它不需要的部分。

第二，從你的應(yīng)用程序在運(yùn)行時(shí)刪除裝飾符代碼(decorators),裝飾(decorators)是由編譯器使用的，而在運(yùn)行時(shí)并不需要可以被刪除。這些工作減少了生成的JavaScript bundles的大小，并增加了你的用戶(hù)應(yīng)用程序的啟動(dòng)速度。

2.服務(wù)端狀態(tài)轉(zhuǎn)換和DOM支持

　　有了這個(gè)支持，可以讓?xiě)?yīng)用程序在服務(wù)器端和客戶(hù)端版之間共享狀態(tài)更容易。

Angular Universal是一個(gè)幫助開(kāi)發(fā)者實(shí)現(xiàn)SSR的開(kāi)源項(xiàng)目，通過(guò)在服務(wù)端渲染

Angular應(yīng)用程序，然后在客戶(hù)端引導(dǎo)啟動(dòng)程序并生成HTML，由此更好的支持那些對(duì)javascript不太友好的化境來(lái)提高應(yīng)用程序性能。

5.0版本中，Angular開(kāi)發(fā)團(tuán)隊(duì)添加了ServerTransferStateModule(與之對(duì)應(yīng)的BrowserTransferStateModule),這個(gè)模塊允許你在服務(wù)端生成模塊信息并傳輸?shù)娇蛻?hù)端，不需要在客戶(hù)端重復(fù)創(chuàng)建。這一點(diǎn)在通過(guò)HTTP獲取數(shù)據(jù)并展示時(shí)非常有用。通過(guò)服務(wù)端狀態(tài)轉(zhuǎn)移，客戶(hù)端不需要在發(fā)送第二個(gè)HTTP數(shù)據(jù)請(qǐng)求，狀態(tài)轉(zhuǎn)移的API文檔將在未來(lái)幾周內(nèi)發(fā)布。

此處另一個(gè)改變是AngularUniversal團(tuán)隊(duì)添加了Domino渲染工具，Domino的加入意味著我們?cè)诜?wù)器端上下文中將可以支持更多的DOM操作，改進(jìn)了對(duì)第三方JS和組件庫(kù)的支持。

3.編譯器改進(jìn)

　　改進(jìn)了Angular編譯器來(lái)支持增量編譯,重新構(gòu)建變得更快，特別是對(duì)生產(chǎn)環(huán)境的構(gòu)建和AOT編譯，增強(qiáng)的裝飾器可以通過(guò)更精細(xì)化的去除空格來(lái)減小產(chǎn)生的包.

改進(jìn)后的AOT編譯的性能大幅度,提升可以節(jié)省約95%的構(gòu)建時(shí)間，40s可以提升至2s完成一次構(gòu)建。

Preserve Whitespace

通過(guò)編譯器，模板開(kāi)發(fā)中的制表符、換行符、空格等可以原樣的保留下來(lái)，并提供選項(xiàng)可以自選是否使用Preserve Whitespace來(lái)保留這些東西。

注：組件級(jí)別的選項(xiàng)會(huì)覆蓋應(yīng)用程序級(jí)別的設(shè)置。

增強(qiáng)的裝飾符支持

裝飾符降低了在使用useValue、useFactory、data對(duì)lambda表達(dá)式的要求，開(kāi)發(fā)者也可以使用一個(gè)lamdba表示來(lái)代替一個(gè)已定義的命名函數(shù),也就意味著你可以不事先在*.d.ts中聲明而直接執(zhí)行代碼。

4.國(guó)際化號(hào)碼、日期和貨幣管道

　　Angular5中已經(jīng)建立了新的號(hào)碼，日期和貨幣管道，增加了跨瀏覽器的標(biāo)準(zhǔn)化實(shí)現(xiàn)，消除國(guó)際化在不同環(huán)境中的差異。
在5.0中管道可以使用我們自己的實(shí)現(xiàn)，可以在任何地方實(shí)現(xiàn)本地化的支持和配置。

V4 V5之間管道差異對(duì)比
https://docs.google.com/spreadsheets/d/12iygt-_cakNP1VO7MV9g4lq9NsxVWG4tSfc98HpHb0k/edit#gid=0

5.StaticInjector取代ReflectiveInjector依賴(lài)注入器

　　為了更多的減少polyfills，5.0中使用了StaticInjector注入器來(lái)替換原有的ReflectiveInjector注入器，這種注入器不再里來(lái)與ReflectPolyfill，可以大幅減少應(yīng)用程序體積

在4.x中，依賴(lài)注入器一共有兩種，即Injector的抽象類(lèi)子類(lèi)：

1._NullInjector (該類(lèi)的實(shí)例用于表示空的注入器)

2.ReflectiveInjector (表示一個(gè)依賴(lài)注入容器，用于實(shí)例化對(duì)象和解析依賴(lài))

之前提供依賴(lài)注入方式：ReflectiveInjector.resolveAndCreate(providers);5.0中方式：Injector.create(providers);

6.Zone執(zhí)行速度的提升

　　5.0中默認(rèn)提供的zones已經(jīng)優(yōu)化過(guò)，速度大幅提升，并且在應(yīng)用程序中繞過(guò)zonee區(qū)域更加關(guān)于應(yīng)用程序的性能。
繞過(guò)zone引導(dǎo)啟動(dòng)應(yīng)用程序的方式：

platformBrowserDynamic().bootstrapModule(AppModule,{ngZone:'noop'}).then( ref => {} );

7.exportAs多命名支持

　　5.0中提供了組件/指令的多命名支持，在對(duì)用戶(hù)不修改代碼情況下進(jìn)行組件的遷移操作等非常有用，將一個(gè)組件導(dǎo)出多個(gè)名字，可以讓組件已一個(gè)新名字來(lái)使用而達(dá)到不破壞現(xiàn)有代碼的目的。

8.HttpClient

　　在4.3中HttpClient模塊被封裝在@angular/common中，新的HttpClient被封裝在@angular/common/http中，更新Http模塊后，需要使用HttpClientModule替換原有HttpModule，并在使用http服務(wù)時(shí)，可以去掉map(res=>res.json())的調(diào)用，新模塊中已經(jīng)不再需要這么寫(xiě)了。

9.CLI v1.5

　　Angular CLI v1.5版本中已經(jīng)添加了對(duì)5.0版本的支持，后期將會(huì)把v5.0.0作為CLI的默認(rèn)版本。這個(gè)版本中已經(jīng)默認(rèn)開(kāi)啟了構(gòu)建優(yōu)化，所以開(kāi)發(fā)者可以直接感受到更小的js打包優(yōu)化帶來(lái)的收益。同時(shí)也更新了.tsconfig將更嚴(yán)格的遵循TypeScript標(biāo)準(zhǔn)，

10.Angular Forms adds updateOn Blur / Submit

　　可以使用blur/submit來(lái)進(jìn)行事件更新，而不用每個(gè)input都寫(xiě)一個(gè)事件了。

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可以不再是作為一個(gè)參數(shù)傳遞 而是直接作用到表單上了。

網(wǎng)頁(yè)題目：Angular5.0.0新特性-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://jinyejixie.com/article14/jsede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、移動(dòng)網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站收錄、用戶(hù)體驗(yàn)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)