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

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

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору
Загрузка симулятора первой программы…

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

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

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

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

Обзор: Angular. Сравнение SPA-стеков: 27.md.

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

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


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>

Интерполяция &#123;&#123; title &#125;&#125; отображает значение переменной из класса. Директива [(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, который запускает интервал при инициализации компонента.

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

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

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

  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 на сервере.

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

Содержание
Освоение главы0%