iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

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

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

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

Day 1|系列介紹:重建現代英雄之旅!

哈囉,各位邦友們!接下來的 30 天,我會帶大家用最新的 Angular 技術,從零開始打造一個「英雄管理系統」(Hero Management)。目標很單純,...

2025-09-15 ‧ 由 阿蘇 分享
DAY 2

Day 2|環境設定:Standalone 專案結構

哈囉,各位邦友們!今天我們試著用最新的 Angular CLI 來建立一個 Standalone 專案,並快速認識專案結構。 今天要做什麼? 用 Angula...

2025-09-16 ‧ 由 阿蘇 分享
DAY 3

Day 3|核心概念:Component 詳解

哈囉,各位邦友們!昨天我們把專案建好,今天正式走進 Angular 的核心:Component。先抓住 @Component 的骨架,再做一個小小的子元件,最後...

2025-09-17 ‧ 由 阿蘇 分享
DAY 4

Day 4|範本語法:資料綁定與 @if 控制流

哈囉,各位邦友們!昨天我們完成了第一個子元件並理解了元件的裝飾器結構。今天來進一步把資料綁到畫面上,並用 @if/@else 做條件顯示。 今天要做什麼? 在...

2025-09-18 ‧ 由 阿蘇 分享
DAY 5

Day 5|範本語法:@for 迴圈與 track

哈囉,各位邦友們!昨天我們把單一 hero 綁到畫面,並用 @if/@else 來控制顯示。今天把單一資料改成多筆,學習用 @for 來渲染。 今天要做什麼?...

2025-09-19 ‧ 由 阿蘇 分享
DAY 6

Day 6 | 使用者互動:事件處理與 Signal 初探

哈囉,各位邦友們!昨天用 @for 把英雄清單渲染到畫面,也學會 track、$index、@empty。今天來加上使用者互動,讓點擊列表中的英雄時,會在下方畫...

2025-09-20 ‧ 由 阿蘇 分享
DAY 7

Day 7|表單技巧:FormsModule 與 ngModel

哈囉,各位邦友們!昨天完成用事件綁定與 @for/@if 搭配 scss 來實現選中狀態時的互動。今天來試著挑戰透過input編輯英雄名稱,並且在畫面上即時更新...

2025-09-21 ‧ 由 阿蘇 分享
DAY 8

Day 8|架構設計:Service 與依賴注入

哈囉,各位邦友們!昨天我們用 FormsModule 在 Selected 區塊即時編輯英雄名稱,同步更新清單與選取畫面。接下來要把英雄資料抽到 HeroSer...

2025-09-22 ‧ 由 阿蘇 分享
DAY 9

Day 9|非同步處理:RxJS Observable 入門

哈囉,各位邦友們!昨天我們把資料抽到 HeroService,並用 inject() 在元件中取用。今天來試著把同步的 getAll 改為 Observable...

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

Day 10|路由系統:provideRouter

哈囉,各位邦友們!昨天把資料流改為 Observable 並處理了 Loading/Error。今天來開始加入路由吧!從建立儀表板(Dashboard)與英雄列...

2025-09-24 ‧ 由 阿蘇 分享