Angular 5.0 來了! 有這些大變化
我們很高興地宣布Angular 5.0.0——五角形甜甜圈發(fā)布啦!這又是一個主版本,包含新功能并修復(fù)了很多bug。它再次體現(xiàn)了我們把Angular做得更小、更快、更好用的一貫?zāi)繕?biāo)。
以下簡單介紹v5的重大變化。要了解詳情,請看changelog。
構(gòu)建優(yōu)化器
5.0.0開始,通過CLI執(zhí)行的產(chǎn)品構(gòu)建默認使用構(gòu)建優(yōu)化器。
構(gòu)建優(yōu)化器是CLI中的一個工具,它基于我們對你Angular應(yīng)用的理解,可以把構(gòu)建后的包變得更小。
構(gòu)建優(yōu)化器有兩個主要任務(wù)。首先,把你應(yīng)用的某些部分標(biāo)記為pure,以便原有工具利用它改進“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ā)團隊添加了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團隊還把平臺服務(wù)器Domino加到了平臺服務(wù)器中。Domino支持在服務(wù)器端環(huán)境下更多的開箱即用的DOM操作,可以改進我們對非服務(wù)端第三方JS及組件庫的支持。
編譯器改進
為支持遞增編譯,我們改進了Angular編譯器。結(jié)果讓重新構(gòu)建加快,特別是對產(chǎn)品構(gòu)建和AOT構(gòu)建,效果更明顯。我們還增強了裝飾器,通過刪除空白達到減少包大小的目的。
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的默認值。很多項目都有性能問題,涉及上千組件,我們希望各種規(guī)模的項目都能從這些改進中受益。
在執(zhí)行https://angular.io 的遞增AOT構(gòu)建時,新編譯器管道可節(jié)省95%的構(gòu)建時間(在我們開發(fā)機上測試的結(jié)果是從40多秒減少為不到2秒)。
我們的目標(biāo)是讓AOT編譯快到能開發(fā)者用它開發(fā)的程度?,F(xiàn)在,我們已經(jīng)沖進了2秒以內(nèi),因此將來的CLI中可能會默認開啟AOT。
作為向本次轉(zhuǎn)換過渡的一步,我們不再需要genDir,而outDir也變了:現(xiàn)在,我們會把為包生成的文件都打到node_modules里。
保留空白
過去編譯器會忠實地復(fù)現(xiàn)并在模板中包含制表符、換行符和空白?,F(xiàn)在你可選擇是否在組件和應(yīng)用中包含空白了。
可以在每個組件的裝飾器中指定這個配置,而當(dāng)前的默認值為true。
@Component({ templateUrl: 'about.component.html', preserveWhitespaces: false } export class AboutComponent {}
或者也可以在tsconfig.json中進行全局配置,其中該項默認值也是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ā)團隊打算將來把默認值改成false,默認為開發(fā)者節(jié)省空間。不要擔(dān)心你的<pre>標(biāo)簽,編譯器會智能處理它們。
改進的裝飾器支持
現(xiàn)在支持Lambda和對象字面量useValue、useFactory和data裝飾器中的表達式降級(expression lowering)。這樣可以使用只能在運行時計算的裝飾器中被降級(lower)的值。
因此現(xiàn)在可以不使用命名函數(shù),而改用Lambda函數(shù)。換句話說,執(zhí)行代碼不會影響你的d.ts或你的外部API。
Component({ provider: [{provide: SOME_TOKEN, useFactory: () => null}] }) export class MyClass {}
我們還會將表達式降級,作為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,默認生成v5項目。
在這次小版本升級中,我們默認打開了構(gòu)建優(yōu)化器,讓開發(fā)者拿到更小的包。
我們還修改了使用.tsconfig文件的方式,以更嚴格地遵守TypeScript標(biāo)準(zhǔn)。此前,如果檢測到延遲加載的路由,而且你在tsconfig.json中手工指定了一組files或include,那這些路由會自動化處理。而如今,根據(jù)TypeScript規(guī)范,我們不再這么干了。默認情況下,CLI對TypeScript的配置中沒有files或include,因此多數(shù)開發(fā)者不會受影響。
Angular表單添加updateOn Blur/Submit
這樣可以根據(jù)blur或submit來運行驗證和更新值的邏輯了,不必再單純依賴input事件。
表單對應(yīng)用很重要,如果有服務(wù)端驗證,或者驗證或更新值會觸發(fā)較慢的操作,你當(dāng)然希望它少跑幾次?,F(xiàn)在你可以在控件層面控制驗證和更新值的時機了,也可以在表單層面設(shè)置。
此外,你現(xiàn)在可以直接在選項中指定asyncValidators,而不是通過第三個參數(shù)指定。
模板驅(qū)動的表單
以前
<input name="firstName" ngmodel=""/>
以后
<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會默認拉取這個新版本,讓包大小有明顯減小。如果你沒使用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),也公布了一些新的廢棄項。以上指南會詳細介紹這些變更。
已知問題
當(dāng)前已知與source map相關(guān)的問題。某些source map會報“未定義的源”錯誤。
https://github.com/angular/angular/issues/19840
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular2里獲取(input file)上傳文件的內(nèi)容的方法
這篇文章主要介紹了Angular2里獲?。╥nput file)上傳文件的內(nèi)容的方法,非常具有實用價值,需要的朋友可以參考下2017-09-09基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能,通過第三方控件來實現(xiàn),感興趣的朋友跟著小編一起看看具體實現(xiàn)代碼吧2015-10-10angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08AngularJS教程之MVC體系結(jié)構(gòu)詳解
本文主要講解AngularJS MVC體系結(jié)構(gòu),這里提供詳細的教程供大家學(xué)習(xí)參考,有需要的小伙伴可以參考下2016-08-08Angular.Js之Scope作用域的學(xué)習(xí)教程
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過多個示例代碼介紹的非常詳細,相信對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-04-04