Angular 5.0 的特性介紹

我們很高興地宣布Angular 5.0.0——五角形甜甜圈發布啦！這又是一個主版本，包含新功能並修復了許多bug。它再次體現了我們把Angular做得更小、更快、更好用的一貫目標。 Angular 5.0 來了! 有這些重大變化,這篇文章就為大家介紹了Angular 5.0大變化，感興趣的小伙伴們可以參考一下，希望能幫助到大家。

以下簡單介紹v5的重大變更。要了解詳情，請看changelog。

建置最佳化器

5.0.0開始，透過CLI執行的產品建置預設使用建置最佳化器。

建置優化器是CLI中的一個工具，它是基於我們對你Angular應用的理解，可以把建置後的套件變得更小。

建置最佳化器有兩個主要任務。首先，把你應用的某些部分標記為pure，以便原有工具利用它來改進「tree shaking」的最佳化效果，同時刪除應用程式中不必要的東西。

其次，建立優化器會從你的應用程式中刪除Angular裝飾器程式碼。裝飾器只有編譯器會用，執行時不用，可以刪除。上述兩項最佳化都可以減少產生JS套件的大小，同時加快應用程式啟動速度。

Angular Universal狀態轉交API及對DOM的支援

這樣更便於在服務端與客戶之間共用應用程式狀態。

Angular Universal是一個幫助開發者執行服務端渲染（SSR）的專案。服務端渲染產生的HTML對不支援JS的蜘蛛和爬蟲友好，同時有助於提升使用者感知效能。

在5.0.0中，開發團隊加入了ServerTransferStateModule及對應的BrowserTransferStateModule。這個模組可以幫開發者在服務端渲染產生的內容中加入相關訊息，然後傳送給客戶端，以避免重複產生。這對於透過HTTP取得資料的場景是很有用的。透過把狀態從伺服器傳送到客戶端，開發者就不用再發第二次HTTP請求了。狀態轉交的相關文件幾週後會發布。

Angular Universal團隊也把平台伺服器Domino加到​​了平台伺服器中。 Domino支援在伺服器端環境下更多的開箱即用的DOM操作，可以改善我們對非服務端第三方JS及元件庫的支援。

編譯器改進

為支援遞增編譯，我們改進了Angular編譯器。結果讓重新構建加快，特別是對產品建置和AOT構建，效果更明顯。我們還增強了裝飾器，透過刪除空白達到減少包裝大小的目的。

TypeScript轉換

現在，Angular編譯器底層的工作機制是TypeScript轉換，讓遞增式重新建置快了很多。 TypeScript轉換是TypeScript 2.3新增的特性，可以讓我們深入到標準TypeScript編譯管道。

在開啟AOT標籤的情況下，執行ng serve就可以利用上述機制。

ng serve --aot

建議大家都試試看。將來這個配置會成為CLI的預設值。許多專案都有效能問題，涉及上千組件，我們希望各種規模的專案都能從這些改進中受益。

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

我們的目標是讓AOT編譯快到能開發者用它開發的程度。現在，我們已經衝進了2秒以內，因此未來的CLI中可能會預設為開啟AOT。

作為向本次轉換過渡的一步，我們不再需要genDir，而outDir也改變了：現在，我們會把為套件產生的檔案都打到node_modules裡。

保留空白

過去編譯器會忠實地復現並在模板中包含製表符、換行符和空白。現在你可選擇是否在元件和應用程式中包含空白了。

可以在每個元件的裝飾器中指定這個配置，而目前的預設值為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"
 ]
}

一般規則是元件層級配置要覆寫應用程式層級配置。開發團隊打算將來把預設值改成false，預設為開發者節省空間。不要擔心你的

標籤，編譯器會智慧處理它們。 </p><p><strong>改進的裝飾器支援</strong></p><p>現在支援Lambda和物件字面量useValue、useFactory和data裝飾器中的表達式降級（expression lowering）。這樣可以使用只能在執行時間計算的裝飾器中被降級（lower）的值。 </p><p>因此現在可以不使用命名函數，而改用Lambda函數。換句話說，執行程式碼不會影響你的d.ts或你的外部API。 </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Component({
 provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

登入後複製

我们还会将表达式降级，作为useValue的一部分。

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

国际化的数值、日期和货币管道

我们写了新的数值、日期和货币管道，让跨浏览器国际化更方便，不需要再使用i18n的腻子脚本（polyfill）。

在以前版本的Angular中，我们一直依赖浏览器及其i18n API提供数值、日期和货币格式。为此，很多开发者都在使用腻子脚本（polyfill），而结果也不好。很多人反馈说一些常见的格式（如货币）不能做到开箱即用。

而在5.0.0中，我们把这个管道更新成了自己的实现，依赖CLDR提供广泛的地区支持，而且可配置。以下是我们对v4和v5所做的比较：a document comparing the pipe behavior between v4 and v5。

如果你还没条件使用新管理，可以导入DeprecatedI18NPipesModule以降级到旧的行为。

StaticInjector代替ReflectiveInjector

为了消除对更多腻子脚本（polyfill）的依赖，我们用StaticInjector代替了ReflectiveInjector。前者不再需要Reflect，为开发者减少了应用大小。

以前

ReflectiveInjector.resolveAndCreate(providers);

以后

Injector.create(providers);

提升Zone的速度

一方面提升了Zone的速度，另一方面也可以在特别关注性能的应用中绕过它。

若要绕过它，启动应用时加上noop：

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

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

exportAs

组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称，可以在不破坏原有代码的情况下在Angular语法中使用新名称。Angular Material项目已经在其前缀迁移项目中用上了，对其他组件作者肯定也有用。

示例

@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中发送请求，它小巧易用。HttpClient受到了开发者的广泛赞誉，因此我们推荐在所有应用中使用它，放弃之前的@angular/http library。

要升级HttpClient，需要在每个模块的@angular/common/http中把HttpModule替换为HttpClientModule，注入HttpClient服务，删除所有map(res => res.json())。

CLI v1.5

从Angluar CLI v1.5开始，已经开始支持Angluar v5.0.0，默认生成v5项目。

在这次小版本升级中，我们默认打开了构建优化器，让开发者拿到更小的包。

我们还修改了使用.tsconfig文件的方式，以更严格地遵守TypeScript标准。此前，如果检测到延迟加载的路由，而且你在tsconfig.json中手工指定了一组files或include，那这些路由会自动化处理。而如今，根据TypeScript规范，我们不再这么干了。默认情况下，CLI对TypeScript的配置中没有files或include，因此多数开发者不会受影响。

Angular表单添加updateOn Blur/Submit

这样可以根据blur或submit来运行验证和更新值的逻辑了，不必再单纯依赖input事件。

表单对应用很重要，如果有服务端验证，或者验证或更新值会触发较慢的操作，你当然希望它少跑几次。现在你可以在控件层面控制验证和更新值的时机了，也可以在表单层面设置。

此外，你现在可以直接在选项中指定asyncValidators，而不是通过第三个参数指定。

模板驱动的表单

以前

以后

<input name="firstName" ngModel [ngModelOptions]="{updateOn: &#39;blur&#39;}">

或者

<form [ngFormOptions]="{updateOn:&#39;submit&#39;}">

反应式表单

以前

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

以后

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

RxJS 5.5

我们已经把使用的RxJS更新到5.5.2或更高版本。这个新发布的RxJS可以让开发完全摆脱之前导入机制的副作用，因为我们以新的lettable operators的方式使用了RxJS。这些新操作符消除了副作用，以及之前导入操作符中“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);

现在这样:

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

此外，RxJS现在发行了一个使用ECMAScript Modules的版本。新Angular CLI会默认拉取这个新版本，让包大小有明显减小。如果你没使用Angular CLI，那还是应该指向这个新版本。相关文档在此：Build and Treeshaking。

新的路由器生成周期事件

我们给路由器添加了新的生命周期事件，让开发者可以跟踪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，告诉你整个过程，以及更新前要做哪些事，还有更新应用的步骤，以及做好迎接Angular未来版本的准备等信息。

我们删除很多以前废弃的API（如OpaqueToken），也公布了一些新的废弃项。以上指南会详细介绍这些变更。

相关推荐：

详解Angular中支持SCSS的方法

Angular4表单响应功能示例分析

angularJS的一些用法

以上是Angular 5.0 的特性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！