iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

Angular、React、Vue 三框架實戰養成:從零打造高品質前端履歷網站 系列

從 HTML、SCSS、TypeScript 基礎出發,前面先以 Angular 為主,打造高品質可上線的前端履歷網站,最後以 React 與 Vue 進行對照實作,完成三個版本的作品並進行效能與開發體驗比較,讓你一次掌握三大前端框架的核心能力。

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

Day 11 Angular 表單與雙向綁定 – 關鍵字搜尋 + Reactive Forms 驗證 今日目標

今日目標 了解 雙向綁定 [(ngModel)]:畫面改 → 變數改;變數改 → 畫面跟著改 在 Skills 區塊加入「關鍵字搜尋」即時過濾 使用 Reac...

2025-09-25 ‧ 由 Chiayu 分享
DAY 12

Day 12 抽離資料到 Service – 認識 Angular 的相依性注入(DI)

今日目標 了解 Service 是什麼、為什麼需要它 用 CLI 建立 Skills / Projects 兩個資料服務 在元件中 注入(inject)...

2025-09-26 ‧ 由 Chiayu 分享
DAY 13

Day 13 Angular Routing – 作品集加上「詳情頁」

今日目標 認識 Angular Router 與 RouterModule 在專案中設定基礎路由(首頁、作品詳情) 從 Projects 區塊加上連結 →...

2025-09-27 ‧ 由 Chiayu 分享
DAY 14

Day 14 Angular 巢狀路由與 Lazy Loading – 作品詳情子頁面

今日目標 認識 巢狀路由 (child routes) 與 <router-outlet> 的嵌套使用 在「作品詳情」頁建立 Info / Gal...

2025-09-28 ‧ 由 Chiayu 分享
DAY 15

Day 15 Angular Pipe 與 Directive – 讓模板更聰明

今日目標 認識 Angular 內建 Pipe(格式化輸出) 自訂一個 Pipe(例如:技能名稱轉大寫、描述截斷) 認識 Angular 內建 Directi...

2025-09-29 ‧ 由 Chiayu 分享
DAY 16

Day 16 Angular HttpClient 與 RxJS – 串接 API 資料

今日目標 認識 Angular 的 HttpClient 模組 了解 Observable 與 async pipe 的基礎用法 把 Projects 從本地...

2025-09-30 ‧ 由 Chiayu 分享
DAY 17

Day 17 Router 進階 – 守衛 (Guards) 與 Resolver(資料先載好再進頁)

今日目標 了解 Guards:canActivate / canActivateChild / canMatch(或 canLoad) 的差別與使用時機 建立...

2025-10-01 ‧ 由 Chiayu 分享
DAY 18

Day 18 Angular 狀態管理 – 用 Service + BehaviorSubject 打造小型 Store

今日目標 認識「狀態管理」是什麼,為什麼需要它 使用 RxJS BehaviorSubject 管理 UI 狀態(例如主題切換、技能分類、搜尋關鍵字) 建立一...

2025-10-02 ‧ 由 Chiayu 分享
DAY 19

Day 19 Angular RxJS 進階 – Loading 狀態與 Debounce 搜尋

今日目標 建立 全域 Loading 狀態管理(讓任何 API 呼叫都能顯示「載入中」動畫) 認識並使用 RxJS 常見運算子: debounceTime...

2025-10-03 ‧ 由 Chiayu 分享
DAY 20

Day 20 Angular 版履歷網站完成與部署

今日目標 調整專案結構(Core / Shared / Feature Modules) 小幅優化(Lazy Loading、SEO meta tag、切分元...

2025-10-04 ‧ 由 Chiayu 分享