Установка
Начните работу с Angular быстро — через онлайн-стартеры или локально в терминале.
Играйте онлайн
Если вы просто хотите поэкспериментировать с Angular в браузере без настройки проекта, используйте нашу онлайн-песочницу:
Playground
Самый быстрый способ поработать с приложением Angular. Настройка не требуется.
Настройка нового проекта локально
Если вы начинаете новый проект, скорее всего, захотите создать локальный проект, чтобы использовать такие инструменты, как Git.
Требования
- Node.js — v20.19.0 или новее
- Текстовый редактор — рекомендуем Visual Studio Code
- Терминал — необходим для выполнения команд Angular CLI
- Инструмент разработки — для улучшения рабочего процесса рекомендуем Angular Language Service
Инструкции
Следующее руководство проведёт вас через настройку локального проекта Angular.
Установка Angular CLI
Откройте терминал (если вы используете Visual Studio Code, можно открыть встроенный терминал) и выполните следующую команду:
Если у вас возникают проблемы с выполнением этой команды в Windows или Unix, ознакомьтесь с документацией CLI для получения дополнительной информации.
Создание нового проекта
В терминале выполните команду CLI ng new с желаемым именем проекта. В следующих примерах мы будем использовать имя проекта my-first-angular-app.
ng new <project-name>
Вам будут предложены параметры конфигурации проекта. Используйте клавиши со стрелками и Enter для навигации и выбора нужных опций.
Если у вас нет предпочтений, просто нажмите Enter, чтобы принять значения по умолчанию и продолжить настройку.
После выбора параметров конфигурации и завершения настройки CLI вы должны увидеть следующее сообщение:
✔ Packages installed successfully.
Successfully initialized git.
На этом этапе вы готовы запустить проект локально!
Локальный запуск нового проекта
В терминале перейдите в новый проект Angular.
cd my-first-angular-app
Все зависимости должны быть установлены на этом этапе (это можно проверить наличием папки node_modules в проекте), поэтому можно запустить проект командой:
npm start
Если всё прошло успешно, в терминале должно появиться похожее подтверждающее сообщение:
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
➜ Local: http://localhost:4200/
➜ press h + enter to show help
Теперь можно открыть путь из Local (например, http://localhost:4200/) и увидеть приложение. Удачного кодинга! 🎉
Разработка с помощью ИИ
Чтобы начать разработку в предпочитаемой IDE с поддержкой ИИ, ознакомьтесь с правилами промптов и лучшими практиками Angular.
Следующие шаги
Теперь, когда вы создали проект Angular, вы можете узнать больше об Angular в нашем руководстве «Основы» или выбрать тему в подробных руководствах!