Что такое Angular: обзор с примерами
Angular — это мощный фреймворк с открытым исходным кодом, разработанный Google для создания масштабируемых и динамичных веб-приложений. Основанный на языке TypeScript, Angular предлагает широкие возможности для построения модульной архитектуры, эффективного управления состоянием и взаимодействия с пользователем.
Основные характеристики Angular
1. Компонентная архитектура
Приложения в Angular строятся из компонентов — независимых блоков, отвечающих за определённую часть интерфейса. Каждый компонент включает шаблон HTML, классы TypeScript и связанные стили.
Пример простого компонента:
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>Добро пожаловать в Angular</h1>`,
})
export class AppComponent {}
Этот компонент отображает заголовок и используется в HTML как <app-root></app-root>.
2. Двусторонняя привязка данных (Two-way data binding)
Angular позволяет легко синхронизировать данные между моделью (кодом) и представлением (шаблоном).
Пример:
<!-- app.component.html -->
<input [(ngModel)]="username" placeholder="Введите имя" />
<p>Привет, {{ username }}!</p>
// app.component.ts
export class AppComponent {
username = '';
}
Изменения в поле ввода сразу отображаются в тексте ниже, и наоборот.
3. Маршрутизация (Router)
Angular Router позволяет переключаться между различными представлениями без перезагрузки страницы.
Пример настройки маршрутов:
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Переход к localhost:4200/about отобразит компонент AboutComponent.
4. Сервисы и внедрение зависимостей (Dependency Injection)
Сервисы позволяют отделить бизнес-логику от компонентов и обеспечивают переиспользуемость кода.
Пример сервиса:
// user.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
getUserName() {
return 'Иван';
}
}
Использование в компоненте:
// app.component.ts
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-root',
template: `<p>Пользователь: {{ name }}</p>`,
})
export class AppComponent {
name: string;
constructor(private userService: UserService) {
this.name = this.userService.getUserName();
}
}
5. Формы и валидация
Angular поддерживает как шаблонные, так и реактивные формы, включая встроенную валидацию.
Пример шаблонной формы:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<input name="email" ngModel required email />
<button type="submit" [disabled]="form.invalid">Отправить</button>
</form>
Преимущества использования Angular
Angular — это надёжный инструмент для разработки сложных веб-приложений с чистой архитектурой и гибкими возможностями. Благодаря компонентной структуре, мощной системе маршрутизации, поддержке реактивного программирования и встроенной валидации форм, Angular является одним из ведущих фреймворков в современном веб-разработке.
