【Angular開發】Angular 16發布:發現前7大功能

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

Standalone Project Support in Angular 16

其他功能

Angular 16還提供了許多其他改進開發人員體驗的更改:

  • 通過語言服務自動導入組件和管道。
  • 通過CLI支持TypeScript 5.0、ECMAScript裝飾器、服務工作者和SCP。
  • CSP支持在線樣式。
  • 自閉標簽。
  • 停止對ngcc和TypeScript 4.8的支持。

結論

總體而言,Angular 16提供了一些重要功能。這些功能中的大多數都是我們在后續版本中可以期待的更大更新的墊腳石。您可以按照Angular的官方文檔將現有項目升級到Angular 16。

如果您有任何問題,請通過我們的支持論壇、支持門戶或反饋門戶與我們聯系。我們非常樂意為您提供幫助!

本文:【Angular開發】Angular 16發布:發現前7大功能 | 程序員云開發,云時代的程序員.

歡迎收藏【架構師酒館】和【開發者開聊】

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/214447.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/214447.shtml
英文地址,請注明出處:http://en.pswp.cn/news/214447.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

機器學習基礎介紹

百度百科&#xff1a; 機器學習是一門多領域交叉學科&#xff0c;涉及概率論、統計學、逼近論、凸分析、算法復雜度理論等多門學科。專門研究計算機怎樣模擬或實現人類的學習行為&#xff0c;以獲取新的知識或技能&#xff0c;重新組織已有的知識結構使之不斷改善自身的性能。 …

手工酸奶店如何選址?開在哪里比較合適?

手工酸奶店是一個非常受歡迎的創業項目&#xff0c;但想要成功開店&#xff0c;選址是非常重要的。 本人開酸奶店5年時間&#xff0c;下面我將為大家分享一些選址的小技巧&#xff0c;希望對大家有所幫助。&#xff08;可以點贊收藏&#xff0c;方便以后隨時查閱&#xff09; …

入職字節外包一個月,我離職了。。。

有一種打工人的羨慕&#xff0c;叫做“大廠”。 真是年少不知大廠香&#xff0c;錯把青春插稻秧。 但是&#xff0c;在深圳有一群比大廠員工更龐大的群體&#xff0c;他們頂著大廠的“名”&#xff0c;做著大廠的工作&#xff0c;還可以享受大廠的伙食&#xff0c;卻沒有大廠…

12.11 C++ 作業

完善對話框&#xff0c;點擊登錄對話框&#xff0c;如果賬號和密碼匹配&#xff0c;則彈出信息對話框&#xff0c;給出提示”登錄成功“&#xff0c;提供一個Ok按鈕&#xff0c;用戶點擊Ok后&#xff0c;關閉登錄界面&#xff0c;跳轉到其他界面 如果賬號和密碼不匹配&#xf…

樹根研習社|數據為王,洞察“工業數據采集”背后的價值與實踐

一、工業數據采集是什么&#xff1f; 數據采集是將各種信息傳感設備通過網絡結合起來&#xff0c;實現任何時間、任何地點&#xff0c;人、機、物的互聯互通。數據采集的主要的作用是&#xff1a; “翻譯官”&#xff1a;不同程序語言的設備數據通過協議解析“翻譯”為上層系…

淘寶權益玩法平臺的Serverless化實踐

通過對權益玩法平臺現有業務應用的Serverless化改造&#xff0c;權益團隊在雙十一期間完美地支撐了業務需求&#xff0c;在研發效率、運維保障等方面都體現出了很高的價值和收益。 項目背景 淘寶權益平臺是負責淘寶權益營銷的核心團隊&#xff0c;團隊除了負責拉菲權益平臺外&a…

1.cloud-微服務架構編碼構建

1.微服務cloud整體聚合父工程 1.1 New Project 1.2 Maven選版本 1.3 字符編碼 1.4 注解生效激活 主要為lombok中的Data 1.5 java編譯版本選8 1.6 File Type過濾 *.hprof;*.idea;*.iml;*.pyc;*.pyo;*.rbc;*.yarb;*~;.DS_Store;.git;.hg;.svn;CVS;__pycache__;_svn;vssver.scc;v…

Nginx配置文件的基本用法

Nginx簡介 1.1概述 Nginx是一個高性能的HTTP和反向代理服務器。 是一款輕量級的高性能的web服務器/反向代理服務器/電子郵件&#xff08;IMAP/POP3&#xff09;代理服務器 單臺物理服務器可支持30 000&#xff5e;50 000個并發請求。 1.2Nginx和Apache的優缺點 &#xff…

mybatis數據輸出-insert操作時獲取自增列的值給對應的屬性賦值

jdbc-修改 水果庫存系統的 BaseDao 的 executeUpdate 方法支持返回自增列-CSDN博客 1、建庫建表 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIMARY KEY(emp_id) );INSE…

王炸升級!PartyRock 10分鐘構建 AI 應用

前言 一年一度的亞馬遜云科技的 re:Invent 可謂是全球云計算、科技圈的狂歡&#xff0c;每次都能帶來一些最前沿的方向標&#xff0c;這次也不例外。在看完一些 keynote 和介紹之后&#xff0c;我也去親自體驗了一些最近發布的內容。其中讓我感受最深刻的無疑是 PartyRock 了。…

基于SSM的健身房預約系統設計與實現

末尾獲取源碼 開發語言&#xff1a;Java Java開發工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 數據庫&#xff1a;MySQL5.7和Navicat管理工具結合 服務器&#xff1a;Tomcat8.5 開發軟件&#xff1a;IDEA / Eclipse 是否Maven項目&#xff1a;是 目錄…

網絡安全攻擊預警/態勢預測算法匯總

總結&#xff1a; 網絡安全攻擊預警/態勢預測算法眾多&#xff0c;主要包括&#xff1a; 基于統計學的算法&#xff1a;協方差矩陣、馬爾可夫模型等&#xff1b; 基于機器學習的算法&#xff1a;貝葉斯網絡、聚類算法、支持向量機SVM、遺傳算法、層次分析法AHP、決策樹等&am…

每日一道算法題 1

借鑒文章&#xff1a;Java-敏感字段加密 - 嗶哩嗶哩 題目描述 給定一個由多個命令字組成的命令字符串&#xff1b; 1、字符串長度小于等于127字節&#xff0c;只包含大小寫字母&#xff0c;數字&#xff0c;下劃線和偶數個雙引號 2、命令字之間以一個或多個下劃線_進行分割…

Proxmark3 Easy救磚-20231209

事情是這樣的&#xff0c;在淘寶買了個PM3&#xff0c;拿到手后刷固件的&#xff0c;一不小心刷成磚頭了&#xff0c;現象就是四個燈全亮&#xff0c;插上電腦USB不識別。問商家他也不太懂&#xff0c;也是個半吊子技術&#xff0c;遠程給我刷機搞了半天也沒有搞定&#xff0c;…

微表情檢測(三)----基于光流特征的微表情檢測

Micro-expression spotting based on optical flow features 基于光流特征的微表情檢測 Abstract 本文提出了一種高精度和可解釋性的自動微表情檢測方法。首先&#xff0c;我們設計了基于鼻尖位置的圖像對齊方法&#xff0c;以消除由頭部晃動引起的全局位移。其次&#xff0…

C語言中的一維數組與二維數組

目錄 一維數組數組的創建初始化使用在內存中的存儲 二維數組創建初始化使用在內存中的存儲 數組越界 一維數組 數組的創建 數組是一組相同類型元素的集合。 int arr1[10]; char arr3[10]; float arr4[10]; double arr5[10];下面這個數組能否成功創建&#xff1f; int count…

Linux上編譯和測試V8引擎源碼

介紹 V8引擎是一款高性能的JavaScript引擎&#xff0c;廣泛應用于Chrome瀏覽器和Node.js等項目中。在本篇博客中&#xff0c;我們將介紹如何在Linux系統上使用depot_tools工具編譯和測試V8引擎源碼。 步驟一&#xff1a;安裝depot_tools depot_tools是一個用于Chromium開發…

學習IO的第七天

作業&#xff1a;使用消息隊列完成兩個進程間的相互通信 #include <head.h>struct msgbuf {long mtype; //消息類型char mtext[1024]; //正文大小 };#define SIZE (sizeof(struct msgbuf)-sizeof(long))int main(int argc, const char *argv[]) {//1.創…

打印一個整數的每一位和求階乘(遞歸和非遞歸的C語言實現)

文章目錄 打印一個整數的每一位思考遞歸非遞歸 求階乘遞歸非遞歸證明0的階乘為1 寫代碼中遇到的VS輸出窗口提示信息為什么VS平臺32位和64位的long都是4字節&#xff1f;%zu是什么格式說明符VS下_int128為什么用不了 打印一個整數的每一位 思考 負數和0都是整數&#xff0c;我…

DevEco Studio將編輯器整體文本改為簡體中文

我們打開編輯器 隨便進入一個項目 這里 我們左上角目錄 選擇 File下面菜單中的 Settings… 打開配置界面 然后在設置窗口左側導航欄中 選擇 Plugins 插件 然后上方導航欄中 選擇 Installed 參考下圖 然后 找到這個Chinese(Simplified) Chinese是什么應該不用我多說吧 我們把…