在第 25 天，我擴充了 Alert Bar 元件來顯示已關閉 Alert 的按鈕。接著，使用者可以選擇重新開啟所有已關閉的 Alert，或是特定類型的 Ale...
今天開始要介紹在模板中，如何使用條件語句來控制顯示的內容。目前主要有兩種寫法： 使用 @if 和 @else ( Angular 17+ ) 使用舊版的 *...
在談到 Angular 中的變數新儲存方式 signal 前，需要介紹一下 Angular 背後的偵測機制。目前有兩種主要的變更偵測機制，當資料改變時，會觸發畫...
前言 在前兩天，我們已經討論了 Monorepo 與 Angular Library，並學習如何建立共用的元件函式庫。今天，我們要進一步探討 Library 的...
前言 在中大型前端專案中，常常會出現多個應用程式共存的情況。例如：公司可能同時開發前台官網、後台管理系統、行動端的管理工具等。這些應用雖然功能不同，但往往會用到...
第 24 天 - Alert 元件 第 3 部分 - 新增用於更換樣式的 Alert Bar 在第 24 天，我建立了一個 Alert Bar 元件，用來顯示或...
前言 當專案規模開始變大了之後，在比較有條理的工作流程中，通常會開始建立符合自己專案特色的 UI 元件庫，這裡簡要地談一下 Monorepo ，之後帶到 lib...
前言 昨天我們聊了什麼時候該抽元件，相信大家心裡已經有個底了。接下來要討論的是：抽出來的元件要怎麼設計才好用？今天就來分享幾個實戰中最常用到的核心技術 - 雙向...
今天要來介紹事件監聽，讓使用者可以與應用程式互動。 在 Angular 要與應用程式互動，會使用 () 來綁定事件監聽器，並指定事件觸發時要執行的方法。 <...
上一篇文章，我們介紹了動態處理資料的字串插值，這篇會介紹另一個重要技術：Binding 繫結 Binding 透過在屬性值周圍加上 [] 來綁定屬性值，動態更...
在第23天，我動態渲染警示（alert）的 SVG 圖示，因為動態渲染更易於維護（maintainable）、擴展（scalable）及高效（efficient...
👉什麼時候該抽取元件？如何設計一個好的元件？怎樣避免過度工程化？ 元件化的核心價值 元件化不僅僅是代碼複用，更是關於關注點分離、可測試性和可維護性。一個設計良好...
第22天，我開始進行 Vue 3、Angular 20 以及 Svelte 5 的 Alert Component 練習。 該 Alert component...
前言：從拆分表單到自動生成 👉 動態表單 (Schema-driven Forms) 自動生成適用場景 表單欄位不是固定的，而是 後端 API 決定的。 使用...
在第21天，我會將所有的示範部署到 Github Pages，因為 Github Pages 是免費的，且可以透過 Github Actions 自動化處理。...
目前元件部分，我們只學習到顯示靜態的資料，接下來我們會學習如何在元件中處理資料，並且顯示在畫面上。 Angular 變數儲存方式 目前 Angular 支援兩種...
今天要介紹傳統 Angular 建立應用程式的方式 - 模組（Module）。 Angular Module Angular 模組是過去 Angular 應用程...
樣式設計其實是這個練習中最簡單的部分。步驟在不同框架中通常是相同的。 安裝 tailwindcss 和 DaisyUI 在 CSS 檔案中加入 DaisyUI...
元件概念 在進入元件的詳細介紹之前，先來了解一下建立元件的概念。為什麼現代前端框架都強調元件化的開發方式呢？ 最主要是關注點分離 Separation of C...
示範中使用卡片佈局 (card layout) 顯示 Github 使用者。GithubProfileList 會迭代一個使用者名稱的清單，並在 GithubP...
上一篇文章了解如何建立的專案後，今天我們就來了解專案的架構 tsconfig.app.json、tsconfig.json、tsconfig.spec.js...
前言：從動態集合到大型表單 在上一篇（篇三），我們透過購物車、報名表，甚至戲院座位表的案例，體驗了 FormArray 在動態集合中的效果。 不過，實際專案往往...
第18天，我開始在 Vue 3、Angular 19 和 Svelte 5 中進行 Github 使用者個人資料的練習。 我的 CSS 技術不強，因此我會遵循講...
前言：從群組驗證到多筆資料 在上一篇，我們學會了如何處理 群組級驗證與跨欄位邏輯，解決了「欄位之間有依存關係」的問題。 而在實務專案裡，還有一個常見的需求是：...
前言：從巢狀結構到驗證規則 上一篇談過 單層 vs 巢狀表單，用 FormGroup 與 FormArray 對應資料模型。結構搞定後，下一步就是 驗證： 「...
第 17 天 - 在 HTML 模板中渲染動態內容 在第 17 天，我示範如何在元件中渲染動態內容。Vue 3 將內容投影到 slots，並可選擇性地顯示插槽屬...
這系列的文章會主要以 Angular 20 為主，這邊附上推薦的安裝環境給大家參考。 必須條件 Node.js - v20.19.0 或更新版本 文字編...
前言 前面的狀態管理，我們有提到了 Reactive Forms 的 API，現在讓我們進一步的討論關於 Reactive Forms 的部分。 「我們要如何設...
在第16天，當選擇了一個咖啡方案 (coffee plan) 時，我會在該方案周圍加上邊框。其他咖啡方案則變成非活躍狀態，並移除邊框。CoffeePlan 組件...
第 15 天- Add a Coffee Plan Form 在第15天，我擴展了 PlanPicker 組件，加入了一個 AddCoffeePlan 組件，用...
Connie
johnson3669
Zoe Wu
iThome鐵人賽
看影片追技術