前端開發實作、TypeScript 型別設計與 Angular 學習路線，整理可直接應用於專案的範例、除錯紀錄與架構思考。https://johnsonchen.dev/Wed, 02 Sep 2026 14:23:56 GMThttps://johnsonchen.dev//icon-512.pnghttps://johnsonchen.dev/https://johnsonchen.dev/blog/angular-training/build-and-deployment/https://johnsonchen.dev/blog/angular-training/build-and-deployment/整理 Angular 專案的 build 流程，以及 CSR、SSR、SSG 與部署時的注意事項。Tue, 30 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/animations/https://johnsonchen.dev/blog/angular-training/animations/說明 Angular 新舊動畫 API 的差異，涵蓋 animate.enter、animate.leave 與第三方整合。Mon, 29 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/testing/https://johnsonchen.dev/blog/angular-training/testing/介紹 Angular 單元測試的基本觀念，並比較 Jasmine、Karma 與 Vitest 的測試寫法。Sun, 28 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/routing-advanced/https://johnsonchen.dev/blog/angular-training/routing-advanced/接續介紹 Angular 路由的進階功能，包含 redirect、resolve、route guards 與 lazy loading。Sat, 27 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/routing-basics/https://johnsonchen.dev/blog/angular-training/routing-basics/整理 Angular Routing 的基礎用法，包含路由設定、導航、動態路由與巢狀路由。Fri, 26 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/http-client/https://johnsonchen.dev/blog/angular-training/http-client/介紹 Angular HttpClient 的設定方式、HTTP 請求、型別化回應與攔截器。Thu, 25 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/rxjs/https://johnsonchen.dev/blog/angular-training/rxjs/說明 RxJS Observable 的建立、訂閱、取消訂閱與常用 pipe 操作符。Wed, 24 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/reactive-forms/https://johnsonchen.dev/blog/angular-training/reactive-forms/介紹回應式表單的建立、驗證、FormArray 與巢狀 FormGroup 用法。Tue, 23 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/template-driven-forms/https://johnsonchen.dev/blog/angular-training/template-driven-forms/說明範本驅動型表單的建立方式，包含 ngModel、ngSubmit 與驗證狀態處理。Mon, 22 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/pipes/https://johnsonchen.dev/blog/angular-training/pipes/介紹 Angular Pipes 的使用方式，包含內建管道、自訂管道與常見格式化範例。Sun, 21 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/directives/https://johnsonchen.dev/blog/angular-training/directives/整理 Angular 指令的基本概念，包含屬性指令、結構指令與自訂指令寫法。Sat, 20 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/component-lifecycle/https://johnsonchen.dev/blog/angular-training/component-lifecycle/介紹 Angular 元件從建立到銷毀的生命週期，包含常見 hooks 與渲染、清理時機。Fri, 19 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/services/https://johnsonchen.dev/blog/angular-training/services/說明 Angular Service 的用途、註冊方式，以及 constructor 與 inject 的注入寫法。Thu, 18 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/template-patterns-part-2/https://johnsonchen.dev/blog/angular-training/template-patterns-part-2/接續介紹 ng-container、ng-content 與 contentChild、contentChildren 的模板技巧。Wed, 17 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/template-patterns-part-1/https://johnsonchen.dev/blog/angular-training/template-patterns-part-1/整理模板參考變數、ng-template 與 viewChild、viewChildren 的常見用法。Tue, 16 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/two-way-binding/https://johnsonchen.dev/blog/angular-training/two-way-binding/介紹 Angular 的雙向綁定語法，涵蓋 ngModel、自訂元件與 model 的實作方式。Mon, 15 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/outputs/https://johnsonchen.dev/blog/angular-training/outputs/說明子元件如何透過 output 函式與 @Output 將事件通知父元件。Sun, 14 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/inputs/https://johnsonchen.dev/blog/angular-training/inputs/介紹父元件如何透過 input 函式與 @Input 將資料傳遞給子元件。Sat, 13 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/control-flow-for/https://johnsonchen.dev/blog/angular-training/control-flow-for/說明 Angular 模板中 @for 與 *ngFor 的清單渲染、track 與特殊變數用法。Fri, 12 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/control-flow-switch/https://johnsonchen.dev/blog/angular-training/control-flow-switch/整理 Angular 模板中的 switch 條件控制，涵蓋 @switch 與舊版 ngSwitch 的寫法。Thu, 11 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/control-flow-if/https://johnsonchen.dev/blog/angular-training/control-flow-if/介紹 Angular 模板中的條件渲染，包含 @if、@else 與舊版 *ngIf 的使用方式。Wed, 10 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/signals-basics/https://johnsonchen.dev/blog/angular-training/signals-basics/從變更偵測機制切入，整理 Angular Signals 的建立、更新與唯讀、衍生狀態寫法。Tue, 09 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/event-listeners/https://johnsonchen.dev/blog/angular-training/event-listeners/介紹 Angular 事件監聽的綁定方式，包含按鍵修飾符、$event 物件與防止預設行為。Mon, 08 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/data-binding/https://johnsonchen.dev/blog/angular-training/data-binding/說明 Angular 的 Property Binding、Attribute Binding、Class Binding 與 Style Binding 用法。Sun, 07 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/component-data-definition/https://johnsonchen.dev/blog/angular-training/component-data-definition/介紹 Angular 元件中的變數定義方式、型別系統（Interface、Type、Class），以及字串插值的使用。Sat, 06 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/modules/https://johnsonchen.dev/blog/angular-training/modules/介紹 Angular Module 的用途、@NgModule 設定，以及模組化應用程式的組織方式。Fri, 05 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/components/https://johnsonchen.dev/blog/angular-training/components/說明 Angular 元件的核心概念、@Component 結構、獨立元件與建立方式。Thu, 04 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/project-structure/https://johnsonchen.dev/blog/angular-training/project-structure/介紹 Angular 專案目錄結構、檔案命名慣例，以及 main.ts 的啟動入口。Wed, 03 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/environment-setup/https://johnsonchen.dev/blog/angular-training/environment-setup/整理 Angular 20 開發所需環境、Angular CLI 安裝步驟與新專案建立流程。Tue, 02 Sep 2025 00:00:00 GMTJohnson Chenhttps://johnsonchen.dev/blog/angular-training/introduction/https://johnsonchen.dev/blog/angular-training/introduction/說明 Angular 新手練功日誌系列的學習方向、適合讀者與後續將涵蓋的主題。Mon, 01 Sep 2025 00:00:00 GMTJohnson Chen