З порожньяй папкі до запускаемага прыгунку: настройка сучаснага проекту 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, тады кліентскі інструментарыя будзе адпаваляць версіі фрэймворку, якую вы плануеце выкарыстоўваць.

Калі адынсталяванне завершыцца, пераканайцеся ў яго:

ng version

Этот элемент выводзіць дакладную інфармацыю пра адынсталёваны кліентскі інструментарыя та супаўзвязаныя пакеты. Заўважыце, што каманда — не angular, а ng, яным ёсць выконвальны файл, які пакет кліентскага інструментарыя размешчае ў вашай стазі. Яго будзе трэба пісаць часта:

ng

Практычны парадокс: калі ўжо існуе проект, яго файл package.json таксама містіць локальную копію CLI, і запуск команды ng у папцы проекта викорыстоўвае гэтую локальную версію. Глобальная установка існуе галоўная метаю — ўмоżliвіць запуск команды 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 стварае стандальныя прыкладніцы і з самага пачатку дотрымліваецца новейшых, стыслейшых правілаў называння.

Гэта не значыць, што старэйшы код ўжо некоректны. Большасць працоўных аплікацыяй досэль карыстаюцца модулямі і дłuжэйшымі назвамі .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 і ведаць, дзе знаходзяцца яго ключовы элементы, што ёсьць аднай з базаў для глыбокага вучэння компанентав, шаблонаў і прыяўлення дадзеных.