iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

Angular:踏上現代英雄之旅 系列

Angular 官網的經典教學「英雄之旅」(Tour of Heroes) 已成絕響,讓不少新手少了一張入門地圖。
這個系列將結合我近幾年的 Angular 開發經驗,試著重建屬於這個時代的英雄之旅。
希望無論你是新手還是老手,都能和我一起踏上這段旅程,並透過你的回饋讓這趟旅程更完整、更有趣!

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day 21|Signals 核心:signal, computed, effect

哈囉,各位邦友們!在 Day17 時我們已經有把 computed 與 effect 帶進 Heroes 專案,只是當時聚焦在功能面。今天我們換個角度,回頭解構...

2025-10-05 ‧ 由 阿蘇 分享
DAY 22

Day 22|toSignal:Observable 與 Signal 整合

哈囉,各位邦友們!昨天我們把 signal、computed 與 effect 的分工重新梳理過一遍,讓資料在服務與元件之間的流向更清楚。不過專案裡仍有幾段 R...

2025-10-06 ‧ 由 阿蘇 分享
DAY 23

Day 23|非同步:resource() API

哈囉,各位邦友們!昨天我們把 Heroes 專案裡分散的 RxJS pipeline 收斂進 toSignal,讀寫邏輯簡潔不少。但每次遇到非同步資料,還是得自...

2025-10-07 ‧ 由 阿蘇 分享
DAY 24

Day 24|架構演進:從 NgModule 到 Standalone

哈囉,各位邦友們!昨天我們借助 resource() API 整頓了 Heroes 專案的非同步狀態,感受 Signals 與 RxJS 攜手合作的威力。今天換...

2025-10-08 ‧ 由 阿蘇 分享
DAY 25

Day 25|延遲載入:@defer

哈囉,各位邦友們!今天的主角是 Angular v17 引入的「可延遲視圖」:@defer。它能讓你把「非關鍵、可晚點出現」的區塊推遲載入,改善初始載入與互動速...

2025-10-09 ‧ 由 阿蘇 分享
DAY 26

Day 26|主題總結:重點速覽

哈囉,各位邦友們!從 Day19 的 Reactive Forms 起步,走過了 Signals 與 RxJS 的整合,再到 Standalone 架構與 @d...

2025-10-10 ‧ 由 阿蘇 分享
DAY 27

Day 27|部署上線:ng build 與 GitHub Pages

哈囉,各位邦友們!歷經從 Standalone 專案起手,走過服務、HTTP、Signals 與 @defer。今天的目標,就是讓 Day01~Day26 打造...

2025-10-11 ‧ 由 阿蘇 分享
DAY 28

Day 28|變更檢測:Zoneless

哈囉,各位邦友們!昨日把專案部署到 GitHub Pages。接下來就該面對效能,視角放回 Angular 的變更檢測,並探討新版框架提供的 zoneless...

2025-10-12 ‧ 由 阿蘇 分享
DAY 29

Day 29|測試:單元測試與 E2E 測試

哈囉,各位邦友們!今天要來學習單元測試 + E2E 測試,確保每次重構或新增功能都能放心使用。 今天要做什麼? 啟動 Angular 單元測試環境。 在 he...

2025-10-13 ‧ 由 阿蘇 分享
DAY 30

Day 30|完結篇:總結與完賽心得

哈囉,各位邦友們!今天是鐵人賽的最後一天,也是這系列的的完結篇。我們把一個 Standalone、Signals、Zoneless 的 Angular 專案從無...

2025-10-14 ‧ 由 阿蘇 分享