Разработка фронтенда сайта на Angular

Разработка фронтенда сайта на Angular

Angular — полноценный front-end фреймворк от Google с жёсткими структурными конвенциями, встроенным DI-контейнером, RxJS для реактивности и TypeScript как языком по умолчанию. Сильные стороны Angular — enterprise-масштаб, строгая типизация, зрелая экосистема инструментов.

Архитектура Angular-приложения

src/
├── app/
│   ├── core/              — синглтон-сервисы, guards, interceptors
│   │   ├── auth/
│   │   └── http/
│   ├── shared/            — переиспользуемые компоненты и pipes
│   ├── features/          — feature-модули
│   │   ├── users/
│   │   │   ├── users.module.ts
│   │   │   ├── users.component.ts
│   │   │   └── users.service.ts
│   │   └── products/
│   └── app.routes.ts      — маршруты

Angular требует явной структуры модулей (или standalone компонентов в Angular 14+).

Standalone компоненты (Angular 14+)

Модули стали опциональными. Standalone компонент — самодостаточная единица:

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule, RouterLink, AsyncPipe],
  template: `
    <div class="card">
      <h3>{{ user.name }}</h3>
      <a [routerLink]="['/users', user.id]">Подробнее</a>
    </div>
  `,
})
export class UserCardComponent {
  @Input({ required: true }) user!: User;
}

Dependency Injection

DI — центральная концепция Angular:

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users').pipe(
      catchError(err => {
        console.error(err);
        return of([]);
      })
    );
  }
}

@Component({...})
export class UsersComponent {
  private userService = inject(UserService); // новый inject() стиль

  users$ = this.userService.getUsers();
}

RxJS и реактивность

Angular построен на RxJS. Типичные паттерны:

// HTTP + трансформация + кэш
users$ = this.http.get<User[]>('/api/users').pipe(
  map(users => users.filter(u => u.active)),
  shareReplay(1) // кэш последнего значения
);

// Поиск с debounce
searchControl = new FormControl('');
results$ = this.searchControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(query => this.searchService.search(query))
);

Signals (Angular 16+)

Новая система реактивности поверх RxJS:

import { signal, computed, effect } from '@angular/core';

count = signal(0);
doubled = computed(() => this.count() * 2);

increment() { this.count.update(c => c + 1); }

constructor() {
  effect(() => console.log('count changed:', this.count()));
}

Signals проще RxJS для простых случаев, RxJS остаётся для HTTP и сложных потоков.

Маршрутизация

export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'admin',
    canActivate: [AuthGuard],
    loadChildren: () => import('./features/admin/admin.routes').then(m => m.ADMIN_ROUTES)
  },
  { path: '**', component: NotFoundComponent },
];

Lazy loading — loadChildren() загружает feature chunk только при переходе.

Angular Universal (SSR)

С Angular 17 — SSR встроен через @angular/ssr:

ng add @angular/ssr

Hydration — Angular 16+ поддерживает full app hydration без пересборки DOM.

Инструменты

• Angular CLI — scaffolding, build, test, lint
• Angular DevTools — Chrome extension для дебага компонентов и CD
• NgRx — Redux-подобное состояние для сложных приложений
• Angular Material — официальная Material Design UI-библиотека

Когда выбирать Angular

Angular оправдан для:

• Большие команды (5+ разработчиков) — строгие конвенции уменьшают разногласия
• Enterprise-приложения с долгим жизненным циклом
• Проекты, где важна TypeScript-типизация на всех уровнях
• Команды, уже работающие с Angular

Сроки

Frontend на Angular для enterprise-приложения (10–20 экранов, NgRx, SSR): 1–2 месяца. Большое приложение с несколькими модулями, micro-frontend архитектурой: 3–6 месяцев.