2026年10月27日 星期二

Angular 工程師進修地圖：從前端入門到 AI 代理人應用的五門課程

 ANGULAR LEARNING ROADMAP

Angular 工程師進修地圖

從前端入門到 AI 代理人應用的五門課程

同樣是學 Angular，寫 Java 的人、寫 C# 的人、已經把 Angular 用得很熟的人，卡住的地方完全不同。先找到自己的位置，再決定從哪一門開始。

索取課程資料

PATH 01 · Java(Jakarta EE)背景
使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs) → Angular搭配Java EE開發現代化的Web應用程式(ANJEE)
PATH 02 · .NET 背景
Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447) → Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448)
NEXT LEVEL · AI 代理人應用
Angular Agentic Native下一代AI代理人應用開發實務(AANAI)
五門課會碰到的技術
StandaloneSignalsTypeScriptJakarta EEASP.NET CoreRxJSCapacitorOAuth 2.0Tool CallingZodFirebase AI LogicGitHub Copilot

WHERE ARE YOU NOW

三種工程師，三種卡法

Angular 的門檻，常常不在框架本身。

01 · Java 工程師

週一早上，Java 後端工程師被調去支援前端。

公司那套 Java 內部系統，前端是好幾年前用 Angular 做的，有些頁面甚至還是更早的 AngularJS。打開專案，滿滿的 TypeScript、元件、Data Binding，連資料夾為什麼這樣分都看不懂。後端的 API 他寫得出來，前端要怎麼接、畫面要怎麼跟著資料變，完全沒頭緒。問同事，同事說：「你先把 Angular 學一下。」學哪一版？沒人說得清楚。

02 · .NET 工程師

另一邊，寫 C# 的工程師接到新專案，前端指定用 Angular。

上網查資料，發現 Angular 17 之後 Standalone 已經是新專案的預設類型，官方範例裡到處是 @if、@for、Signal；可是網路上一大半的教學還停在舊的 NgModule 寫法，照著做反而越看越亂。團隊裡沒幾個人真的用過新語法，到底該從哪一套學起？

03 · 熟 Angular 的團隊

還有一種團隊，Angular 早就用得很熟。

這次主管說，產品裡要加 AI 功能。串一支模型 API 不難，難的是之後：LLM 的回覆每次都不太一樣，要讓它幫使用者執行動作，又怕它亂來。API Key 放在前端安不安全？模型出錯時畫面該怎麼辦？這些是把 AI 接進產品之後，才會浮現的架構問題。

三個人都在「學 Angular」，但需要補的東西差很多。Java 工程師要先補上 Angular 前端的基本功，再弄清楚它怎麼跟 Jakarta EE 後台串接；.NET 工程師需要的是直接用新一代 Standalone 模式打底，並把 ASP.NET Core Web API 接起來；而已經熟 Angular 的人，要處理的其實是 AI 應用的架構問題。

所以與其問「Angular 要怎麼學」，不如先問：你的後端是什麼？你現在卡在哪一段？

背景不同，適合的起點也不同。

THE ROADMAP

一張圖看懂三條進修路徑

每條路徑內有建議的先後順序，依你的技術背景選一條走。AI 代理人應用課程，建議先具備「Angular Standalone模式深度探索Part 1-使用GitHub Copilot」的基礎。

PATH 01
Java(Jakarta EE)背景
1使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs)
Angular 入門(含 AngularJS)
2Angular搭配Java EE開發現代化的Web應用程式(ANJEE)
Angular × Jakarta EE 前後端整合

熟 Java，想補上 Angular 前端框架，並與 Jakarta EE 後台串接；也適合需要看懂既有 AngularJS 專案的工程師。

PATH 02
.NET 背景
1Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)
Standalone 模式基礎
2Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448)
進階功能與行動版 App

熟 C# 與 ASP.NET Core，想用新一代 Standalone 寫法從頭打好 Angular 基礎。

NEXT LEVEL
AI 代理人應用
★Angular Agentic Native下一代AI代理人應用開發實務(AANAI)
AI 代理人應用開發

已熟 Standalone 模式(建議先具備 Standalone 模式深度探索 Part 1 的技術能力)，要把 AI 代理人能力放進產品。

COURSES

五門課程詳細介紹

每門課適合誰、學什麼、學完能做什麼。

ANJS路徑一 · Java(Jakarta EE)背景 · 第 1 站

使用Java開發工具快速入門AngularJS、TypeScript、Angular

SPA(Single Page Application,單頁式應用程式)已經是 Web 開發的主流之一，但要把它做好，前端工程師得同時駕馭 HTML、CSS，還有最讓人頭痛的 JavaScript。選一套完善的前端框架，可以省下大量開發時間，也能避開 SPA 常見的疑難雜症。這門課從你熟悉的 Java 開發工具出發，帶你入門 Angular，同時認識舊專案常見的 AngularJS。

適合你，如果
你是網頁前端或後端工程師，熟悉 JavaScript、HTML、CSS，想用熟悉的 Java 開發環境入門 Angular，或需要看懂公司既有的 AngularJS／Angular 專案。
課程重點
  • AngularJS 與 Angular 簡介及入門
  • AngularJS 核心觀念：Expression、Module、Directive、Model 與 Data Binding、Controller 與 Scope
  • Form 與 Validation、Filter、Service，以及 DOM 與 Event 處理
  • 透過 Http service 呼叫 Restful Web Service，並學會 Routing
  • 以 Case Study 實際開發 SPA Web 應用程式
學完你可以
  • 使用 AngularJS 框架與 Angular 平台開發 SPA Web 應用程式
  • 看懂並撰寫基本的 TypeScript 程式
時數｜28 小時先備知識｜JavaScript、HTML、CSS

了解課程詳情 →

ANJEE路徑一 · Java(Jakarta EE)背景 · 第 2 站

Angular搭配Java EE開發現代化的Web應用程式

企業對現代化、高效能 Web 應用程式的要求越來越高，單純用 HTML 搭 JavaScript 已經不夠用。這門課把 Angular 的前端(Front-End)技術和 Jakarta EE 的後台(Back-End)技術接在一起，建構穩定且安全的 Web 應用程式。

適合你，如果
你是網頁前端或後端工程師，已經具備 使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs) 課程的技術能力，想把 Angular 前端和 Jakarta EE 後台真正串起來。
課程重點
  • Angular 與 Jakarta EE 平台簡介
  • 後台技術：CDI(Context and Dependency Injection)、EJB Lite、JPA(Java Persistence API)
  • Microservice 與 MicroProfile，JSON-P、JSON-B
  • 使用 JAX-RS 開發 Restful Web Service
  • MVC Pattern，以及前端 MVC 框架與後台 MVC 框架的比較
  • TypeScript 基礎、Angular CLI、Data Binding、Angular 表單
  • 由 Angular 呼叫 Restful Web Service，並涵蓋 Security 主題
學完你可以
  • 使用 Angular 開發前端 Web 應用程式
  • 使用 Jakarta EE 開發後台商業邏輯與資料存取邏輯元件
  • 建立 Angular 表單，並透過 Angular 呼叫 Restful Web Service
時數｜35 小時先備知識｜JavaScript、HTML、CSS、Java 基本語法建議先修｜使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs)

了解課程詳情 →

U2447路徑二 · .NET 背景 · 第 1 站

Angular Standalone模式深度探索Part 1-使用GitHub Copilot

過去以 NgModule 為核心的 Module 模式，學習曲線相當陡峭，讓不少人望之卻步。Standalone 模式在 v14 以開發者預覽推出、v15 正式穩定，Angular 17 起成為新專案的預設類型：學起來更輕鬆，專案也更輕盈。Signal 從 v16 開始導入，v17 再加入 @if、@for 等新的控制流程語法並強化 SSR，開發便利性提升不少。這門課用 Standalone 模式帶你從頭打好基礎。

適合你，如果
你想學習前端網頁開發，熟悉 JavaScript、HTML、CSS 及 C#、ASP.NET Core，想直接用新一代寫法學 Angular。
課程重點
  • 環境安裝、專案結構、常用指令，認識 Standalone 專案模式與程式引動流程
  • 用 @if、@switch、@for 控制頁面流程；屬性綁定、事件處理、雙向綁定
  • 路由：導覽選單、預設首頁與 NotFound 處理、動態產生選單
  • Signal 基礎、Component 生命週期，自訂控制項、Directive 與 Pipe
  • Template-Driven Form 的實作、驗證與自訂驗證
  • Service 與 DI 依存注入，使用 HttpClient 串接 ASP.NET Core Web API，解決跨網域(CORS)問題並完成 CRUD
  • 以 IIS 為目標伺服器部署 Angular 應用程式
學完你可以
  • 建立結構良好、功能完整且易於維護的 Angular 應用程式
  • 設計 ASP.NET Core Web API，並讓 Angular 與後端有效交換資料
時數｜28 小時先備知識｜JavaScript、HTML、CSS、C#、ASP.NET Core開發工具｜Visual Studio Code＋GitHub Copilot

了解課程詳情 →

U2448路徑二 · .NET 背景 · 第 2 站

Angular Standalone模式深度探索Part 2-使用GitHub Copilot

打好基礎之後，真實專案會遇到的問題才開始出現：非同步資料怎麼處理比較乾淨？表單越來越複雜怎麼辦？使用者要登入、要用手機開？Part 2 接著處理這些進階需求。

適合你，如果
你已經具備 Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447) 的技術能力，想處理更複雜的非同步、表單與驗證授權，甚至把網頁升級成行動版 App。
課程重點
  • Angular 的非同步機制：Observable 與 RxJS、Promise 與 async/await
  • 再探路由：延遲載入模組與元件、傳遞參數與路由參數綁定
  • 用模組與函式庫改善程式結構，用 Angular Material 改善 UI
  • Reactive Form：響應式表單、FormArray、通用與自訂驗證、非同步驗證
  • 用 Capacitor 升級行動版 App：存取手機硬體、使用模擬器、部署到 Android 手機
  • 驗證與授權：路由守門員、Login/Logout、OAuth 2.0 社群帳號登入(以 Google 為例)
  • 國際化語系：用 Pipe 顯示當地文化格式、國際化套件與多語版本部署
學完你可以
  • 用延遲載入提升應用程式效能、加快初始載入時間
  • 把 Web 應用程式升級成行動版，並在模擬器與實機上測試部署
  • 為應用程式加上路由保護、登入登出與多語系支援
時數｜28 小時先備知識｜JavaScript、HTML、CSS、C#、ASP.NET Core建議先修｜Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)

了解課程詳情 →

AANAI進階 · AI 代理人應用

Angular Agentic Native下一代AI代理人應用開發實務

把 AI 接進 Angular，和做出一個能交給使用者的 AI 應用，是兩回事。這門課從架構層面處理生產環境的挑戰：用 Signals 與進階非同步機制建立穩固的資料流，讓 AI 整合從「片段的程式碼實作」提升為「系統級架構決策」。課程最後聚焦在「控制 AI 的不確定性」——面對 LLM 的非確定性輸出，系統仍要穩定可靠。

適合你，如果
你已經在用 Angular 開發、熟悉 Standalone 模式，準備把 AI 代理人(Agentic)能力放進實際專案。
課程重點
  • Angular v19+ 與 Agentic Native 架構；設定 GitHub Copilot Agent 模式與自訂提示詞規則，整合 Angular CLI MCP 伺服器
  • Signals、computed、linkedSignal 管理 AI 對話歷史；Resource API 處理非同步資料流與載入、錯誤狀態
  • 比較 Firebase AI Logic、Genkit 與直接呼叫 Gemini API 的適用場景，並以 Firebase AI Logic 降低 API Key 暴露於前端的風險
  • 用 Zod Schema 定義工具規格實作 Tool Calling，動手做電商機器人
  • 透過 response_schema 強制 LLM 輸出結構化 JSON，結合 Signal Forms(實驗性功能)驗證 AI 生成的資料
課程中動手實作
  • 具備打字機效果的串流回應(Streaming Responses)介面
  • 透過 Tool Calling 讓 AI 執行應用程式內的具體任務
  • 在 AI 執行高風險操作前加入人工確認流程，並以優雅降級策略應對 LLM 服務不穩定
時數｜14 小時先備知識｜至少上過 Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)，或熟知 Part 1、Part 2 相關知識

了解課程詳情 →

QUICK CHECK

還不確定？三個問題幫你判斷

找到最接近你的情況，看看建議的起點。

01　你的後端主力是 Java，想補上 Angular 前端，或需要接手既有的 Angular 專案？
建議起點：使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs) → Angular搭配Java EE開發現代化的Web應用程式(ANJEE)
先打好 Angular 入門基礎，再接著完成 Angular 與 Jakarta EE 的前後端整合。
02　你熟悉 C# 與 ASP.NET Core，想用 Standalone 模式打好 Angular 基礎？
建議起點：Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447) → Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448)
先上 Part 1 打好 Standalone 基礎，再接 Part 2 進階到行動版 App 與驗證授權。
03　你已經熟悉 Angular Standalone 模式，要把 AI 代理人能力放進產品？
建議起點：Angular Agentic Native下一代AI代理人應用開發實務(AANAI)
可以直接報名這門課(建議已具備 Standalone 模式深度探索 Part 1 的技術能力)。

OVERVIEW

五門課一覽

時數、搭配技術與建議先修，一張表比較。

課程定位時數搭配技術建議先修
使用Java開發工具快速入門AngularJS、TypeScript、Angular(ANJS)Angular 入門(含 AngularJS)28 小時Java 開發工具—
Angular搭配Java EE開發現代化的Web應用程式(ANJEE)Angular × Jakarta EE 前後端整合35 小時Jakarta EE、JAX-RS使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs)
Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)Standalone 基礎28 小時ASP.NET Core Web API—
Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448)進階與行動版 App28 小時Capacitor、OAuth 2.0Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)
Angular Agentic Native下一代AI代理人應用開發實務(AANAI)AI 代理人應用14 小時Firebase AI Logic、ZodAngular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)或同等知識

上課前準備

Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)、Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448)：課程前一天需申請 GitHub 帳號與 GitHub Copilot Free 版訂閱；上課使用 Windows 平台與 Visual Studio Code。

Angular Agentic Native下一代AI代理人應用開發實務(AANAI)：請於上課前申請 Google 帳號；若沒有申請 Google Gemini Pro 付費版，可能會有部分練習因額度不足無法完成實作。上課使用 Windows 11 與最新版 Google Chrome。

FAQ

Angular 課程常見問題

選課前最常被問到的幾件事。

Q完全沒有 Angular 經驗，應該從哪一門課開始？
看你的後端技術背景與專案需求。熟悉 Java、後台使用 Jakarta EE 的工程師，建議從 使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs) 開始(同時涵蓋 AngularJS 與 Angular)；熟悉 C# 與 ASP.NET Core、想用新一代 Standalone 寫法開發，建議從 Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447) 開始。兩門課都從框架基礎教起，差別在於搭配的開發工具與後端技術。
QAngular 的 Standalone 模式是什麼？為什麼要學？
Standalone 模式讓元件不必再透過 NgModule 宣告，比過去以 NgModule 為核心的 Module 模式更容易上手。它在 v14 以開發者預覽推出、v15 正式穩定，Angular 17 起成為新專案的預設類型，學習上更輕鬆，專案也更輕盈。Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447) 與 Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448) 都以 Standalone 模式授課，Angular Agentic Native下一代AI代理人應用開發實務(AANAI) 也以熟悉 Standalone 模式為前提。
QAngularJS 和 Angular 有什麼不同？
AngularJS 是以 JavaScript 撰寫的第一代框架，官方已於 2021 年底停止支援；Angular(v2 以後)則改以 TypeScript 為主要語言重新設計。使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs) 課程會同時介紹 AngularJS 與 Angular，並帶你學會 TypeScript 基本語法，適合需要接手或維護既有專案的工程師。
QStandalone 模式深度探索 Part 1 和 Part 2 一定要依序上嗎？
Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448) 的先備知識是「已完成 Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447) 所具備的技術能力」。如果你已經熟悉 Standalone 模式、Signal、DI 與 HttpClient 等內容，可以評估直接上 Part 2；如果還不熟，建議先上 Part 1。
Q後端用 Java 或 .NET，學 Angular 有差別嗎？
Angular 本身是前端框架，但實務上一定要和後端 API 串接。Java 路徑(使用Java開發工具快速入門AngularJS、TypeScript、Angular(Anjs) → Angular搭配Java EE開發現代化的Web應用程式(ANJEE))會用 JAX-RS 開發 Restful Web Service，並學 CDI、JPA 等 Jakarta EE 後台技術；.NET 路徑(Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447) → Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448))則以 ASP.NET Core Web API 作為伺服器端範例。選擇和你工作上一致的後端，學完能更快用在專案裡。
Q哪一門課可以學到用 Angular 做手機 App？
Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448) 會介紹 Capacitor，教你使用 Capacitor API 存取手機硬體設備、將 Web 應用程式升級成行動版，並透過模擬器測試、部署到 Android 手機。
QAngular AI 代理人應用課程需要什麼基礎？會教哪些 AI 技術？
Angular Agentic Native下一代AI代理人應用開發實務(AANAI) 適合已在使用 Angular、熟悉 Standalone 模式的工程師，先備知識是至少上過 Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)，或熟知 Part 1、Part 2 相關知識。課程涵蓋 GitHub Copilot Agent 模式與 Angular CLI MCP 伺服器、Signals 與 Resource API、Firebase AI Logic 串接 LLM、以 Zod Schema 實作 Tool Calling，以及結構化 JSON 輸出與 Signal Forms(實驗性功能)驗證。
Q課程會用到 GitHub Copilot 或 Gemini 嗎？需要自己付費嗎？
Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)、Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448) 使用 Visual Studio Code 搭配 GitHub Copilot，課程前一天需申請 GitHub 帳號與 GitHub Copilot Free 版訂閱。Angular Agentic Native下一代AI代理人應用開發實務(AANAI) 需事先申請 Google 帳號；若沒有申請 Google Gemini Pro 付費版，可能會有部分練習因額度不足無法完成實作。
Q上課使用什麼作業系統與開發工具？
Angular Standalone模式深度探索Part 1-使用GitHub Copilot(U2447)、Angular Standalone模式深度探索Part 2-使用GitHub Copilot(U2448) 使用 Windows 平台與 Visual Studio Code；Angular Agentic Native下一代AI代理人應用開發實務(AANAI) 使用 Windows 11 與最新版 Google Chrome 瀏覽器。

還不確定該從哪一門開始？

把你目前的技術背景告訴我們，我們會幫你找出最適合的起點。

索取課程資料

關於恆逸教育訓練中心

恆逸致力於提供高品質專業認證培訓，為台灣 IT 領域課程的領導品牌之一。想了解更多恆逸其他系列課程，請上官網或來電 (02)25149191，將有專人為您服務。

於

沒有留言:

張貼留言