Тепер, коли всі необхідні інструменти, включаючи 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 запропонує відповісти на декілька питань щодо налаштування:

• Would you like to add Angular routing? – це буде розглянуто пізніше, тому наразі оберіть Yes;

• Which stylesheet format would you like to use? – це визначає тип таблиць стилів для вашого проєкту. Рекомендується обрати CSS, але можна вибрати будь-який зручний для вас варіант.

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

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

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

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