Перейти к основному содержимому

Первая программа на Angular

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору

Play ITЗагрузка интерактивного демо…

Первая программа на Angular​

Где применяют Angular​

Angular — "полная платформа" от Google — TypeScript по умолчанию, CLI генерирует проект, компоненты + модули + сервисы + DI. Порог входа выше, чем у Vue или React, зато структура жёстко задана — удобно в больших командах.

Мы соберём счётчик в одном компоненте: класс .ts, шаблон .html, стили .css — классическая тройка Angular.

Обзор: Angular. Сравнение SPA-стеков: React - библиотека для пользовательских интерфейсов.

Как читать статью по шагам​

  1. Сначала создайте проект и поднимите ng serve.
  2. Затем пройдите блок "Компонент с логикой" и свяжите его с шаблоном.
  3. После этого подключите FormsModule и проверьте [(ngModel)].
  4. В конце возьмите один пункт из "Что попробовать" и расширьте пример.

Так проще закрепить материал на практике, чем читать всё подряд.

Что получится​

Проект ng new, dev-сервер на http://localhost:4200, интерактивный счётчик и поле имени.

Создание проекта​

Для начала работы требуется среда выполнения JavaScript — Node.js. Она обеспечивает возможность запуска инструментов сборки и управления зависимостями через пакетный менеджер npm.

Процесс инициализации нового проекта выполняется командой в терминале. Система автоматически создаст структуру папок, установит необходимые библиотеки Angular и настроит инструменты разработки. Рекомендуется использовать официальный инструмент Angular CLI для максимальной скорости работы.

npm install -g @angular/cli
ng new my-first-angular-app
cd my-first-angular-app
ng serve

Команда ng new запускает мастер настройки (Routing, SCSS, SSR). После создания проекта — см. блок выше (cd, ng serve). Приложение: http://localhost:4200.

Компонент с логикой​

Современный стандарт разработки в Angular использует компонентный подход. Компоненты являются основными строительными блоками приложения. Каждый компонент состоит из трех частей: класса TypeScript, шаблона HTML и стилей CSS.

Основная логика приложения находится в файле src/app/app.component.ts. Класс компонента импортирует аннотацию @Component из библиотеки Angular. Эта аннотация определяет путь к шаблону и стилям компонента.

Код ITЗагрузка примера кода…

Класс компонента содержит свойства состояния (count, name) и методы для их изменения. Свойства объявляются с указанием типов данных, что обеспечивает статическую типизацию и проверку ошибок на этапе компиляции. Методы изменяют состояние объекта this при вызове.

Шаблон компонента находится в файле src/app/app.component.html. Он описывает структуру пользовательского интерфейса с использованием расширенного синтаксиса Angular. Директивы связывают данные из класса с элементами DOM.

Код ITЗагрузка примера кода…

Интерполяция {{ title }} отображает значение переменной из класса. Директива [(ngModel)] создает двунаправленную связь между полем ввода и переменной name. При изменении текста в поле переменная обновляется мгновенно, и наоборот. Директива *ngIf управляет условным рендерингом: элемент отображается только если условие истинно.

Обработка событий происходит через атрибут (click), который вызывает метод компонента при клике. Значение события передается в функцию как аргумент.

Подключение модулей​

Для работы двухстороннего связывания необходимо подключить модуль FormsModule в корневом модуле приложения. Это делается в файле src/app/app.module.ts.

Код ITЗагрузка примера кода…

Аннотация @NgModule определяет конфигурацию модуля. Секция declarations содержит список компонентов, которые можно использовать внутри этого модуля. Секция imports включает другие модули, необходимые для работы приложения. Модуль FormsModule предоставляет директивы для работы с формами.

Стилизация интерфейса​

Внешний вид приложения задается файлом src/app/app.component.css. CSS правила определяют расположение, цвета, шрифты и поведение элементов при взаимодействии.

Код ITЗагрузка примера кода…

Правило .app центрирует контент и добавляет внутренние отступы. Блок приветствия имеет серый фон и скругленные углы. Поля ввода имеют фиксированный размер шрифта и рамку. Кнопки окрашены в фирменный красный цвет Angular, имеют плавный переход цвета и эффект масштабирования при наведении курсора.

Основные концепции приложения​

Приложение демонстрирует фундаментальные принципы работы Angular.

Компоненты — это основные блоки приложения, инкапсулирующие логику и представление. Каждый компонент имеет собственный класс, шаблон и стили. Компоненты могут быть вложены друг в друга для создания сложных интерфейсов.

Шаблоны — это декларативное описание структуры UI с использованием расширенного синтаксиса HTML. Директивы добавляют специфическое поведение элементам. Интерполяция позволяет вставлять данные непосредственно в разметку.

Двунаправленное связывание — удобная абстракция для форм. Директива ngModel объединяет работу свойств value и события input, избавляя разработчика от написания громоздкого кода для синхронизации данных.

Условный рендеринг позволяет показывать или скрывать элементы. Директива *ngIf удаляет элемент из DOM полностью, если условие ложно, что экономит ресурсы при работе с тяжелыми элементами.

Модульность организует код в логические группы. Модули содержат компоненты, директивы, сервисы и зависимости. Корневой модуль загружает приложение и подключает необходимые ресурсы.

Расширение функционала​

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

Добавление кнопки умножения счетчика на два требует объявления новой функции и подключения её к интерфейсу.

multiply(): void {
  this.count *= 2;
}

В шаблоне:

<button (click)="multiply()">×2</button>

Создание списка задач (Todo list) предполагает использование массива в качестве состояния. Элементы массива добавляются, удаляются и маркируются как выполненные.

Таймер реализуется с помощью хука жизненного цикла ngOnInit, который запускает интервал при инициализации компонента.

Калькулятор демонстрирует работу с несколькими переменными состояния и сложной логикой вычислений.

Пошаговый запуск​

Для успешного запуска приложения необходимо выполнить последовательность действий.

  1. Скачайте и установите Node.js с официального сайта nodejs.org.
  2. Установите CLI, создайте проект и перейдите в каталог:
npm install -g @angular/cli
ng new my-first-angular-app
cd my-first-angular-app
  1. Замените содержимое файла src/app/app.component.ts кодом примера.
  2. Замените содержимое файла src/app/app.component.html кодом примера.
  3. Замените содержимое файла src/app/app.component.css стилями из примера.
  4. Убедитесь, что файл src/app/app.module.ts содержит импорт FormsModule.
  5. Запустите локальный сервер:
ng serve

Браузер автоматически откроет страницу приложения. Любые изменения в коде сохраняются и мгновенно отображаются на странице благодаря системе горячей перезагрузки.

Частые ошибки​

СимптомПричина
NG8001 / unknown elementКомпонент не объявлен в declarations модуля (или standalone без imports)
Двусторонняя привязка не работаетНет FormsModule в imports
Шаблон не видит поле классаПоле не public (по умолчанию в TS — ок, но при private шаблон молчит)
ng serve не подхватывает правкиРедактировали не тот app.component.ts в src/app/

Что попробовать​

  1. Сервис CounterService с providedIn: 'root' — вынесите логику из компонента.
  2. ng generate component notes-list — второй компонент со списком.
  3. HttpClient + GET к локальному API — не забудьте HttpClientModule и CORS на сервере.

Связанные материалы​

В подборках​

Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:

Первые шаги (маршрут подборки) — Первая программа на Vue.js, Первая программа на Ext JS, Первая программа на React, Первая программа на Next.js, Первая программа на visual-basic, Первая программа на Django.

Содержание