iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 4 留言 156 瀏覽

鐵人賽 Modern Web DAY 30

Angular 22 Signal 進化論系列第 30 篇

技術 Day 30：Angular Router Providers 與生命週期管理，路由離開後 Service 會銷毀嗎？

平常在 Angular 中，我們可以透過 providers 決定 Service 的注入範圍。例如註冊在 Root，讓整個 Application 共用同一個...

Antonio ‧ 2026-10-14

1 Like 0 留言 41 瀏覽

鐵人賽 Modern Web DAY 29

Angular 22 Signal 進化論系列第 29 篇

技術 Day 29：Angular 也有 VueUse？使用 Signality 整合常見 Browser API

在 Vue 生態系中，VueUse 提供許多 Composables，讓我們可以快速使用瀏覽器功能，例如監聽網路狀態、保存使用者設定，或偵測元素是否進入可視範圍...

Antonio ‧ 2026-10-13

0 Like 0 留言 90 瀏覽

鐵人賽 Modern Web DAY 28

Angular 22 Signal 進化論系列第 28 篇

技術 Day 28：Angular 動態建立 Component，NgComponentOutlet 與 ViewContainerRef

平常在 Angular 中使用 Component，通常會直接在 Template 裡面宣告： <app-counter /> Angular 會...

Antonio ‧ 2026-10-12

1 Like 0 留言 92 瀏覽

鐵人賽 Modern Web DAY 27

Angular 22 Signal 進化論系列第 27 篇

技術 Day 27：NgRx Store vs SignalStore，從 Action、Reducer 到直接更新 State

前幾天我們使用 NgRx SignalStore 實作購物車，透過 withState() 管理商品資料、withComputed() 計算總金額，再利用 wi...

Antonio ‧ 2026-10-11

1 Like 0 留言 81 瀏覽

鐵人賽 Modern Web DAY 26

Angular 22 Signal 進化論系列第 26 篇

技術 Day 26：SignalStore 與 Strategy Pattern，透過 DI 動態切換業務邏輯

昨天我們使用 Angular 原生 Signal 與 NgRx SignalStore 實作購物車，透過 State 管理商品資料，再利用 Computed 計...

Antonio ‧ 2026-10-10

1 Like 0 留言 44 瀏覽

鐵人賽 Modern Web DAY 25

Angular 22 Signal 進化論系列第 25 篇

技術 Day 25：Angular SignalStore，原生 Signal 不夠用嗎？

在 Angular 開發中，如果資料只會被單一 Component 使用，通常可以直接透過 signal() 管理。但當多個 Component 需要共用同一份...

Antonio ‧ 2026-10-09

2 Like 0 留言 69 瀏覽

鐵人賽 Modern Web DAY 24

Angular 22 Signal 進化論系列第 24 篇

技術 Day 24：SPA Router 為什麼不再只靠 History API？

平常使用 Angular Router 時，可以透過 routerLink 或 router.navigate() 切換不同頁面。模板連結： <a ro...

Antonio ‧ 2026-10-08

2 Like 0 留言 96 瀏覽

鐵人賽 Modern Web DAY 23

Angular 22 Signal 進化論系列第 23 篇

技術 Day 23：RouteReuseStrategy，切換路由一定要銷毀 Component 嗎？

在後台系統中，很常會看到頁籤式介面，例如：病患列表掛號管理系統設定每個頁籤可能都對應不同的 Route： export const routes:...

Antonio ‧ 2026-10-07

2 Like 0 留言 60 瀏覽

鐵人賽 Modern Web DAY 22

Angular 22 Signal 進化論系列第 22 篇

技術 Day 22：Angular Render Lifecycle，從 afterNextRender 到 DestroyRef

過去在 Angular 中，只要遇到初始化、View 建立或資源清理，通常會先想到 Lifecycle Hooks： ngOnInit() // Input 初...

Antonio ‧ 2026-10-06

1 Like 0 留言 108 瀏覽

鐵人賽 Modern Web DAY 21

Angular 22 Signal 進化論系列第 21 篇

技術 Day 21：Angular Template 還適合呼叫 Method 嗎？從 Pipe、RxJS 到 computed

過去在寫 Angular 時，因為 Template 可以直接呼叫 Method，很容易在專案裡看到大量這樣的寫法。這種方式很直覺，也很方便，但通常不建議在...

Antonio ‧ 2026-10-05

2 Like 0 留言 98 瀏覽

鐵人賽 Modern Web DAY 20

Angular 22 Signal 進化論系列第 20 篇

技術 Day 20：Signal Forms 非同步驗證，validateHttp 與 validateAsync

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

Antonio ‧ 2026-10-04

0 Like 0 留言 171 瀏覽

鐵人賽 Build on Google AI

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 32 篇

技術 Day 32 - [成本最佳化] 節約型 AI：縮小影像酬載以大幅降低雲端成本

當選取大型圖片或相片時，直接將其轉換為行內 base64 資料會大幅膨脹酬載（payload）大小，並消耗大量的輸入 Token。透過在用戶端將圖片尺寸縮小至小...

Connie ‧ 2026-10-04

2 Like 0 留言 74 瀏覽

鐵人賽 Modern Web DAY 19

Angular 22 Signal 進化論系列第 19 篇

技術 Day 19：Signal Forms Cross-field Validation 與欄位更新時機

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

Antonio ‧ 2026-10-03

2 Like 0 留言 80 瀏覽

鐵人賽 Modern Web DAY 18

Angular 22 Signal 進化論系列第 18 篇

技術 Day 18：Angular Signal Forms 穩定了，跟我們用了這麼久的 Reactive Forms 到底差在哪？

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

Antonio ‧ 2026-10-02

0 Like 0 留言 149 瀏覽

鐵人賽 Build on Google AI

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 31 篇

技術 Day 31 - 降低雲端成本與延遲：AI 語音合成的響應式快取

我想最佳化 Angular 應用程式的文字轉語音部分以節省 AI Token。當使用者第一次點擊音訊按鈕時，應用程式會將請求連同表單資料（場景、情緒、語音與語速...

Connie ‧ 2026-10-02

1 Like 0 留言 119 瀏覽

鐵人賽 Modern Web DAY 17

Angular 22 Signal 進化論系列第 17 篇

技術 Day 17：effect() 不是拿來同步 Signal 的，Angular 的 Side Effect 該怎麼寫？

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

Antonio ‧ 2026-10-01

0 Like 0 留言 103 瀏覽

鐵人賽 Build on Google AI DAY 30

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 30 篇

技術 Day 30 - 實作主畫面並測量其效能

使用 Angular CLI MCP Server 啟動 Angular 應用程式 /angular-cli: Please start the develo...

Connie ‧ 2026-10-01

1 Like 0 留言 78 瀏覽

鐵人賽 Modern Web DAY 16

Angular 22 Signal 進化論系列第 16 篇

技術 Day 16：即將登場的 Route Resources，Angular Router 為什麼需要新的資料載入方式？

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

Antonio ‧ 2026-09-30

0 Like 0 留言 101 瀏覽

鐵人賽自我挑戰組 DAY 17

Angular 開發二三事系列第 17 篇

技術 Day17: Angular 的 Async / Await

雖然 Angular 有自己的非同步方法 .subscribe()，但我還是習慣使用 Async / Await 和 try / catch / finally...

chiayinin ‧ 2026-10-01

0 Like 0 留言 244 瀏覽

鐵人賽 Build on Google AI DAY 29

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 29 篇

技術 Day 29 - 使用 Stitch MCP Server 與 AI Agent 技能設計新主畫面

為了減少初始打包大小（main.js），我們引進了一個輕量且即時載入（Eagerly loaded）的主畫面（Home Screen）登陸頁面，同時將繁重的多模...

Connie ‧ 2026-09-30

0 Like 0 留言 145 瀏覽

鐵人賽自我挑戰組 DAY 16

Angular 開發二三事系列第 16 篇

技術 Day16: Angular 的非同步處理

進入正題前，先來複習什麼是「同步」、「非同步」。什麼是「同步」、「非同步」? 同步(Synchronous): 定義: 程式碼是由上至下，一行、一行地執行...

chiayinin ‧ 2026-09-30

0 Like 0 留言 286 瀏覽

鐵人賽 Build on Google AI DAY 28

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 28 篇

技術 Day 28 - Stitch MCP 實務應用：定義設計系統、克服摩擦與清理 CSS

當我最初為這個應用程式建置元件時，它們是在沒有正式設計系統的情況下建立的。當時，我不知道 Google 開發了 Stitch，也沒有意識到我可以將 Stitch...

Connie ‧ 2026-09-29

2 Like 0 留言 122 瀏覽

鐵人賽 Modern Web DAY 15

Angular 22 Signal 進化論系列第 15 篇

技術 Day 15：搞懂 Injection Context，從 inject()、runInInjectionContext() 到 injectAsync()

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

Antonio ‧ 2026-09-29

0 Like 0 留言 70 瀏覽

鐵人賽自我挑戰組 DAY 15

Angular 開發二三事系列第 15 篇

技術 Day 15: Angular 的網路請求 HTTP request

查過滿多資料的，Angular 不像 Vue、React 那樣會使用 Axios (少數，但還是有)。大多數 Angular 的開發者會使用官方提供的 HTTP...

chiayinin ‧ 2026-09-29

2 Like 0 留言 89 瀏覽

鐵人賽 Modern Web DAY 14

Angular 22 Signal 進化論系列第 14 篇

技術 Day 14：Lazy Loading 不只一種，從 Router Preloading、@defer 到 injectAsync()

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

Antonio ‧ 2026-09-28

0 Like 0 留言 89 瀏覽

鐵人賽 Build on Google AI DAY 27

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 27 篇

技術 Day 27 - 使用 Chrome DevTool MCP Server 與 Antigravity CLI 最佳化靜態資源

我們將根據 Chrome DevTools MCP Server 的建議採取行動，透過壓縮 192x192 和 512x512 的圖示、將 Material S...

Connie ‧ 2026-09-28

3 Like 1 留言 89 瀏覽

鐵人賽 Modern Web DAY 13

Angular 22 Signal 進化論系列第 13 篇

技術 Day 13：從 Router Event 到 Signal

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

Antonio ‧ 2026-09-27

0 Like 0 留言 54 瀏覽

鐵人賽自我挑戰組 DAY 13

Angular 開發二三事系列第 13 篇

技術 Day 13: Angular Signal 訊號

今天收到一件噩耗，覺得一切都無所謂了，鐵人賽就平平穩穩地發文吧。什麼是 Signal？先來看官方文件解說： Signal 是對值的套件裝器，當該值發生...

chiayinin ‧ 2026-09-27

0 Like 0 留言 161 瀏覽

鐵人賽 Build on Google AI DAY 26

2026年，如何利用 Antigravity CLI、Gemini、各項技能及 MCP Server 建構基於 Firebase 的 Angular 應用系列第 26 篇

技術 Day 26 - 使用 Chrome DevTool MCP Server 與 Antigravity CLI 提升效能與最佳實踐

今天，我們將使用 Chrome DevTool MCP Server 來稽核桌面與行動裝置檢視埠（Viewport）下的當前效能（Performance）與最佳...

Connie ‧ 2026-09-27

0 Like 0 留言 61 瀏覽

鐵人賽自我挑戰組 DAY 12

Angular 開發二三事系列第 12 篇

技術 Day12: Angular 的生命週期 `ngOnInit`

我已經不知道要寫什麼了元件的生命週期是指元件建立和銷燬之間發生的一系列步驟。每個步驟都代表了 Angular 渲染元件並在一段時間內檢查更新過程的不同部分。...

chiayinin ‧ 2026-09-26