目前我們已經建立了負責身分驗證的 AuthService，以及讓使用者輸入電子郵件與密碼的 SignInModalComponent，接著我們需要一個輕量級的首...
在本篇部落格文章中，我們將使用穩定版的 Angular Signal Forms API（@angular/forms/signals）建置登入互動視窗元件（S...
任何擁有公開網址的人都能使用我的權杖（Token）執行影像分析與文字轉語音（TTS），這會讓我的帳單費用迅速飆升。為了防止未經授權的使用，我想透過 Fireba...
我暫時中斷了這個系列文章，開啟了一段支線任務——起因只是我對 Angular 打包體積（Bundle Size）以前有多大的一段模糊記憶。 當我在本系列的 ng...
平常在 Angular 中，我們可以透過 providers 決定 Service 的注入範圍。例如註冊在 Root，讓整個 Application 共用同一個...
在 Vue 生態系中，VueUse 提供許多 Composables，讓我們可以快速使用瀏覽器功能，例如監聽網路狀態、保存使用者設定，或偵測元素是否進入可視範圍...
平常在 Angular 中使用 Component，通常會直接在 Template 裡面宣告： <app-counter /> Angular 會...
前幾天我們使用 NgRx SignalStore 實作購物車，透過 withState() 管理商品資料、withComputed() 計算總金額，再利用 wi...
昨天我們使用 Angular 原生 Signal 與 NgRx SignalStore 實作購物車，透過 State 管理商品資料，再利用 Computed 計...
在 Angular 開發中，如果資料只會被單一 Component 使用，通常可以直接透過 signal() 管理。但當多個 Component 需要共用同一份...
平常使用 Angular Router 時，可以透過 routerLink 或 router.navigate() 切換不同頁面。 模板連結： <a ro...
在後台系統中，很常會看到頁籤式介面，例如： 病患列表 掛號管理 系統設定 每個頁籤可能都對應不同的 Route： export const routes:...
過去在 Angular 中，只要遇到初始化、View 建立或資源清理，通常會先想到 Lifecycle Hooks： ngOnInit() // Input 初...
過去在寫 Angular 時，因為 Template 可以直接呼叫 Method，很容易在專案裡看到大量這樣的寫法。 這種方式很直覺，也很方便，但通常不建議在...
前兩篇介紹了 Signal Forms 的基本驗證，以及需要參考其他欄位的 Cross-field Validation。 不過有些驗證沒辦法只靠前端資料判斷，...
當選取大型圖片或相片時，直接將其轉換為行內 base64 資料會大幅膨脹酬載（payload）大小，並消耗大量的輸入 Token。透過在用戶端將圖片尺寸縮小至小...
上一篇介紹 Signal Forms 時，已經看到可以透過 Schema 定義欄位驗證，例如 required()、email()、minLength()。 這...
在 Angular 中處理表單，很多專案使用的都是 Reactive Forms。 我們會透過 FormControl 管理單一欄位，用 FormGroup 組...
我想最佳化 Angular 應用程式的文字轉語音部分以節省 AI Token。當使用者第一次點擊音訊按鈕時，應用程式會將請求連同表單資料（場景、情緒、語音與語速...
effect() 是 Angular signal 裡很容易被誤用的一個 API。因為寫法直覺，只要讀取 signal，就能在值改變時執行一些事情，所以很常被拿...
使用 Angular CLI MCP Server 啟動 Angular 應用程式 /angular-cli: Please start the develo...
過去在 Angular Router 中，如果希望進入 Component 前先完成資料載入，可以透過 Resolver，讓資料取得流程在 Component...
雖然 Angular 有自己的非同步方法 .subscribe()，但我還是習慣使用 Async / Await 和 try / catch / finally...
為了減少初始打包大小（main.js），我們引進了一個輕量且即時載入（Eagerly loaded）的主畫面（Home Screen）登陸頁面，同時將繁重的多模...
進入正題前，先來複習什麼是「同步」、「非同步」。 什麼是「同步」、「非同步」? 同步(Synchronous): 定義: 程式碼是由上至下，一行、一行地執行...
當我最初為這個應用程式建置元件時，它們是在沒有正式設計系統的情況下建立的。當時，我不知道 Google 開發了 Stitch，也沒有意識到我可以將 Stitch...
前面提到 Injection Context 時，可能會讓人聯想到先前介紹過的 Reactive Context。我一開始也有點搞混，因此花了一些時間重新理解...
查過滿多資料的，Angular 不像 Vue、React 那樣會使用 Axios (少數，但還是有)。大多數 Angular 的開發者會使用官方提供的 HTTP...
當 Client Side Rendering 的應用越來越大時，我們通常會開始思考，能不能把原本一次載入的內容拆得更小，等到真正需要時再下載，避免初始載入過多...
我們將根據 Chrome DevTools MCP Server 的建議採取行動，透過壓縮 192x192 和 512x512 的圖示、將 Material S...
Connie
Antonio
chiayinin
iThome鐵人賽
看影片追技術