Вступ
Angular — один з найпотужніших та універсальних фреймворків для розробки сучасних веб-додатків. Незалежно від того, чи ви початківець, чи досвідчений розробник, створення нового проекту Angular — це перший крок до розкриття всього потенціалу цього фреймворка. У цьому посібнику я проведу вас через процес налаштування нового проекту Angular крок за кроком.
Попередні вимоги
Перед тим, як почати, переконайтеся, що на вашій системі встановлені наступні інструменти:
- Node.js: Angular вимагає наявності Node.js для управління збіркою та залежностями. Ви можете завантажити його за цим посиланням Завантажити Node.js
- Angular CLI: Інструмент командного рядка, який спрощує розробку в Angular. Встановіть його глобально за допомогою команди:
npm install -g @angular/cli
Щоб перевірити ці установки, виконайте наступні команди:
node -v
ng version
Якщо ви побачите номери версій у відповіді, ви готові продовжити.
Крок 1: Створення нового проекту Angular
Щоб почати свою подорож з Angular, відкрийте термінал або командний рядок і виконайте наступну команду:
ng new my-angular-app
Замість my-angular-app вкажіть бажану назву вашого проекту. Angular CLI проведе вас через серію запитань:
Чи хочете ви додати маршрутизацію Angular?
Виберіть "Так", якщо ваш проект потребує навігації між сторінками.
Який формат стилів ви хочете використовувати?
Варіанти включають CSS, SCSS, SASS, LESS або Stylus. Виберіть той, з яким вам зручно працювати.
CLI створить структуру проекту та встановить всі необхідні залежності. Це може зайняти кілька хвилин.
Крок 2: Навігація по проекту
Після завершення налаштування перейдіть до директорії вашого проекту:
cd my-angular-app
Тут ви знайдете наступні ключові папки та файли:
- src/app: Містить основні файли додатка.
- angular.json: Конфігураційний файл для Angular CLI.
- package.json: Перелік залежностей проекту.
Крок 3: Запуск вашого додатка Angular
Щоб побачити додаток в дії, виконайте наступну команду:
ng serve
За замовчуванням сервер розробки працює на http://localhost:4200. Відкрийте ваш браузер і перейдіть за цією адресою, щоб побачити стандартну стартову сторінку Angular.
Команда ng serve відстежує зміни у ваших файлах і автоматично перезавантажує браузер, коли вносяться оновлення. Це забезпечує зручний процес розробки.
Додаток Angular працює на localhost:4200
Висновок
Вітаємо! Ви успішно створили та запустили свій додаток Angular. Тепер ви можете почати створювати компоненти, інтегрувати сервіси та створювати красиві, інтерактивні веб-досвіди.
Angular надає потужну екосистему для вирішення навіть найскладніших завдань. Продовжуйте експериментувати та слідкуйте за новими посібниками, щоб стати майстром Angular!
Перекладено з: Creating Angular project in minutes