Angular AI Tutor интерактивно проводит вас шаг за шагом через создание полноценного современного Angular-приложения с нуля. Вы освоите актуальные паттерны и лучшие практики, создавая реальный проект: «Smart Recipe Box» — приложение для создания и управления рецептами.
Наша цель — развивать критическое мышление и помогать закреплять материал. Вместо того чтобы просто выдавать код, наставник объясняет концепции, показывает примеры, а затем даёт упражнения по проекту, которые вы решаете самостоятельно.
Начало работы
Доступ к AI-наставнику открывается через Angular MCP server.
- Установите Angular MCP server
- Создайте новый Angular-проект:
ng new <project-name> - Перейдите в каталог проекта (
cd <project-name>) в редакторе или инструменте с поддержкой ИИ, например Gemini CLI - Введите запрос вроде
launch the Angular AI tutor
Использование 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-сервер запущен. В 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, затем вставьте URL туториала: https://angular.dev/ai/ai-tutor
Как проверить, что сервер запущен
Откройте Command Palette (Ctrl+Shift+P), введите «MCP: List Running Servers» и найдите «angular-cli» в списке.
Общие проблемы
Если наставник отвечает некорректно или вы подозреваете проблему в приложении, попробуйте следующее:
- Введите «proceed»: часто это подталкивает наставника к следующему шагу, если он «застрял».
- Поправьте наставника: если он ошибается насчёт прогресса (например, говорит, что вы на Module 3, хотя завершили Module 8), просто сообщите об этом. Например: «I'm actually on Module 8.» Наставник переоценит код и скорректирует состояние.
- Проверьте UI: чтобы убедиться, как должен выглядеть интерфейс приложения, спросите наставника. Например: «What should I see in my UI?»
- Перезагрузите окно браузера: обновление часто решает проблемы, связанные с приложением.
- Жёсткий перезапуск браузера: ошибки иногда видны только в консоли разработчика браузера. Жёсткий перезапуск помогает сбросить связанные с приложением проблемы.
- Начните новый чат: всегда можно начать новый чат, чтобы очистить историю и начать заново. Наставник прочитает файлы и найдёт последний шаг, на котором вы остановились.
Ваш путь обучения: поэтапный маршрут
Вы будете создавать приложение в пять этапов. Можно пройти путь от начала до конца и получить полноценное рабочее Angular-приложение. Каждый модуль логически опирается на предыдущий — от основ до продвинутых возможностей реального мира.
Замечание об автоматической настройке: некоторым модулям нужен шаг подготовки — например, создание интерфейсов или mock-данных. В таких случаях наставник покажет код и инструкции по файлам. Вы отвечаете за создание и изменение этих файлов по инструкции до начала упражнения.
Этап 1: основы Angular
- Module 1: Getting Started
- Module 2: Dynamic Text with Interpolation
- Module 3: Event Listeners (
(click))
Этап 2: состояние и Сигналы
- Module 4: State Management with Writable Signals (Part 1:
set) - Module 5: State Management with Writable Signals (Part 2:
update) - Module 6: Computed Signals
Этап 3: архитектура компонентов
- Module 7: Template Binding (Properties & Attributes)
- Module 8: Creating & Nesting Components
- Module 9: Component Inputs with Signals
- Module 10: Styling Components
- Module 11: List Rendering with
@for - Module 12: Conditional Rendering with
@if
Этап 4: продвинутые возможности и архитектура
- Module 13: Two-Way Binding
- Module 14: Services & Dependency Injection (DI)
- Module 15: Basic Routing
- Module 16: Introduction to Forms
- Module 17: Intro to Angular Material
Этап 5: Signal Forms
- Module 18: Introduction to Signal Forms
- Module 19: Submitting & Resetting
- Module 20: Validation in Signal Forms
- Module 21: Field State & Error Messages
Замечание об ИИ и обратной связи
Этот наставник работает на большой языковой модели (LLM). Мы старались сделать его экспертом, но ИИ может ошибаться. Если встретите объяснение или пример кода, которые кажутся неверными, сообщите нам. Можно поправить наставника — он учтёт обратную связь и скорректирует ответ.
О технических ошибках и запросах функций пишите в issue.