Как организовать структуру Angular-приложения для реализации поиска с отправкой запросов на бэкенд?

Организация структуры Angular-приложения для поиска

Для реализации поиска с отправкой запросов на бэкенд в Angular используется модульная архитектура, где логика разделена между сервисами и компонентами. Основная идея — создать сервис, который инкапсулирует HTTP-запросы, и компонент, который управляет пользовательским вводом и отображением результатов.

Создание сервиса для HTTP-запросов

Сервис использует HttpClient для отправки GET-запросов с параметром поиска. Это позволяет централизовать логику работы с API и легко тестировать код.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SearchService {
  private apiUrl = 'https://api.example.com/search';

  constructor(private http: HttpClient) {}

  search(query: string): Observable<any[]> {
    return this.http.get<any[]>(`${this.apiUrl}?q=${query}`);
  }
}

Компонент с Reactive Forms и debounce

Компонент использует FormControl из ReactiveFormsModule для отслеживания ввода пользователя. С помощью оператора debounceTime из RxJS задерживается отправка запроса до тех пор, пока пользователь не перестанет печатать (например, на 300 мс). Это снижает нагрузку на сервер.

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, switchMap } from 'rxjs/operators';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search',
  template: `
    <input [formControl]="searchControl" placeholder="Поиск..." />
    <ul>
      <li *ngFor="let item of results$ | async">{{ item.name }}</li>
    </ul>
  `
})
export class SearchComponent implements OnInit {
  searchControl = new FormControl('');
  results$ = this.searchControl.valueChanges.pipe(
    debounceTime(300),
    switchMap(query => this.searchService.search(query))
  );

  constructor(private searchService: SearchService) {}

  ngOnInit(): void {}
}

Использование async pipe

В шаблоне используется async pipe для автоматической подписки на Observable results$ и отписки при уничтожении компонента. Это предотвращает утечки памяти.

Вывод

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