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 本體、控...
toSignal 函數的回傳類型為 Signal<T | undefined>。 Observable 是惰性的，當事件發生時發出第一個值。因此，在...
本日進度 Day17 不確定大家知不知道怎麼操作Demostackblitz會自己處理好環境跟指令等到跑完之後，會出現目錄，之後點對應的日期就可以看了 因為還沒...
在寫 Side Project 的時候，覺得我的專案應該更國際化，而且在現代的網頁開發中，支援多國語言已經成為了一項重要的需求。無論是英文使用者還是台灣的繁體中...
本日進度 Day16 終於做到這步了，這次利用的是 nz-table 跟 nz-popconfirm直接在 table 上進行增刪改查 要注意的是這裡的 nz-...
本日進度 Day15 鐵人賽30天感覺我大概拆了15天，使用Angular的裝飾器來直接操作 DOM 元素因為SVG的 裡面不能放 ng container，...
全部東西都寫在一起真的是受不了，還是決定花時間拆一下因為ng-zorro提供的不合需求所以自己刻首先產出popover提示框的元件，免得遇到更多悲劇順便展示一下...
因為還要記錄家具裡面裝了什麼東西，所以調整了一下 UX先出現一個提示框可以選要調整家具還是要調整收納用品一樣是雙擊出現，如下方圖片 之後就可以點擊家具按鈕，出現...
connieleung
Zoe Wu
艾瑞卡
Chiayu
iThome鐵人賽
看影片追技術