# Johnson Chen

> 前端開發實作、TypeScript 型別設計與 Angular 學習路線，整理可直接應用於專案的範例、除錯紀錄與架構思考。

一個位於台灣桃園的個人技術網站，內容以繁體中文撰寫，聚焦前端開發實作、TypeScript 型別設計與 Angular 學習路線，並整理可直接應用於專案的範例、除錯紀錄與架構思考。

## 主要入口

- [首頁](https://johnsonchen.dev/)：網站簡介與最新文章。
- [Blog](https://johnsonchen.dev/blog/)：所有文章的完整索引。
- [Series](https://johnsonchen.dev/series/)：依主題整理的系列文章。
- [Tags](https://johnsonchen.dev/tags/)：依標籤分類的文章。
- [RSS](https://johnsonchen.dev/rss.xml)：訂閱最新文章。

## 系列

- [Angular 新手練功日誌：從零到職場冒險](https://johnsonchen.dev/series/angular-training/)：從 Angular 基礎語法一路走到實作觀念，建立可帶進職場的開發脈絡。（30 篇）

## Angular 新手練功日誌：從零到職場冒險

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

## 授權與聯絡

- 內容作者：Johnson Chen。
- GitHub：https://github.com/johnsonchen3669。
- 文章內容以繁體中文撰寫，引用時請保留出處與原文連結。