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...
今天是購物車實作的最後一篇文章，我們要來討論兩個狀態之間相互耦合的情況下，該如何處理。 假設今天的業務需求是，在進入購物車的時候，我們要比對結帳狀態和購物車中的...
上一篇文章我們實作了一個基本的購物車，但現行市面上的電商平台購物車絕對都更加複雜。以蝦皮為例，可以發現要進入購物車必須要有會員資格。即使關閉App或是更換裝置，...
上一篇文章我們提到了購物車的設計想法，以及會使用到的Angular功能。本篇文章我們從專案架構開始，逐一使用範例程式碼進行實作說明該如何在前端建立一個最基本的購...
串接階段發現最常報錯的就是前後端命名不一樣，就算我都寫好型別了，不知道有沒有更智慧的防呆辦法可以處理，而且有的時候串接起來才發現API開的跟畫面需求有點不一樣，...
寫到後來發現忘記做新增家具跟刪除家具的按鈕，下次可能要先出一本需求規格書比較不會漏，新增的按鈕擺在跟平面圖同層，新增成功後會關掉彈窗，刷新頁面。 刪除的按鈕做在...
為了視覺化呈現 API 取得的進度，也避免使用者一直重複點擊按鈕，所以利用 Http interceptor，來裝上 Loading畫面。 Loading 畫面...
提問：競業都有提供購物車耶，上頭有交代希望下個版本可以落地購物車功能。 針對購物車相關的需求我們可以從這個功能所會參與的角色下去思考。 首先 ”使用者” 前往電...
終於寫到這步，好懶得寫底層，但是還是寫了，考量以後可能有驗證問題還是統一寫比較好。 以下統一設定了http 標頭，方便未來加入token驗證，錯誤回報也統一在...
提問：呼叫 API 的時候需要帶 token 給後端驗證該怎麼辦？ 我們可以使用 HttpInterceptor 進行統一處理！ 什麼是 HttpInte...
提問：專案需要加入一個 NavBar，依據不同頁面顯示切換樣式。 實作方式： 這次的架構針對 NavBar 的部分總共會有四個角色：NavBar 本體、控...
connieleung
Zoe Wu
艾瑞卡
iThome鐵人賽
看影片追技術