Тепер, коли всі необхідні інструменти, включаючи Node.js, VS Code та Angular CLI, встановлені, настав час створити свій перший проєкт і побачити, як Angular CLI спрощує процес розробки.

Що таке Angular CLI?

Він дозволяє:

• Швидко створювати нові проєкти з наперед визначеною структурою;

• Генерувати компоненти, сервіси та інші елементи проєкту;

• Запускати сервер розробки для тестування та налагодження;

• Збирати додаток для розгортання у продакшн.

З Angular CLI немає потреби вручну налаштовувати файли та залежності — усе конфігурується автоматично.

Налаштування робочого простору

Перед створенням нового проєкту оберіть зручне місце на комп’ютері, де зберігатимуться ваші Angular-проєкти.

Якщо у вас ще немає окремої теки для проєктів, створіть її за допомогою наступної команди:

Ця команда створює нову теку з назвою projects у вказаному місці.

Далі перейдіть до щойно створеної теки, виконавши команду:

Ця команда відкриває теку projects, дозволяючи працювати всередині неї.

Створення Angular-проєкту за допомогою CLI

Щоб створити новий Angular-проєкт, виконайте наступну команду у своїй теці проєкту:

• ng new – команда для створення нового Angular-проєкту;

• angular-app – назва проєкту (можна використати будь-яку назву на ваш розсуд).

Після виконання команди Angular CLI запропонує відповісти на кілька питань для налаштування:

• Додати Angular routing? – це буде розглянуто пізніше, тому наразі оберіть Yes;

• Який формат стилів бажаєте використовувати? – це визначає тип таблиць стилів для вашого проєкту. Рекомендується обрати CSS, але можна вибрати будь-який зручний варіант.

Після підтвердження цих опцій Angular CLI почне встановлювати залежності. Цей процес може зайняти кілька хвилин, оскільки завантажуються та встановлюються всі необхідні пакети.

Після завершення налаштування з’явиться повідомлення про успішне створення, що свідчить про успішне створення проєкту.

Тепер можна відкрити проєкт у VS Code, який було встановлено раніше.

У наступному розділі буде докладно розглянуто структуру папок і файлів, створених за допомогою Angular CLI, щоб зрозуміти, як організовано проєкт Angular і де розташовані основні частини вашого застосунку.