上一篇文章我們介紹了測試金字塔。今天我們就從金字塔的最下面開始，來分享如何在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先出現一個提示框可以選要調整家具還是要調整收納用品一樣是雙擊出現，如下方圖片 之後就可以點擊家具按鈕，出現...
目前雙擊家具之後可以出現彈窗，本日進度 Day12 在每個家具上面監聽雙擊事件，然後綁定 handleDoubleClick private createF...
初始計劃 原本打算使用 ng-bootstrap 製作彈窗 其他UI部分計劃自己開發 開發過程 成功開發彈窗模組 遇到 input、checkbox、Ra...
因為搞不清楚到底什麼問題導致各種偏移，所以從SVG開始重新做，只保留兩個控制點跟一個圖形去掉底圖的控制功能跟固定功能，開始抓蟲 本來以為可以用AI處理bug，推...
在前兩篇文章中，我們講了如何從基本的 HTML 和 CSS 開始，慢慢學習一些基礎，然後幫助我們可以進入專案實作。但對於許多新手來說，從零開始設計和撰寫程式碼還...
這個部份我大概卡了一、兩個禮拜，還沒卡完，雖然是30天連續發文的鐵人賽，但是 side project 應該會做超過30天。 把東西疊在一起之後開始出現問題，腦...
搞一個可以共用的的彈窗模板先弄個Materila Dialog 底 //DialogComponent <h3 mat-dialog-title>...
Required signal inputs 不能在 constructor 或 field initializers 使用，因為當時該值不可用。為了存取該值，...
功能拆開的時候都很快樂，合併的時候才知道合不合適就算有先規劃順序，但還是有種瞎子摸象的感覺 操作環境跟程式碼 Day7 import { Component,...
寫到一半，突然意識到有角架、角櫃的存在，所以開始跟三角形搏鬥希望可以藉由點擊頂點來改變三角形的形狀，但是 ngx-movable 跟我理想的情況有點差距，所以寫...
要把三個功能合併的時候，決定還是用別人的套件了，時間有限這裡實作 矩形跟圓形官方的storyBook就有範例了 程式碼依舊在Stackblitz 首先先安裝 n...
艾瑞卡
connieleung
Zoe Wu
Chiayu
yuie2322
iThome鐵人賽
看影片追技術