Что такое сервис в Angular?

В Angular сервис — это класс, который предоставляет определенную функциональность, которую можно использовать в разных частях приложения. Сервисы помогают организовать код, отделяя бизнес-логику от представления (компонентов). Это позволяет переиспользовать код и улучшает тестируемость приложения.

Зачем нужны сервисы?

Как создать сервис в Angular?

Для создания сервиса в Angular используют команду Angular CLI:

ng generate service имя-сервиса

Или сокращённо:

ng g s имя-сервиса

Этот процесс создаст два файла: имя-сервиса.service.ts и имя-сервиса.service.spec.ts (для тестирования).

Пример простого сервиса

Допустим, у нас есть сервис UserService, который управляет данными пользователей.

// user.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private users: string[] = ['Alice', 'Bob', 'Charlie'];

  constructor() { }

  getUsers(): string[] {
    return this.users;
  }

  addUser(user: string): void {
    this.users.push(user);
  }
}

Использование сервиса в компоненте

После создания сервиса его можно использовать в любом компоненте. Например, используем UserService в компоненте UserComponent.

// user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  template: `
    <h1>Users</h1>
    <ul>
      <li *ngFor="let user of users">{{ user }}</li>
    </ul>
    <input #newUser>
    <button (click)="addUser(newUser.value)">Add User</button>
  `
})
export class UserComponent implements OnInit {
  users: string[];

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.users = this.userService.getUsers();
  }

  addUser(user: string): void {
    this.userService.addUser(user);
    this.users = this.userService.getUsers(); // обновляем список пользователей
  }
}

Объяснение кода

• Мы создаем сервис UserService, который хранит массив пользователей и предоставляет методы для получения и добавления пользователей.
• В UserComponent мы инъектируем UserService через конструктор.
• При инициализации компонента мы вызываем getUsers(), чтобы получить список пользователей и отображаем его в шаблоне.
• При добавлении нового пользователя вызывается метод addUser() из сервиса, и обновляется список пользователей.

Заключение

Сервисы — это важная часть архитектуры Angular приложений, позволяющая организовать код, повысить его прозрачность и упростить тестирование. Понимание принципов работы сервисов поможет вам создавать более структурированные и поддерживаемые приложения.