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

В РАЗРАБОТКЕНЕ ДЛЯ НОВИЧКОВНЕ ОБЯЗАТЕЛЬНО

Разработчику Архитектору

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

Angular представляет собой полноценную платформу для разработки клиентских веб-приложений, созданную компанией Google. Платформа объединяет инструменты для построения структуры приложения, управления состоянием данных и взаимодействия с пользователем в единый экосистемный продукт. Создание первой программы позволяет познакомиться с ключевыми концепциями: модулями, компонентами, шаблонами, директивами и реактивностью. В данном материале рассматривается создание приложения «Счетчик», демонстрирующее подход с использованием современных инструментов CLI и архитектуры компонентов.

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

Для начала работы требуется среда выполнения 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. Эта аннотация определяет путь к шаблону и стилям компонента.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Моя первая программа на Angular';
  
  // Состояние для счетчика
  count: number = 0;
  
  // Состояние для текста ввода
  name: string = '';

  // Функции для работы со счетчиком
  increment(): void {
    this.count++;
  }

  decrement(): void {
    this.count--;
  }

  reset(): void {
    this.count = 0;
  }

  // Обработчик ввода имени
  onNameChange(event: Event): void {
    const target = event.target as HTMLInputElement;
    this.name = target.value;
  }
}

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

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

<div class="app">
  <h1>{{ title }}</h1>
  
  <!-- Блок с приветствием -->
  <div class="greeting">
    <input 
      type="text" 
      placeholder="Введите ваше имя" 
      [(ngModel)]="name"
    />
    <h2 *ngIf="name">Привет, {{ name }}! 👋</h2>
  </div>

  <!-- Блок со счетчиком -->
  <div class="counter">
    <h2>Счетчик: {{ count }}</h2>
    <div class="buttons">
      <button (click)="decrement()">-</button>
      <button (click)="reset()">Сброс</button>
      <button (click)="increment()">+</button>
    </div>
  </div>
</div>

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

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

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

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

.app {
  text-align: center;
  padding: 40px;
  font-family: Arial, sans-serif;
}

.greeting {
  margin: 30px 0;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  margin: 0 5px;
  padding: 10px 20px;
  font-size: 16px;
  background: #c71d23; /* Фирменный красный цвет Angular */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #a0181c;
  transform: scale(1.05);
}

.counter {
  margin: 30px 0;
  padding: 20px;
  background: #e8f4f8;
  border-radius: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

В шаблоне:

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

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

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

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

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

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

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

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