當我們掌握了基本的資料處理策略後，接下來要面對的挑戰是如何讓表格在各種裝置上都能提供良好的使用者體驗，同時處理大量資料時保持流暢的效能。今天我們將深入探討響應式...
前言 除了文字多跟欄位多的問題，還有許多互動需要處理，使用者會有多重條件限制，符合A搜尋條件之後，還要做排序或是篩選。 資料流程中會先從後端取得資料，才到前端呈...
建立購物車元件 Vue 3 應用程式 刪除了 components/ 資料夾中所有檔案。在 components/ 目錄底下建立 ShoppingCart.vu...
這篇文章內容主要來自 Vue School 的 "Vue.js 3 Fundamental with the Composition API"...
我是 Angular 的 Google Developer Expert（GDE），自 2021 年起開始撰寫各種 Angular 主題的部落格文章。我的前端旅...
前言 在上一篇文章中，我們解決了表格內文字過長的問題。但實務上還有另一個更大的挑戰：比時薪還多欄位數。 當你的表格從10個欄位增加到25個、50個，甚至破百個欄...
情境 每間公司、每個業務單位、每個產品，都會有不同的資料需要用表格展示，有時候欄位會多到懷疑人生跟眼睛，因為從10個到1、200個的情況都有，但實務上就要這麼多...
初衷 我的背景是5年的接案公司 + 1~2年的金融業，屬於前端成分偏重的全端工程師，比較常處理的是後台系統或是公司內部的系統(to B)。 這篇文章主要針對有用...
前陣子前端 leader 將公司產品（前台，後台），和 Line Liff，等三個專案用 Angular 的多專案架構合在一起，原本幾乎一模一樣卻有三套要維護...
Change Detection 的歷史 Angular 團隊在企業應用程式的效能方面做出了許多改進。 組件中的 Change Detection 的預設值是C...
計算訊號快取錯誤 計算訊號中的錯誤快取是 Angular 19.1.2 中的新功能。當 equal 函數拋出錯誤時，計算訊號會快取該錯誤。當讀取該值時，計算訊號...
Resource API 包括 resource 和 rxResource 函數，其預設值未定義。當開發人員僅提供一個 loader 時，函數的傳回類型為 T...
當 Resource API 首次問世時，resource 函數傳回一個 promise，而 rxResource 函數只傳回 Observable 的第一個值...
Angular 19.2.0 引入了 untagged template literals in expressions 新功能，其中可以在模板的 Angula...
當 toSignal 函數在 root-level 服務中建立訊號並將其傳回給元件時，creation context 就是 root-level 服務。當元件...
Observable 是惰性的；因此，除非被訂閱，否則它不會發出值。另一方面，訊號始終具有值，包括 toSignal 函數建立的訊號。雖然 toSignal 函...
Introduction 在 Angular 19 中，實驗性生命週期鉤子 afterRenderEffect 允許開發人員更新 DOM。 與 afterNex...
input()、output()、viewChild()、viewChildren()、contentChild()、contentChildren()、out...
Angular 團隊在 Angular 版本 19 中發布了 resource 和 rxResource 函數，以方便資料檢索。resource 的 loade...
Angular 19 中引入的新 LinkedSignal 功能透過允許訊號 (signal) 直接連結到來源值，提供了管理反應狀態 (reactive sta...
更新儲存在 Angular 訊號中的 Map 時可能會出現微妙的錯誤，這主要是由於 change detection 如何與物件引用 (object refer...
完全不想在自己的系統記錄會員帳密，有很大一部分是我也不喜歡記帳密，所以利用 Auth0 來做 SSO (單一登入)。不過我以前沒有做過串 Google 跟 Ap...
元件通訊 (component communication) 是元件架構裡面重要的一環，其中父元件向子元件提供輸入，子元件將結果傳回給其父元件。 我將示範 An...
前言 今天我們要聊聊工作中遇到的一個問題。我們需要撰寫測試來驗證前端需求的正確性(也就是UI/UX)。於是我們想，E2E測試非常適合，但是因為環境和經費種種因素...
今天要透過上一篇介紹的單元測試撰寫方式，實際來為一個 component 撰寫單元測試。使用Jest為Angular專案撰寫UnitTest(一)使用Jest為...
上一篇文章我們分享了如何導入Jest到Angular專案中，今天我們要分享如何規劃單元測試。 測試的範圍 在分享測試金字塔的時候有提到單元測試的目的是驗證應用...
上一篇文章我們介紹了測試金字塔。今天我們就從金字塔的最下面開始，來分享如何在Angular專案中，導入Jest這個單元測試框架。 什麼是Jest Jest...
toSignal 函數的來源是一個 Observable，當滿足錯誤條件時，Observable 會拋出錯誤。 Observable 拋出錯誤後，每當讀取 si...
當我們費盡千辛萬苦，終於硬著頭皮想辦法把功能實作出來之後，也在Local自己測試過。覺得沒有問題了，想開開心心推PR。一發上去，可能會遇到兩個狀況。CI pip...
今天是購物車實作的最後一篇文章，我們要來討論兩個狀態之間相互耦合的情況下，該如何處理。 假設今天的業務需求是，在進入購物車的時候，我們要比對結帳狀態和購物車中的...
Zoe Wu
connieleung
艾瑞卡
iThome鐵人賽
看影片追技術