iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

Angular 22 Signal 進化論 系列

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

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

Day 1:為什麼想聊 Angular Signal?

我與 Angular 的相遇 相信講到前端框架,大家第一時間想到的通常會是 Vue、React,甚至也有人會推薦 Svelte 這類近年討論度很高的框架。但一講...

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

Day 2:Angular Signal 是什麼?從 Change Detection 理解它的運作原理

Angular 傳統 Change Detection 傳統 Angular 在監測資料變化時,通常會搭配 zone.js。像是 DOM 事件、Promise、...

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

Day 3:從 set()、update() 看懂 Angular Signal 的基本使用與更新機制

昨天我們先試著理解,在 Template 中使用 Signal() 時,Angular 是如何建立依賴關係,並在 Signal 發生變化後,知道哪些 View...

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

Day 4:Angular 怎麼知道誰正在讀 Signal?從 Reactive Context 理解依賴追蹤

前面我們看過,當 Template 讀取 Signal 時,Angular 會記住「誰依賴了誰」;當 Signal 發生變化後,也會透過 Reactive Gr...

2026-09-18 ‧ 由 Antonio 分享
DAY 5

Day 5:從 Reactive Graph 到 View Tree,看 Angular 如何找到真正需要更新的畫面

前面我們已經知道,當 Signal 的值發生變化後,Angular 會透過 Reactive Graph 找到受到影響的 Consumer。 不過找到 Cons...

2026-09-19 ‧ 由 Antonio 分享
DAY 6

Day 6:Resource API,把非同步資料帶進 Signal

今天來看 Angular Signal 裡一個很重要的非同步資料 API:Resource API。 前面介紹 Signal 時,我們處理的大多都是同步狀態,例...

2026-09-20 ‧ 由 Antonio 分享
DAY 7

Day 7:從 Resource 到 httpResource,用 Signal 管理 HTTP 資料請求

昨天我們提到,Resource API 本身是一套通用的非同步資料模型,比較適合用在「讀取資料」這類情境,而不是新增、修改或刪除資料這種 Mutation 操作...

2026-09-21 ‧ 由 Antonio 分享
DAY 8

Day 8:用 Orval 串起 Angular API Contract,同時產生 HttpClient、httpResource 與 Zod

前後端在對接 API 時,常見的問題之一,就是雙方對資料格式的定義逐漸不一致。 前端串接 API 時,通常會根據後端提供的 Response 格式,定義對應的...

2026-09-22 ‧ 由 Antonio 分享
DAY 9

Day 9:httpResource 實務篇,統一回覆格式與 chain 相依請求

昨天我們透過 Orval 串起 API Contract,了解如何根據 OpenAPI 規格產生前端需要的型別與 API 呼叫方式。 接下來延續這個基礎,看看後...

2026-09-23 ‧ 由 Antonio 分享
DAY 10

Day 10:linkedSignal 讓相依狀態也能被修改

昨天我們透過 httpResource() 搭配 chain() 處理兩個非同步資料之間的依賴。下游 Request 需要使用上游資料時,會等上游完成後再繼續;...

2026-09-24 ‧ 由 Antonio 分享