Learn Angular

從第一個元件到能與伺服器通訊的真實 Web 應用，循序漸進地學習 Angular。在三窗格工作台中編寫 TypeScript 程式碼、範本和樣式，並即時查看元件在手機上的渲染效果。

這是一門以實作為核心的 Web 開發課程：學習路徑上的每一步都對應著一個真實的 Angular 概念，工作台讓你能夠立即上手嘗試。你將學習前端開發人員日常使用 TypeScript 的方式，在元件、服務和模板中使用它，最終能夠獨立建構 Web 應用。

內容亮點

• 38 門課程和 144 個簡短精煉的課程，從入門級 (A1) 到高級 (C1)

• 即時工作台：component.ts、template.html 和 styles.css 檔案並排顯示，並提供程式碼運行預覽

• 專案選項卡，包含多檔案工作區、引導式專案進度和版本歷史記錄

• 60 個 TypeScript 編碼任務，分為三個難度級別，提供提示和完整解答

• 最終考試和結業證書（印有您的姓名）

• 該應用程式支援 22 種語言

完整的前端開發路徑

• 獨立元件、範本和內建控制流程（@if、@for）

• 訊號：signal()、computed() 和 effect()，訊號輸入和查詢

• 資料綁定、雙向綁定、管道和生命週期鉤子

• 依賴注入和共享服務

• 路由和導航，包括進階路由模式

• 範本驅動與響應式表單、自訂表單控制項

• RxJS 基礎知識運算符

• 用於處理真實 API 資料的 HttpClient 和攔截器

• 使用 NgRx 和 NgRx SignalStore 進行狀態管理

• 單元測試、組件測試和端對端測試

• 變更偵測、效能最佳化、伺服器端渲染和資料水合

• 使用模組聯合建構微前端、函式庫、國際化與安全

鞏固練習

• 針對容易遺忘的概念進行迷你測驗與閃卡複習

• 語法、裝飾器和指令的單頁速查表

• 可開啟、執行和編輯的簡短範例元件庫

• 50 題面試題目及清楚答案，前端開發人員面試前必備

• 世界程式設計挑戰：一個共同的問題，所有人的解決方案

• 連續學習記錄、經驗值、排行榜和每日提醒，幫助您保持程式設計習慣

• 儲存您自己的程式碼、筆記和喜愛的課程

AI 工具（專業版）

• AI 導師：詢問錯誤、概念或自己的程式碼，並獲得清晰的解釋

• AI 課程產生器：針對您感興趣的主題生成客製化課程別錯過

• AI 遊樂場：描述頁面並觀看程式碼生成

適用人群

• 初學者，踏出 Web 開發和前端工作的第一步

• 學習第一個框架的 JavaScript 和 TypeScript 開發人員

• 在工作中轉向此框架的 React 或 Vue 開發人員

• 準備從事 Web 開發工作的學生和職業轉型者

使用方法

1. 從免費的第一門課程開始：了解框架及其應用程式的外觀

2. 開啟工作台，變更類別中的一個值，查看範本的更新

3. 逐步學習：訊號、服務、路由、表單和 HTTP

4. 透過測驗和編碼任務檢驗你的學習成果

5. 通過最終考試並獲得證書

免費版和專業版

第一門課程和即時工作台免費。專業版解鎖所有課程、所有程式設計任務和 AI 工具，並移除廣告。

注意：即時預覽需要網路連線。

此應用是 CoddyKit 出品的獨立學習課程。它與 Google 或 Angular 團隊沒有任何關聯，也未獲得其認可。

立即開始，按照自己的節奏學習 Angular，並在幾分鐘內建立你的第一個組件。