От пустой папки к работающему приложению: настройка современного проекта Angular 22

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

Что вам нужно перед началом

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

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

Шаг 1: установка Node.js и npm

Angular предназначен для создания веб-приложений, поэтому возникает вопрос: зачем нужен серверный движок. Ответ кроется в инструментах. Node.js позволяет JavaScript выполняться вне браузера, а Angular CLI, компилятор, сервер разработки и инструменты тестирования — это все программы на JavaScript, которые от него зависят. Кроме того, Node.js включает в себя npm — менеджер пакетов, который используется Angular для установки зависимостей проекта.

Скачайте установщик с официального сайта Node.js. После завершения скачивания откройте терминал (или командную строку в 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, поэтому не удивляйтесь, если ваши вопросы будут отличаться от тех, что показаны на скриншотах или в более старых руководствах.

Для первого проекта разумным решением будет использование рекомендуемых значений по умолчанию. Текущие настройки по умолчанию генерируют приложение на основе автономного 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 и знать, где находятся его основные компоненты, что является основой для глубокого изучения компонентов, шаблонов и связывания данных.