iT邦幫忙

angular相關文章
共有 825 則文章
鐵人賽 Modern Web DAY 0

技術 前端框架三強鼎立:React vs Vue vs Angular 的深度解析與選擇策略

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 5預計閱讀時間: 16 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中,我們...

鐵人賽 Vue.js DAY 30

技術 第 29 天 - 新增 Loader 與 Error 狀態

在第 29 天,我新增了一個載入器(一個 <div>Loading ...</div>)來顯示頁面正在載入資料。 在 Angular 2...

鐵人賽 Vue.js DAY 29

技術 第 28 天 - 取得貼文作者

第 28 天 - 取得貼文作者 在第 28 天,我使用貼文的 userId 呼叫 users 端點來取得使用者名稱。 在 Vue 3 中,我建立了另一個 com...

鐵人賽 Vue.js DAY 28

技術 第27天 - 建立一個簡單的部落格頁面

第27天 - 建立一個簡單的部落格頁面 在第27天,我完成了Vue 3 Vue 3 Composition API 課程,建立一個簡單的部落格來顯示文章。該網站...

鐵人賽 Vue.js DAY 27

技術 第26天 - 從 AlertBar 中抽取邏輯和元件

在第26天,我檢視了 AlertBar 元件的程式碼,並發現兩項改進可以讓它更乾淨。 該元件包含一個靜態標籤 (static label) 和一個雙向綁定...

鐵人賽 Vue.js DAY 26

技術 第 25 天 - Alert 元件第 4 部分 - 更新 Alert Bar 以重新開啟已關閉的 Alert

在第 25 天,我擴充了 Alert Bar 元件來顯示已關閉 Alert 的按鈕。接著,使用者可以選擇重新開啟所有已關閉的 Alert,或是特定類型的 Ale...

鐵人賽 Modern Web DAY 30
Angular 進階實務 30天 系列 第 30

技術 Day 30:版本管理及Verdaccio

前言 在前兩天,我們已經討論了 Monorepo 與 Angular Library,並學習如何建立共用的元件函式庫。今天,我們要進一步探討 Library 的...

鐵人賽 Modern Web DAY 29
Angular 進階實務 30天 系列 第 29

技術 Day 29:Angular Library – 建立與共用元件

前言 在中大型前端專案中,常常會出現多個應用程式共存的情況。例如:公司可能同時開發前台官網、後台管理系統、行動端的管理工具等。這些應用雖然功能不同,但往往會用到...

鐵人賽 Vue.js DAY 25

技術 第 24 天 - Alert 元件 第 3 部分 - 新增用於更換樣式的 Alert Bar

第 24 天 - Alert 元件 第 3 部分 - 新增用於更換樣式的 Alert Bar 在第 24 天,我建立了一個 Alert Bar 元件,用來顯示或...

鐵人賽 Modern Web DAY 28
Angular 進階實務 30天 系列 第 28

技術 Day 28:淺談 Monorepo

前言 當專案規模開始變大了之後,在比較有條理的工作流程中,通常會開始建立符合自己專案特色的 UI 元件庫,這裡簡要地談一下 Monorepo ,之後帶到 lib...

鐵人賽 Modern Web DAY 27
Angular 進階實務 30天 系列 第 27

技術 Day 27:如何寫出可維護的元件?

前言 昨天我們聊了什麼時候該抽元件,相信大家心裡已經有個底了。接下來要討論的是:抽出來的元件要怎麼設計才好用?今天就來分享幾個實戰中最常用到的核心技術 - 雙向...

鐵人賽 Vue.js DAY 24

技術 第23天 - Alert 組件第二部分 - 動態渲染 (Dynamic Rendering) SVG 圖示

在第23天,我動態渲染警示(alert)的 SVG 圖示,因為動態渲染更易於維護(maintainable)、擴展(scalable)及高效(efficient...

鐵人賽 Modern Web DAY 26
Angular 進階實務 30天 系列 第 26

技術 Day 26:何時該抽元件?從視覺相似到業務邏輯的判斷法則

👉什麼時候該抽取元件?如何設計一個好的元件?怎樣避免過度工程化? 元件化的核心價值 元件化不僅僅是代碼複用,更是關於關注點分離、可測試性和可維護性。一個設計良好...

鐵人賽 Vue.js DAY 23

技術 第22天 - Alert Component 第一部份 - Alert List 和 Alert Components

第22天,我開始進行 Vue 3、Angular 20 以及 Svelte 5 的 Alert Component 練習。 該 Alert component...

鐵人賽 Modern Web DAY 25
Angular 進階實務 30天 系列 第 25

技術 Day 25:Angular Reactive Forms – 動態表單 (Schema-driven Forms)

前言:從拆分表單到自動生成 👉 動態表單 (Schema-driven Forms) 自動生成適用場景 表單欄位不是固定的,而是 後端 API 決定的。 使用...

鐵人賽 Vue.js DAY 22

技術 第21天 - 部署 Github 個人檔案專案到 Github Pages

在第21天,我會將所有的示範部署到 Github Pages,因為 Github Pages 是免費的,且可以透過 Github Actions 自動化處理。...

鐵人賽 Vue.js DAY 21

技術 第 20 天 - Github Card 專案 第三部分 - 樣式設計

樣式設計其實是這個練習中最簡單的部分。步驟在不同框架中通常是相同的。 安裝 tailwindcss 和 DaisyUI 在 CSS 檔案中加入 DaisyUI...

鐵人賽 Vue.js DAY 20

技術 第 19 天 - Github 卡片專案 第二部分 - 元件組合

示範中使用卡片佈局 (card layout) 顯示 Github 使用者。GithubProfileList 會迭代一個使用者名稱的清單,並在 GithubP...

鐵人賽 Modern Web DAY 24
Angular 進階實務 30天 系列 第 24

技術 Day 24:Angular Reactive Forms – 跨元件巢狀與大表單拆分

前言:從動態集合到大型表單 在上一篇(篇三),我們透過購物車、報名表,甚至戲院座位表的案例,體驗了 FormArray 在動態集合中的效果。 不過,實際專案往往...

鐵人賽 Vue.js DAY 19

技術 第18天 - Github Card 專案 第一部分 - 資料擷取

第18天,我開始在 Vue 3、Angular 19 和 Svelte 5 中進行 Github 使用者個人資料的練習。 我的 CSS 技術不強,因此我會遵循講...

鐵人賽 Modern Web DAY 23
Angular 進階實務 30天 系列 第 23

技術 Day 23:Angular Reactive Forms – FormArray 與動態集合

前言:從群組驗證到多筆資料 在上一篇,我們學會了如何處理 群組級驗證與跨欄位邏輯,解決了「欄位之間有依存關係」的問題。 而在實務專案裡,還有一個常見的需求是:...

鐵人賽 Modern Web DAY 22
Angular 進階實務 30天 系列 第 22

技術 Day 22:Angular Reactive Forms –群組驗證與跨欄位邏輯

前言:從巢狀結構到驗證規則 上一篇談過 單層 vs 巢狀表單,用 FormGroup 與 FormArray 對應資料模型。結構搞定後,下一步就是 驗證: 「...

鐵人賽 Vue.js DAY 18

技術 第 17 天 - 在 HTML 模板中渲染動態內容

第 17 天 - 在 HTML 模板中渲染動態內容 在第 17 天,我示範如何在元件中渲染動態內容。Vue 3 將內容投影到 slots,並可選擇性地顯示插槽屬...

鐵人賽 Modern Web DAY 21
Angular 進階實務 30天 系列 第 21

技術 Day 21:Angular Reactive Forms – 表單結構基礎 — 單層 vs 巢狀

前言 前面的狀態管理,我們有提到了 Reactive Forms 的 API,現在讓我們進一步的討論關於 Reactive Forms 的部分。 「我們要如何設...

鐵人賽 Vue.js DAY 17

技術 第16天 - 使用元件事件選擇咖啡方案

在第16天,當選擇了一個咖啡方案 (coffee plan) 時,我會在該方案周圍加上邊框。其他咖啡方案則變成非活躍狀態,並移除邊框。CoffeePlan 組件...

鐵人賽 Vue.js DAY 16

技術 第 15 天- Add a Coffee Plan Form

第 15 天- Add a Coffee Plan Form 在第15天,我擴展了 PlanPicker 組件,加入了一個 AddCoffeePlan 組件,用...

鐵人賽 Modern Web DAY 20
Angular 進階實務 30天 系列 第 20

技術 Day20:實戰篇 – Angular Directive 實作權限控制

— 用 Directive 收斂權限判斷,讓模板乾淨俐落 — 延續 Day19 的設計思維,這篇把「角色(RBAC)→ 資源(Resource-Based)→...

鐵人賽 Modern Web DAY 19
Angular 進階實務 30天 系列 第 19

技術 Day 19:權限管理設計思維

前言 在前幾篇,我們談了路由跟狀態管理,有了這些概念之後,就能處理下一個問題: 👉 誰,能對什麼資料,做什麼操作? 權限管理的三個核心問題 Who (誰)...

鐵人賽 Vue.js DAY 15

技術 第14天 - 建立 PlanPicker 父元件

建立 PlanPicker 元件 在第14天,我繼續重構 App 元件,將咖啡計畫清單抽取到新的 PlanPicker 元件中。這樣不僅讓 App 元件更乾淨,...

鐵人賽 Modern Web DAY 18
Angular 進階實務 30天 系列 第 18

技術 Day 18:狀態管理 - 狀態變更(State Changes) → 資料怎麼被修改?

前言 在前兩篇文章中,我們探討了: Day 16:資料儲存 → 資料應該放在哪裡? Day 17:資料流控制 → 資料應該怎麼在應用程式中流動? 接下來...