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

Розроблення фронтенду сайту на Angular

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

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

src/
├── app/
│   ├── core/              — singleton-сервіси, 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;
}

Впровадження залежностей

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 змінилась:', 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 },
];

Ліниве завантаження — loadChildren() завантажує feature chunk тільки при переході.

Angular Universal (SSR)

З Angular 17 — SSR вбудований через @angular/ssr:

ng add @angular/ssr

Гідратація — Angular 16+ підтримує повну гідратацію приложення без пересборки DOM.

Інструменти

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

Коли вибирати Angular

Angular виправданий для:

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

Терміни

Фронтенд на Angular для enterprise-приложення (10–20 екранів, NgRx, SSR): 1–2 місяці. Велике приложення з кількома модулями, micro-frontend архітектурою: 3–6 місяців.