在現代網頁應用程式中，將繁重的生成式人工智慧（Generative AI）邏輯從前端卸載到後端是必要的。在我的最新專案中，我重構了一個 Angular 應用程式...
在這篇技術深潛中，我們將探討如何將最新的 Google Gemini 模型整合到現代網頁技術堆疊中。我們使用 Gemini 3 Flash Preview 來產...
後台系統在做 i18n 時，常見的問題是在處理翻譯資源怎麼下載的問題。一開始專案小，大家通常會把所有翻譯塞成一包，或至少塞成少數幾包，先能跑再說。但系統一長大，...
寫這篇文章是想推薦我做的i18n套件，藉由比較 Angular 最多人用的兩款套件， 解釋為什麼做這款工具的原由。 做後台系統（admin / dashbo...
万十科技股份有限公司招募講師https://onceagain.tw/ 1.上班時間:09:00~18:002.地點:高雄(高雄軟體園區)台南(TTA新創園區)...
今天會體驗一下新動畫 API animate.enter、animate.leave，讓我們能更簡單地為元件添加進場動畫效果。 Angular 作為主流前端框架...
今天要介紹 Angular 的單元測試，單元測試的目的是將程式碼切割成小單元，並針對每個單元進行測試，以確保它們的功能正確且符合預期，不會影響到其他部分。 測試...
今天會介紹一些昨天沒提到的路由功能，像是路由設定屬性、路由守衛以及延遲加載路由等功能 路由設定屬性 **： 通配符路由，用來匹配所有未定義的路由，通常用於顯示...
Angular 預設是一個單頁應用程式（SPA），為了實現不同頁面內容的切換，提供了強大的路由功能。透過路由，使用者可以根據網址（URL）的變化，動態顯示不同的...
在處理動態資料時，經常需要與後端伺服器進行溝通，這通常透過 HTTP 請求來完成。今天要介紹如何在 Angular 中實現這一功能。 HttpClient Ht...
RxJs 是一個用於處理非同步資料流的函式庫，在 Angular 中被廣泛使用，特別是在處理 HTTP 請求、事件和其他非同步操作時。 今天僅會介紹一些 RxJ...
今天介紹回應式表單 Reactive Forms ，它不在模板中定義表單，而是在元件類別中使用 FormControl、FormGroup 等來建立表單，適合複...
目前在 Angular 中表單處理方式，主要有兩種： 範本驅動型表單 (Template-driven Forms) 反應式表單 (Reactive Form...
管道 Pipes 是 Angular 模板表達式中的一個特殊運算符，使用 | 來轉換數據在畫面上顯示的格式官方有再提供 @angular/common 許多內建...
指令是指在 Angular 應用程式中，可以改變元素的設定、樣式及添加附加行為的類別，所以我們前面提到的元件本質上也是一種指令，只是帶有模板和樣式。而不含模板的...
今天會介紹元件的生命週期，從建立到銷毀之間發生的一系列步驟。每個步驟代表 Angular 渲染元件並隨時間檢查元件更新過程的不同部分。 若需要在特定時間點執行邏...
在前面篇章中，有介紹 input/output 與父子元件溝通的方式，但在實際應用中，會遇到需要多個元件共享資料或邏輯的情況，而一但需要跨越兩個元件以上，inp...
今天會接續介紹一些在模板中的常見的用法 ng-container ng-container 適合用於不需要額外容器元素的場景。 邏輯分組容器，不會產生額外的...
今天會介紹一些在模板中的常見的用法，包含：模板參考變數、ng-template 模板參考變數 在 Angular 中，元素上加上 #name 是用來宣告模板參考...
我很自豪能跳出舒適圈，學習 Vue 3 和 Svelte 5/SvelteKit，整個過程非常愉快。在30天裡，我用三個框架完成了5個示範，共15個示範。雖然過...
系列文章: 前端工程師的 Modern Web 實踐之道 - Day 5預計閱讀時間: 16 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中，我們...
今天要介紹 Angular 的雙向綁定如何實現在實務情況下，經常會想要取得使用者輸入的值，並且在畫面上顯示這些值。這時候雙向綁定就派上用場了。 雙向綁定的語法...
今天要介紹在 Angular 中，如何使用 output 函式以及 @Output 裝飾器來實現元件之間的事件傳遞。 在巢狀元件使用情況下，通常會使用提升的方式...
在第 29 天，我新增了一個載入器（一個 <div>Loading ...</div>）來顯示頁面正在載入資料。 在 Angular 2...
今天要介紹在 Angular 中，如何使用 input 函式以及 @Input 裝飾器來傳入父元件的資料。 在開發過程中，經常會出現巢狀元件的情況，例如：待辦清...
第 28 天 - 取得貼文作者 在第 28 天，我使用貼文的 userId 呼叫 users 端點來取得使用者名稱。 在 Vue 3 中，我建立了另一個 com...
今天介紹使用迴圈語句來顯示列表內容，可以快速生成多個相似的元素。目前有兩種語法： @for ( Angular 17+ ) 舊版的 *ngFor @fo...
第27天 - 建立一個簡單的部落格頁面 在第27天，我完成了Vue 3 Vue 3 Composition API 課程，建立一個簡單的部落格來顯示文章。該網站...
今天要介紹在模板中，如何使用 switch 條件語句來控制顯示的內容。目前主要有兩種寫法： @switch 語法 ( Angular 17+ ) 使用舊版的...
在第26天，我檢視了 AlertBar 元件的程式碼，並發現兩項改進可以讓它更乾淨。 該元件包含一個靜態標籤 (static label) 和一個雙向綁定...
johnson3669
Connie
useKevin('front-end')
iThome鐵人賽
看影片追技術