Від порожньої папки до запущеного додатку: налаштування сучасного проекту Angular 22

Перш ніж ви зможете вивчити компоненти, шаблони, сервіси чи маршрутизацію в Angular, вам потрібен проєкт, який дійсно працюватиме на вашому комп’ютері. Для цього знадобиться кілька інструментів, команда для створення основи проєкту та структура папок, яка суттєво відрізняється від тієї, що показана у багатьох старіших посібниках. У цьому керівнику ми проведемо вас від чистого комп’ютера до запущеного додатку Angular 22, пояснимо функції кожного інструменту та покажемо, як генеровані елементи взаємопов’язані, щоб решта фреймворку мала куди інтегруватися.

Що вам потрібно перед початком

Локальна налаштування Angular ґрунтуються на чотирьох елементах: Node.js, Angular CLI, редакторі коду (Visual Studio Code є поширеним вибором) та терміналі. Немає потреби окремо встановлювати TypeScript; під час створення проєкту автоматично завантажуються Angular, TypeScript та всі інші необхідні пакети.

Сумісність версій має велике значення. На момент написання цього тексту довідник сумісності версій Angular вказує на Node.js v22.22.3 або новішу версію як мінімум для Angular 22, разом із новішими підтримуваними версіями. Ці діапазони змінюються між версіями Angular, тому перед встановленням чого-небудь перевірте актуальну таблицю сумісності на angular.dev.

Крок 1: встановіть Node.js та npm

Angular створює браузерні додатки, тож цілком логічно запитувати, чому потрібен серверний середовище виконання. Відповідь — це інструменти. Node.js дозволяє JavaScript виконуватися поза браузером, а Angular CLI, компілятор, сервер розробки та інструменти тестування — це всі програми на JavaScript, які потребують його. Node.js також постачається з npm, менеджером пакетів, який використовується Angular для встановлення залежностей вашого проекту.

Завантажте інсталятор з офіційного веб-сайту Node.js. Коли це завершиться, відкрийте термінал (або Command Prompt у Windows) та переконайтеся, що середовище виконання знаходиться у вашому шляху:

node --version

Результат має бути рядком з версією приблизно у такому форматі:

v22.22.3

Потім переконайтеся, що npm також доступний:

npm --version

Якщо обидві команди виводять номер версії, основа для роботи створена. Утримайтеся від бажання залишити будь-яку стару версію Node.js лише тому, що старий посібник працював з нею. Кожна основна версія Angular має свій діапазон підтримуваних версій Node.js, і невідповідність зазвичай проявляється у заплутаних помилках під час інсталяції або збірки, а не у чіткому повідомленні. Інструменти на кшталт nvm чи fnm полегшують зміну версій Node.js для кожного проекту, якщо їх потрібно кілька.

Крок 2: зрозуміти, що робить Angular CLI

Наступним інструментом є Angular CLI (інтерфейс командного рядка). Це основний спосіб створення та керування Angular-додатками: він створює схему нових проектів, генерує компоненти та сервіси, запускає сервер розробки, створює версії для продакшну, виконує тести та виконує багато інших рутинних завдань. Замість того, щоб вручну писати десятки файлів та налаштовувати конфігурацію збірки самостійно, ви дозволяєте CLI створити готову, стандартну вихідну точку, а потім розвивати її далі.

Крок 3: встановити Angular CLI глобально

Встановіть CLI за допомогою npm:

npm install -g @angular/cli@22

Кожна частина команди виконує певну функцію. npm install встановлює пакет. Прапорець -g забезпечує його глобальну установку, що дозволяє використовувати команду з будь-якої папки, а не лише всередині одного проекту. Суфікс @22 фіксує установку на основну версію Angular 22, тож ви отримуєте CLI, яка відповідає версії фреймворку, яку плануєте використовувати.

Після завершення встановлення перевірте його:

ng version

Це виводить деталі про встановлений CLI та пов’язані пакети. Зверніть увагу, що команда — це не angular, а ng, виконуваний файл, який пакет CLI додає до вашого шляху. Ви будете постійно вводити саме цю команду:

ng

Практична примітка: як тільки проект створений, його файл package.json також містить локальну копію CLI, і виконання команди ng у папці проекту використовує саме цю локальну версію. Глобальна установка існує переважно для того, щоб можна було виконати команду ng new ще до створення будь-якого проекту.

Крок 4: створення першого додатку

Перейдіть у папку, де зберігаються ваші проекти, наприклад:

cd Desktop

Потім попросіть CLI створити новий додаток:

ng new my-first-angular-app

Останній аргумент, my-first-angular-app, стає назвою проекту та папки; підійде будь-яка дійсна назва. Команда ng new є інтерактивною, тому вона може поставити кілька запитань щодо налаштування проекту, наприклад, який формат таблиці стилів використовувати. Точні запитання змінюються з розвитком Angular, тож не дивуйтесь, якщо ваші відрізнятимуться від тих, що показані на скріншотах чи у старих посібниках.

Для першого проекту розумним вибором буде використання рекомендованих значень за замовчуванням. Ці значення створюють додаток на основі standalone API та використовують коротшу, сучасну конвенцію найменування файлів, яку ви скоро побачите. Після завершення команди з’являється нова папка:

my-first-angular-app/

Увійдіть до неї:

cd my-first-angular-app

Крок 5: ознайомлення з створеними файлами

Відкрийте цю папку у своєму редакторі. Новостворений проект виглядає приблизно так:

my-first-angular-app/
│
├── .vscode/
│
├── node_modules/
│
├── public/
│
├── src/
│   ├── app/
│   │   ├── app.ts
│   │   ├── app.html
│   │   ├── app.css
│   │   └── app.spec.ts
│   │
│   ├── index.html
│   ├── main.ts
│   └── styles.css
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

Коротке ознайомлення з найважливішими елементами:

• src/main.ts — це точка входу, яка запускає додаток.
• src/index.html — це єдина HTML-сторінка, яку завантажує браузер; Angular відображає свій контент у ній.
• src/styles.css — містить глобальні стилі, які застосовуються до всього додатку.

src/app/ містить кореневий компонент, розділений на app.ts (клас TypeScript), app.html (його шаблон), app.css (стилі, прив’язані до цього компонента) та app.spec.ts (його модульний тест).

public/ містить статичні ресурси, які подаються без змін.

angular.json налаштовує процес будування, подачі та тестування проекту за допомогою CLI.

package.json містить список залежностей та скриптів npm; node_modules/ — це місце, де npm їх встановив.

tsconfig.json налаштовує компілятор TypeScript.

Вам ще не потрібно розуміти кожен файл. Достатньо знати, де знаходяться точка входу, кореневий компонент та конфігурація, щоб розпочати роботу.

Крок 6: запустити сервер розробки

Зсередини папки проекту запустіть додаток:

ng serve

CLI компілює додаток та запускає локальний сервер розробки. Він також стежить за вихідними файлами та перекомпілює їх щоразу, коли вони змінюються. Коли процес компіляції завершиться, ви побачите результат схожий на такий:

Application bundle generation complete.
Local: http://localhost:4200/

Відкрийте цю адресу у своєму браузері:

http://localhost:4200

Має з’явитися сторінка-стартовий екран за замовчуванням. Якщо ви не хочете щоразу вводити URL, додайте прапорець --open, і CLI автоматично запустить ваш стандартний браузер:

ng serve --open

Якщо порт 4200 вже зайнятий іншим процесом, ви можете обрати інший порт за допомогою опції --port.

Крок 7: внесіть зміни та спостерігайте за їх перекомпіляцією

Щоб довести, що весь цикл працює, відредагуйте шаблон кореневого компонента:

src/app/app.html

Замініть усе в цьому файлі на короткий фрагмент маркування:

<h1>Hello Angular 22!</h1>
<p>
  My first Angular application is running successfully.
</p>

Збережіть зміни, а потім поверніться до браузера. Сторінка оновлюється автоматично. Оскільки сервер розробки стежить за вашими файлами та перебудовує їх при змінах, звичайні правки коду ніколи не вимагають зупинки та перезапуску ng serve. Зміни у конфігураційних файлах, таких як angular.json, є винятком та зазвичай потребують перезапуску.

Відображення значень з класу компонента

Статичний маркап — це лише половина справи. Далі розширте шаблон так, щоб він також відображав значення, які надходять з компонента. Подвійні фігурні дужки є місцями для заміни, які Angular заповнює даними з класу:

<div class="container">
<h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <h1>Hello Angular 22!</h1>
  <p>
    My first Angular application is running successfully.
  </p>
</div>

Щоб ці місця заміни були заповнені, клас компонента в app.ts має мати відповідні властивості. Декоратор @Component повідомляє Angular, що цей клас є компонентом, у який він буде відображатися (app-root — елемент, який вже є у index.html), а також вказує місце розташування його шаблону та стилів:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular 22 App';
  message = 'Angular project is running successfully!';
}

Після збереження обох файлів на сторінці вище статичного контенту відображається заголовок та повідомлення з класу. Залежно від конкретної версії CLI, створений app.ts може виглядати трохи інакше (новіші шаблони іноді використовують сигнали для заголовка), але звичайна властивість класу працює так само для навчальних цілей. Якщо ви хочете експериментувати перед встановленням чого-небудь, версія цього прикладу у StackBlitz працює повністю в браузері.

Як елементи пов’язуються під час запуску

Коли додаток працює, корисно побачити шлях від браузера до вашого шаблону:

Browser
                   │
                   ▼
              index.html
                   │
                   ▼
                main.ts
                   │
                   ▼
              App Component
                   │
          ┌────────┴────────┐
          ▼                 ▼
       app.html          app.css
       (HTML)             (CSS)

Браузер завантажує index.html. Збірні скрипти запускають main.ts, вхідну точку додатку, яка ініціалізує кореневий компонент. Цей компонент поєднує свій клас із HTML-шаблоном та стилями, відображає їх у елементі app-root, і з того моменту Angular підтримує синхронність користувацького інтерфейсу під час зміни даних компонента. Цей опис навмисно спрощений, але він допомагає сформувати уявлення, до якого можна буде додавати подальші теми.

Мінімальний приклад прив’язки даних

Ось найменша корисна версія цієї ідеї. Клас компонента визначає одну властивість:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  title = 'My First Angular App';
}

а шаблон посилається на неї:

<h1>{{ title }}</h1>
<p>
  Welcome to my Angular 22 journey!
</p>

Два рядки описують всю концепцію. У класі TypeScript є присвоєння властивості:

title = 'My First Angular App';

а у шаблоні є вираз інтерполяції:

{{ title }}

Angular читає значення з класу та вставляє його у отриманий HTML. Це інтерполяція — найпростіша форма зв’язку даних у Angular. Якщо пізніше ви зміните title у відповідь на введення користувача чи дані з сервера, Angular оновить сторінку за вас. Зв’язок властивостей, зв’язок подій та двонапрямковий зв’язок ґрунтуються на тому самому принципі та заслуговують окремого детального розгляду.

Чому старіші навчальні матеріали виглядають інакше

Якщо шукати навчальні матеріали з Angular, ви швидко знайдете проекти з іншим форматом. Старіші посібники зазвичай показують такі файли:

app.component.ts
app.component.html
app.component.css
app.module.ts

тоді як проект, створений сучасним CLI, містить:

app.ts
app.html
app.css

І часто взагалі немає app.module.ts. Фреймворк суттєво змінився протягом років. Сучасний Angular за замовчуванням використовує автономні API: компоненти безпосередньо вказують свої власні залежності, тому новим додаткам рідко потрібен NgModule для їх групування. Текущий CLI створює автономні додатки та з самого початку дотримується новіших, коротших конвенцій найменування.

Це не робить старіший код неправильним. Багато продакшн-застосунків досі використовують модулі та довші назви у форматі .component.ts, причому обидва стилі підтримуються. Але під час навчання поєднання цих двох підходів є поширеною причиною плутанини. Якщо у навчальному посібнику пропонують відредагувати файл app.module.ts, а у вашому проєкті його немає, це означає, що ви працюєте за старішим стилем, і вам слід шукати еквівалентний окремий файл замість того, щоб створювати його вручну.

Підсумок

Angular CLI перетворює налаштування проєкту на коротку та повторювану процедуру. Як тільки ви це зробите один раз, весь процес виглядатиме так:

• Встановіть версію Node.js, яку підтримує ваш Angular, та перевірте наявність node та npm.
• Встановіть CLI за допомогою команди npm install -g @angular/cli@22 та підтвердіть встановлення за допомогою ng version.

Створіть проект за допомогою ng new, використовуючи стандартні налаштування для першого додатку.

Ознайомтесь з файлами main.ts, index.html, файлами серії app.*, angular.json та package.json.

Запустіть ng serve (за бажанням з параметром --open) та користуйтесь автоматичним перебудовуванням під час редагування.

Розглядайте навчальні матеріали, засновані на NgModule та у форматі .component.ts, як більш старий підхід, та перекладайте їх у формат самостійних API.

Вам не потрібно розуміти кожен створений файл вже з першого дня. Важливо, щоб у вас був функціональний проект Angular 22 та знання про місцезнаходження його основних елементів, що є основою для глибокого вивчення компонентів, шаблонів та прив’язки даних.