平常在 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...
路由狀態管理在前端開發中比較少被單獨拿出來討論，但在 Angular 裡，一次路由導航其實會經過不少階段，也會在過程中發出不同的 Router Event，例如...
今天收到一件噩耗，覺得一切都無所謂了，鐵人賽就平平穩穩地發文吧。 什麼是 Signal？ 先來看官方文件解說： Signal 是對值的套件裝器，當該值發生...
今天，我們將使用 Chrome DevTool MCP Server 來稽核桌面與行動裝置檢視埠（Viewport）下的當前效能（Performance）與最佳...
我已經不知道要寫什麼了 元件的生命週期是指元件建立和銷燬之間發生的一系列步驟。每個步驟都代表了 Angular 渲染元件並在一段時間內檢查更新過程的不同部分。...
Antonio
Connie
chiayinin
iThome鐵人賽
看影片追技術