iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

Angular 22 Signal 進化論 系列

Angular 是怎麼知道畫面該更新的?Signal 出現之後,又改變了什麼?這次會從傳統的 Change Detection 開始,帶大家一步一步理解 Signal 如何追蹤資料變化,以及它和 Angular 原本更新機制之間的關係,最後再看看 Angular 22 中 Signal 帶來的新玩法。

參賽天數 26 天 | 共 26 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11:用 rxResource 串起 Observable 與 Resource

前面介紹了不少 Resource 到 httpResource() 的應用。不過在 Angular 開發中,Observable 與 RxJS 仍然是很常見的非...

2026-09-25 ‧ 由 Antonio 分享
DAY 12

Day 12:從 httpResource 到 TanStack Query,認識 Server State

前面我們花了不少時間討論,為什麼「請求本身的狀態」和「元件的顯示狀態」應該分開處理。 延續這個方向,這篇想從一個更根本的問題開始:TanStack Query...

2026-09-26 ‧ 由 Antonio 分享
DAY 13

Day 13:從 Router Event 到 Signal

路由狀態管理在前端開發中比較少被單獨拿出來討論,但在 Angular 裡,一次路由導航其實會經過不少階段,也會在過程中發出不同的 Router Event,例如...

2026-09-27 ‧ 由 Antonio 分享
DAY 14

Day 14:Lazy Loading 不只一種,從 Router Preloading、@defer 到 injectAsync()

當 Client Side Rendering 的應用越來越大時,我們通常會開始思考,能不能把原本一次載入的內容拆得更小,等到真正需要時再下載,避免初始載入過多...

2026-09-28 ‧ 由 Antonio 分享
DAY 15

Day 15:搞懂 Injection Context,從 inject()、runInInjectionContext() 到 injectAsync()

前面提到 Injection Context 時,可能會讓人聯想到先前介紹過的 Reactive Context。我一開始也有點搞混,因此花了一些時間重新理解...

2026-09-29 ‧ 由 Antonio 分享
DAY 16

Day 16:即將登場的 Route Resources,Angular Router 為什麼需要新的資料載入方式?

過去在 Angular Router 中,如果希望進入 Component 前先完成資料載入,可以透過 Resolver,讓資料取得流程在 Component...

2026-09-30 ‧ 由 Antonio 分享
DAY 17

Day 17:effect() 不是拿來同步 Signal 的,Angular 的 Side Effect 該怎麼寫?

effect() 是 Angular signal 裡很容易被誤用的一個 API。因為寫法直覺,只要讀取 signal,就能在值改變時執行一些事情,所以很常被拿...

2026-10-01 ‧ 由 Antonio 分享
DAY 18

Day 18:Angular Signal Forms 穩定了,跟我們用了這麼久的 Reactive Forms 到底差在哪?

在 Angular 中處理表單,很多專案使用的都是 Reactive Forms。 我們會透過 FormControl 管理單一欄位,用 FormGroup 組...

2026-10-02 ‧ 由 Antonio 分享
DAY 19

Day 19:Signal Forms Cross-field Validation 與欄位更新時機

上一篇介紹 Signal Forms 時,已經看到可以透過 Schema 定義欄位驗證,例如 required()、email()、minLength()。 這...

2026-10-03 ‧ 由 Antonio 分享
DAY 20

Day 20:Signal Forms 非同步驗證,validateHttp 與 validateAsync

前兩篇介紹了 Signal Forms 的基本驗證,以及需要參考其他欄位的 Cross-field Validation。 不過有些驗證沒辦法只靠前端資料判斷,...

2026-10-04 ‧ 由 Antonio 分享