Angular5.0有什么變化-創(chuàng)新互聯(lián)

這篇文章主要介紹Angular5.0有什么變化，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元金華做網(wǎng)站,已為上家服務(wù),為金華各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

構(gòu)建優(yōu)化器

5.0.0開始，通過CLI執(zhí)行的產(chǎn)品構(gòu)建默認(rèn)使用構(gòu)建優(yōu)化器。

構(gòu)建優(yōu)化器是CLI中的一個工具，它基于我們對你Angular應(yīng)用的理解，可以把構(gòu)建后的包變得更小。

構(gòu)建優(yōu)化器有兩個主要任務(wù)。首先，把你應(yīng)用的某些部分標(biāo)記為pure，以便原有工具利用它改進(jìn)“tree shaking”的優(yōu)化效果，同時刪除應(yīng)用中不必要的東西。

其次，構(gòu)建優(yōu)化器會從你的應(yīng)用中刪除Angular裝飾器代碼。裝飾器只有編譯器會用，運行時不用，可以刪掉。上述兩項優(yōu)化都可以減少生成JS包的大小，同時加快應(yīng)用啟動速度。

Angular Universal狀態(tài)轉(zhuǎn)交API及對DOM的支持

這樣更便于在服務(wù)端和客戶之間共享應(yīng)用狀態(tài)。

Angular Universal是一個幫助開發(fā)者執(zhí)行服務(wù)端渲染（SSR）的項目。服務(wù)端渲染生成的HTML對不支持JS的蜘蛛和爬蟲友好，同時有助于提升用戶感知性能。

在5.0.0中，開發(fā)團(tuán)隊添加了ServerTransferStateModule及對應(yīng)的BrowserTransferStateModule。這個模塊可以幫開發(fā)者在服務(wù)端渲染生成的內(nèi)容中加入相關(guān)信息，然后傳送給客戶端，從而避免重復(fù)生成。這對于通過HTTP獲取數(shù)據(jù)的場景是很有用的。通過把狀態(tài)從服務(wù)器傳送到客戶端，開發(fā)者就不用再發(fā)第二次HTTP請求了。狀態(tài)轉(zhuǎn)交的相關(guān)文檔幾周后會發(fā)布。

Angular Universal團(tuán)隊還把平臺服務(wù)器Domino加到了平臺服務(wù)器中。Domino支持在服務(wù)器端環(huán)境下更多的開箱即用的DOM操作，可以改進(jìn)我們對非服務(wù)端第三方JS及組件庫的支持。

編譯器改進(jìn)

為支持遞增編譯，我們改進(jìn)了Angular編譯器。結(jié)果讓重新構(gòu)建加快，特別是對產(chǎn)品構(gòu)建和AOT構(gòu)建，效果更明顯。我們還增強了裝飾器，通過刪除空白達(dá)到減少包大小的目的。

TypeScript轉(zhuǎn)換

現(xiàn)在，Angular編譯器底層的工作機制是TypeScript轉(zhuǎn)換，從而讓遞增式重新構(gòu)建快了很多。TypeScript轉(zhuǎn)換是TypeScript 2.3新增的一個特性，可以讓我們深入到標(biāo)準(zhǔn)TypeScript編譯管道。

在打開AOT標(biāo)簽的情況下，運行ng serve就可以利用上述機制。

ng serve --aot

建議大家都試一下。將來這個配置會成為CLI的默認(rèn)值。很多項目都有性能問題，涉及上千組件，我們希望各種規(guī)模的項目都能從這些改進(jìn)中受益。

在執(zhí)行https://angular.io 的遞增AOT構(gòu)建時，新編譯器管道可節(jié)省95%的構(gòu)建時間（在我們開發(fā)機上測試的結(jié)果是從40多秒減少為不到2秒）。

我們的目標(biāo)是讓AOT編譯快到能開發(fā)者用它開發(fā)的程度。現(xiàn)在，我們已經(jīng)沖進(jìn)了2秒以內(nèi)，因此將來的CLI中可能會默認(rèn)開啟AOT。

作為向本次轉(zhuǎn)換過渡的一步，我們不再需要genDir，而outDir也變了：現(xiàn)在，我們會把為包生成的文件都打到node_modules里。

保留空白

過去編譯器會忠實地復(fù)現(xiàn)并在模板中包含制表符、換行符和空白?，F(xiàn)在你可選擇是否在組件和應(yīng)用中包含空白了。

可以在每個組件的裝飾器中指定這個配置，而當(dāng)前的默認(rèn)值為true。

@Component({
 templateUrl: 'about.component.html',
 preserveWhitespaces: false
}
export class AboutComponent {}

或者也可以在tsconfig.json中進(jìn)行全局配置，其中該項默認(rèn)值也是true。

{
 "extends": "../tsconfig.json",
 "compilerOptions": {
  "outDir": "../out-tsc/app",
  "baseUrl": "./",
  "module": "es2015",
  "types": []
 },
 "angularCompilerOptions": {
  "preserveWhitespaces": false
 },
 "exclude": [
  "test.ts",
  "**/*.spec.ts"
 ]
}

一般規(guī)則是組件級配置要覆蓋應(yīng)用級配置。開發(fā)團(tuán)隊打算將來把默認(rèn)值改成false，默認(rèn)為開發(fā)者節(jié)省空間。不要擔(dān)心你的<pre>標(biāo)簽，編譯器會智能處理它們。

改進(jìn)的裝飾器支持

現(xiàn)在支持Lambda和對象字面量useValue、useFactory和data裝飾器中的表達(dá)式降級（expression lowering）。這樣可以使用只能在運行時計算的裝飾器中被降級（lower）的值。

因此現(xiàn)在可以不使用命名函數(shù)，而改用Lambda函數(shù)。換句話說，執(zhí)行代碼不會影響你的d.ts或你的外部API。

Component({
 provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

我們還會將表達(dá)式降級，作為useValue的一部分。

Component({
 provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}

國際化的數(shù)值、日期和貨幣管道

我們寫了新的數(shù)值、日期和貨幣管道，讓跨瀏覽器國際化更方便，不需要再使用i18n的膩子腳本（polyfill）。

在以前版本的Angular中，我們一直依賴瀏覽器及其i18n API提供數(shù)值、日期和貨幣格式。為此，很多開發(fā)者都在使用膩子腳本（polyfill），而結(jié)果也不好。很多人反饋說一些常見的格式（如貨幣）不能做到開箱即用。

而在5.0.0中，我們把這個管道更新成了自己的實現(xiàn)，依賴CLDR提供廣泛的地區(qū)支持，而且可配置。以下是我們對v4和v5所做的比較：a document comparing the pipe behavior between v4 and v5。

如果你還沒條件使用新管理，可以導(dǎo)入DeprecatedI18NPipesModule以降級到舊的行為。

StaticInjector代替ReflectiveInjector

為了消除對更多膩子腳本（polyfill）的依賴，我們用StaticInjector代替了ReflectiveInjector。前者不再需要Reflect，為開發(fā)者減少了應(yīng)用大小。

以前

ReflectiveInjector.resolveAndCreate(providers);

以后

Injector.create(providers);

提升Zone的速度

一方面提升了Zone的速度，另一方面也可以在特別關(guān)注性能的應(yīng)用中繞過它。

若要繞過它，啟動應(yīng)用時加上noop：

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

這里有一個完整的例子：the example ng-component-state project。

exportAs

組件和指令中增加了對多名稱的支持。這有助于用戶實現(xiàn)無痛遷移。通過把指令導(dǎo)出為多個名稱，可以在不破壞原有代碼的情況下在Angular語法中使用新名稱。Angular Material項目已經(jīng)在其前綴遷移項目中用上了，對其他組件作者肯定也有用。

示例

@Component({
 moduleId: module.id,
 selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
 exportAs: 'matButton, matAnchor',
 .
 .
 .
}

HttpClient

v4.3在@angular/common中推出過HttpClient，用于在Angular中發(fā)送請求，它小巧易用。HttpClient受到了開發(fā)者的廣泛贊譽，因此我們推薦在所有應(yīng)用中使用它，放棄之前的@angular/http library。

要升級HttpClient，需要在每個模塊的@angular/common/http中把HttpModule替換為HttpClientModule，注入HttpClient服務(wù)，刪除所有map(res => res.json())。

CLI v1.5

從Angluar CLI v1.5開始，已經(jīng)開始支持Angluar v5.0.0，默認(rèn)生成v5項目。

在這次小版本升級中，我們默認(rèn)打開了構(gòu)建優(yōu)化器，讓開發(fā)者拿到更小的包。

我們還修改了使用.tsconfig文件的方式，以更嚴(yán)格地遵守TypeScript標(biāo)準(zhǔn)。此前，如果檢測到延遲加載的路由，而且你在tsconfig.json中手工指定了一組files或include，那這些路由會自動化處理。而如今，根據(jù)TypeScript規(guī)范，我們不再這么干了。默認(rèn)情況下，CLI對TypeScript的配置中沒有files或include，因此多數(shù)開發(fā)者不會受影響。

Angular表單添加updateOn Blur/Submit

這樣可以根據(jù)blur或submit來運行驗證和更新值的邏輯了，不必再單純依賴input事件。

表單對應(yīng)用很重要，如果有服務(wù)端驗證，或者驗證或更新值會觸發(fā)較慢的操作，你當(dāng)然希望它少跑幾次。現(xiàn)在你可以在控件層面控制驗證和更新值的時機了，也可以在表單層面設(shè)置。

此外，你現(xiàn)在可以直接在選項中指定asyncValidators，而不是通過第三個參數(shù)指定。

模板驅(qū)動的表單

以前

以后

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

或者

<form [ngFormOptions]="{updateOn:'submit'}">

反應(yīng)式表單

以前

new FormGroup(value);
new FormControl(value, [], [myValidator])

以后

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

RxJS 5.5

我們已經(jīng)把使用的RxJS更新到5.5.2或更高版本。這個新發(fā)布的RxJS可以讓開發(fā)完全擺脫之前導(dǎo)入機制的副作用，因為我們以新的lettable operators的方式使用了RxJS。這些新操作符消除了副作用，以及之前導(dǎo)入操作符中“patch”方法存在代碼切割和“tree shaking”等問題。

不再這樣:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

現(xiàn)在這樣:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
 map(user => user.name),
 filter(name => name),
);

此外，RxJS現(xiàn)在發(fā)行了一個使用ECMAScript Modules的版本。新Angular CLI會默認(rèn)拉取這個新版本，讓包大小有明顯減小。如果你沒使用Angular CLI，那還是應(yīng)該指向這個新版本。相關(guān)文檔在此：Build and Treeshaking。

新的路由器生成周期事件

我們給路由器添加了新的生命周期事件，讓開發(fā)者可以跟蹤running guard啟動到激活完成的各個階段。這些事件可在有子組件更新時，在一個特定的路由器出口上展示加載動畫，或者測量性能。

新的事件（按順序）是GuardsCheckStart、ChildActivationStart、ActivationStart、GuardsCheckEnd、ResolveStart、ResolveEnd、ActivationEnd、ChildActivationEnd。以下是一個使用這些事件啟動和停止加載動畫的示例：

class MyComponent {
 constructor(public router: Router, spinner: Spinner) {
  router.events.subscribe(e => {
   if (e instanceof ChildActivationStart) {
    spinner.start(e.route);
   } else if (e instanceof ChildActivationEnd) {
    spinner.end(e.route);
   }
  });
 }
}

如何更新

這里有Angular Update Guide，告訴你整個過程，以及更新前要做哪些事，還有更新應(yīng)用的步驟，以及做好迎接Angular未來版本的準(zhǔn)備等信息。

我們刪除很多以前廢棄的API（如OpaqueToken），也公布了一些新的廢棄項。以上指南會詳細(xì)介紹這些變更。

已知問題

當(dāng)前已知與source map相關(guān)的問題。某些source map會報“未定義的源”錯誤。

以上是“Angular5.0有什么變化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：Angular5.0有什么變化-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article0/hegio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)頁設(shè)計公司、移動網(wǎng)站建設(shè)、品牌網(wǎng)站制作、外貿(mào)建站

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

猜你還喜歡下面的內(nèi)容