Angular編程 教學課程

上門編程教學課程內容

課程簡介

本課程專為希望快速掌握 Angular 前端框架的開發者設計，三小時內完整講解 Angular 架構、資料綁定、元件設計、服務與依賴注入（Dependency Injection）核心概念。

Angular 由 Google 開發與維護，是構建大型、結構化 Web 應用最成熟的框架之一，擁有完整的模組化設計、強類型開發（TypeScript）與強大的表單與路由系統。
課程透過實務導向教學方式，從專案建立到核心語法與模組整合，帶領學員迅速建立企業級前端應用開發思維。

 

適合對象：

• 熟悉 HTML、CSS、JavaScript，想學習企業級框架的前端工程師

• 想使用 TypeScript 進行大型專案開發者

• 有 React / Vue 基礎，想比較架構式框架差異的工程師

• 需要維護或設計資料導向系統前端介面的開發者

學習成果：

• 理解 Angular 架構概念與元件化開發流程

• 能建立 Module、Component、Service、Routing 架構

• 掌握資料綁定（Data Binding）與事件交互設計

• 能整合 HTTP Client 串接 API

• 具備構建中小型 SPA（單頁應用）的能力

---

 

課程時長

3 小時（180 分鐘）
理論講解與實作練習比例約 3 : 7

---

 

課程大綱

第一部份：Angular 概論與環境建置（30 分鐘）

• Angular 的設計理念與框架特性

• Angular vs React vs Vue 架構比較

• 安裝與開發環境建置（Node.js、Angular CLI）

• 專案建立與目錄結構說明

• 實作：建立第一個 Angular 專案並顯示動態內容

---

第二部份：元件化開發與模板語法（40 分鐘）

• 元件（Component）結構與建立流程

• 模板語法（Template Syntax）介紹

• 資料綁定：Interpolation、Property Binding、Event Binding

• 雙向資料綁定（Two-way Binding, ngModel）

• 實作練習：建立「產品清單顯示頁」與互動事件

---

第三部份：結構指令與樣式控制（40 分鐘）

• 結構型指令（*ngIf、*ngFor、*ngSwitch）

• 屬性型指令（[ngClass]、[ngStyle]）

• 管線（Pipes）格式化資料顯示（日期、金額、字串）

• 建立自訂 Pipes

• 實作練習：製作「條件渲染的訂單清單」

---

第四部份：服務（Service）與資料整合（40 分鐘）

• Dependency Injection（DI）與服務共享機制

• 建立自訂 Service 管理資料邏輯

• HTTPClientModule 與 REST API 串接

• Observable（RxJS）與非同步資料流概念

• 實作範例：建立「商品 API 讀取與顯示」功能

---

第五部份：模組化、路由與應用部署（30 分鐘）

• Angular 模組（NgModule）結構與分工

• 路由（RouterModule）導覽設計

• 路由參數（Route Parameter）與子路由設定

• 應用部署（ng build / Firebase / Netlify）

• 延伸學習方向：Angular Forms、NgRx、RxJS 進階應用

---

 

課程特色

• 三小時濃縮 Angular 的核心語法與架構知識。

• 強調企業級開發架構思維與可維護性設計模式。

• 理論與實作結合，課堂中即可完成一個小型 SPA 專案。

• 打下 Angular 進階學習（Reactive Forms、NgRx、RxJS）的基礎。