Angular?于2023年5月3日發布了主要版本升級版Angular 16。作為一名Angular開發人員,我發現這次升級很有趣,因為與以前的版本相比有一些顯著的改進。
因此,在本文中,我將討論Angular 16的前7個特性,以便您更好地理解。
1.Angular Signals
Angular Signals是自Angular 16路線圖發布以來,開發人員一直在等待的主要功能。雖然Solid.js啟發了這個概念,但它對Angular來說是一個全新的概念。它允許您定義反應值并表達它們之間的依賴關系。換句話說,您可以有效地使用Angular信號來管理Angular應用程序中的狀態更改。
信號可以被識別為用戶可以同步訪問的規則變量。但它還附帶了一些附加功能,比如通知其他人(組件模板、其他信號、函數等)其值的更改,以及以聲明的方式創建派生狀態。
以下示例顯示了如何使用“角度”信號。
import { Component, computed, effect, signal } from '@angular/core'; import { CommonModule } from '@angular/common'; import { bootstrapApplication } from '@angular/platform-browser';@Component({selector: 'my-app',standalone: true,imports: [CommonModule],template: `<h1>Calculate Area</h1><p>Answer : {{ area() }}</p><button (click)="calculateArea(10,10)">Click</button>`, })export class App {height = signal(5);width = signal(5);area = computed(() => this.height() * this.width());constructor() {effect(() => console.log('Value changed:', this.area()));}calculateArea(height: number, width: number) {this.height.set(height);this.width.set(width);} }
在本例中,我創建了一個計算值區域和兩個名為height和width的信號。當通過調用calculateArea()函數更改信號值時,計算值將更新并顯示在模板中。這里有一個工作的Stacklitz示例供您嘗試。
雖然這看起來很神奇,但Angular并沒有放棄zone.js和RxJS。信號是一個可選功能,Angular在沒有它們的情況下仍然可以工作。Angular將在即將推出的版本中逐步改進Signals,使其成為一個完整的包。
2.服務器端渲染
與React相比,缺乏服務器端渲染(SSR)支持是Angular最顯著的缺點之一。Angular 16通過對服務器端渲染的一些重大改進解決了這個問題。
以前,Angular對SSR使用破壞性水合作用。在破壞性水合中,服務器首先將應用程序渲染并加載到瀏覽器。然后,當客戶端應用程序下載并啟動時,它會破壞已經渲染的DOM,并從頭開始重新渲染客戶端應用程序。這種方法導致了重大的用戶體驗問題,如屏幕閃爍,并對一些核心Web Vitals(如LCP或CLS.anug)產生了負面影響。
Angular 16引入了一種稱為非破壞性水合的新方法來防止這些缺點。下載并引導客戶端應用程序時,DOM不會被破壞。它使用相同的DOM,同時使用事件偵聽器等客戶端功能對其進行豐富。
無損水合作用仍處于開發者預覽階段。但是,您可以通過在引導應用程序時添加provideClientHydration()作為提供程序來啟用它。
import {bootstrapApplication,provideClientHydration, } from '@angular/platform-browser';...bootstrapApplication(RootCmp, {providers: [provideClientHydration()] });
根據Angular的官方發布說明,這只是一個開始。他們計劃在下一步探索部分水合作用,并滿足開發人員的幾個要求。您可以在這里找到更多關于Angular SSR開發計劃的信息。
3.實驗性Jest支持
Jest是JavaScript開發人員中使用最多的測試框架之一。Angular已經聽取了開發人員的請求,并在Angular 16中引入了實驗性的Jest支持。
您所要做的就是使用npm安裝Jest并更新angular.json文件。
// Install jest npm install jest --save-dev// angular.json {"projects": {"my-app": {"architect": {"test": {"builder": "@angular-devkit/build-angular:jest","options": {"tsConfig": "tsconfig.spec.json","polyfills": ["zone.js", "zone.js/testing"]}}}} }
他們計劃在未來的更新中將所有現有的Karma項目轉移到WebTestRunner。
4.基于esbuild的構建系統
Angular 16為開發服務器(ng-server)引入了一個基于esbuild的構建系統。Vite為這個新的開發服務器供電,并使用esbuild來構建工件。
這仍然處于開發人員預覽階段,但您可以通過使用以下內容更新angular.json文件來啟用它。
"architect": {"build": { "builder": "@angular-devkit/build-angular:browser-esbuild", ...
5.Required Inputs
在Angular 16中,現在可以根據需要定義輸入值。您可以使用@Input裝飾器或@Component裝飾器輸入數組來定義一個。
export class App {@Input({ required: true }) name: string = ''; }// or @Component({...inputs: [{name: 'name', required: true}] })
6.路由器輸入
Angular 16允許您將路由參數綁定到組件輸入中,從而無需將ActivatedRoute注入組件。若要啟用此功能,必須導入RouterModule并在app.module.ts文件中啟用bindToComponentInputs屬性。
@NgModule({imports: [...RouterModule.forRoot([], {bindToComponentInputs: true })...],... }) export class AppModule {}
The following example shows how we can bind query params to component inputs.
// Route const routes: Routes = [{path: "articles",component: ArticleComponent,}, ];// Component @Component({}) export class ArticleComponent implements OnInit {@Input() articleId?: string; ngOnInit() {} }
Now, when you navigate to the articles route, you can pass query params using the name of the component input. In this case, an example URL will look like the following.
http://localhost:4200/articles?articleId=001
If the input name is too long, you can rename the query parameter.
http://localhost:4200/articles?id=001 @Input('id') articleId?: string;
You can also use this approach to bind path parameters and route data.
7.獨立項目支持
Angular 14開始支持獨立于模塊的獨立組件。Angular 16通過支持獨立項目創建,將此提升到了一個新的水平。
Angular 16有一個通過Angular CLI創建獨立項目的標志。您必須使用-standalone標志執行ng個新命令。然后,它將生成一個沒有NgModules的項目。
ng new --standalone
其他功能
Angular 16還提供了許多其他改進開發人員體驗的更改:
- 通過語言服務自動導入組件和管道。
- 通過CLI支持TypeScript 5.0、ECMAScript裝飾器、服務工作者和SCP。
- CSP支持在線樣式。
- 自閉標簽。
- 停止對ngcc和TypeScript 4.8的支持。
結論
總體而言,Angular 16提供了一些重要功能。這些功能中的大多數都是我們在后續版本中可以期待的更大更新的墊腳石。您可以按照Angular的官方文檔將現有項目升級到Angular 16。
如果您有任何問題,請通過我們的支持論壇、支持門戶或反饋門戶與我們聯系。我們非常樂意為您提供幫助!
本文:【Angular開發】Angular 16發布:發現前7大功能 | 程序員云開發,云時代的程序員.
歡迎收藏【架構師酒館】和【開發者開聊】