Angular AI 教學導師

Angular AI 教學導師旨在以互動方式，逐步引導你從零開始建置一個完整、現代的 Angular 應用程式。你將透過建置一個真實、具體的專案，學習最新模式與最佳實踐：一個用於建立與管理食譜的「Smart Recipe Box」。

我們的目標是培養批判性思考，並幫助你記住所學。教學導師不會只是直接給你程式碼，而是會講解概念、展示範例，然後給你專為專案設計的練習，讓你自己動手解題。

開始使用

你可以透過 Angular MCP server 存取 AI 教學導師。

安裝 Angular MCP server
建立新的 Angular 專案 ng new <project-name>
在 AI 驅動的編輯器或工具（例如 Gemini CLI）中，導覽至你的新專案（cd <project-name>）
輸入類似 launch the Angular AI tutor 的提示詞

每個模組都以簡短的概念講解開始。 Angular AI Tutor 呈現簡短概念講解的螢幕截圖。如有適用，教學導師會呈現程式碼範例來示範概念。 Angular AI Tutor 展示程式碼範例的螢幕截圖。教學導師也會提供開放式練習，檢驗你的理解程度。 Angular AI Tutor 提供練習的螢幕截圖。最後，教學導師會在進入下一個模組之前檢查你的成果。 Angular AI Tutor 檢查使用者成果的螢幕截圖。

運作方式：學習循環

對於每個新主題，你都會遵循一個強調批判性思考的學習循環，幫助你更好地記住所學。

學習概念：教學導師會簡短講解一項核心 Angular 功能，並展示通用程式碼範例加以說明。
應用你的知識：你會立即得到一個實作練習。教學導師以高層次方式呈現這些練習，包含目標與預期成果，鼓勵你自己思考解法。
取得回饋與支援：當你準備好時，告訴教學導師即可。它會自動讀取你的專案檔案，驗證你的解答是否正確。如果你卡住了，完全由你掌控。你可以要求 "hint" 取得更多指引，或輸入 "detailed guide" 或 "step-by-step instructions" 取得逐步說明。

成功完成後，教學導師會直接進入下一個主題。你也可以隨時向教學導師詢問某個主題的更多資訊，或提出任何相關的 Angular 問題。

功能與指令

你的學習體驗由你掌控。隨時都可以使用這些功能：

離開與回來

歡迎隨時休息。你的進度與專案的程式碼綁定。當你回到新的工作階段時，教學導師會自動分析你的檔案，精確判斷你上次停在哪裡，讓你無縫地從中斷處繼續。

專業提示：我們強烈建議使用 Git 儲存你的進度。完成一個模組後，把變更提交是個好主意（例如 git commit -m "Complete Phase 1, Module 8"）。這就像是你個人的檢查點，隨時可以回來。

調整你的經驗等級

你可以把經驗等級設定為 Beginner (1-3)、Intermediate (4-7) 或 Experienced (8-10)。你可以在工作階段中隨時變更這個設定，教學導師會立即調整其教學風格以配合。

範例提示詞：

"Set my experience level to beginner."
"Change my rating to 8."

查看完整學習計畫

想看全貌，或確認自己已經走了多遠？只要要求目錄即可。

範例提示詞：

"Where are we?"
"Show the table of contents."
"Show the plan."

教學導師會顯示完整的學習計畫，並標示你目前的位置。

關於樣式的說明

教學導師會為你的應用程式套用基本樣式，讓畫面保持整潔。我們非常鼓勵你套用自己的樣式，讓應用程式成為你的作品。

跳過目前模組

如果你想直接進入學習路徑的下一個主題，可以要求教學導師跳過目前的練習。

範例提示詞：

"Skip this section."
"Auto-complete this step for me."

教學導師會要求確認，然後呈現目前模組的完整程式碼解答，並嘗試自動套用任何必要的更新，確保你能順利繼續下一個模組。

跳至任何主題

如果你想不按順序學習特定主題（例如從基礎直接跳到表單），也可以。教學導師會提供必要的程式碼，把你的專案更新到所選模組的正確起點，並嘗試自動套用任何必要的更新。

範例提示詞：

"Take me to the forms lesson."
"I want to learn about Route Guards now."
"Jump to the section on Services."

疑難排解

設定問題

輸入 "launch the Angular AI tutor" 沒有反應嗎？

請先確認你有開啟專案。教學導師需要一個真正的 Angular 專案才能運作：

ng new my-app
cd my-app
code .

接著確認你的 MCP server 正在執行。在 VS Code 中，開啟 .vscode/mcp.json 檔案，並點選檔案頂端的 "Start" 按鈕。

當你輸入 "launch the Angular AI tutor" 時，你應該會看到一個勾號，顯示 "Reviewed .vscode/mcp.json and ran start task"，以及一個詢問 "Allow task run?" 的提示——請直接點選 Allow。

仍然無法運作的話：

先輸入 #angular-cli 載入 Angular 上下文，然後貼上教學網址：https://angular.dev/ai/ai-tutor

如何確認伺服器正在執行

開啟命令選擇區（Ctrl+Shift+P），輸入 "MCP: List Running Servers"，並在清單中尋找 "angular-cli"。

一般問題

如果教學導師沒有正確回應，或你懷疑應用程式有問題，可以試試以下幾件事：

輸入 "proceed"：這通常能促使教學導師在卡住時繼續下一步。
糾正教學導師：如果教學導師誤判了你的進度（例如它說你在 Module 3，但你已完成 Module 8），直接告訴它即可。例如："I'm actually on Module 8." 教學導師會重新評估你的程式碼並調整。
確認你的使用者介面：如果你想確認應用程式的使用者介面應該長什麼樣子，只要詢問教學導師即可。例如："What should I see in my UI?"
重新載入瀏覽器視窗：重新整理能解決許多與你的應用程式相關的問題。
強制重啟瀏覽器：錯誤有時只會出現在瀏覽器的開發者主控台中。強制重啟有助於清除與應用程式相關的潛在問題。
開始新聊天：你隨時可以開始新聊天，移除既有的記錄並重新開始。教學導師會讀取你的檔案，找出你上次所在的最新步驟。