Перш ніж створювати сервіс, необхідно створити для нього папку. Виконайте наступну команду:

Ця команда створить папку services всередині src/app і одразу перейде до неї, щоб ви могли відразу почати працювати з вашими сервісами.

Створення сервісу

Angular надає зручну CLI-команду для швидкого створення сервісу, яка автоматично налаштовує необхідні файли та імпорти:

Після виконання цієї команди Angular створює два файли:

• task.service.ts — основний файл сервісу;

• task.service.spec.ts — файл для тестування (його можна видалити).

Ось початковий вміст файлу task.service.ts:

Декоратор @Injectable повідомляє Angular, що цей сервіс може бути впроваджений в інші класи.

Параметр providedIn: 'root' означає, що Angular автоматично зареєструє сервіс у кореневому модулі та створить його єдиний екземпляр для всього застосунку.

Компонент A, компонент B або будь-який інший компонент — усі вони отримають один і той самий екземпляр сервісу. Це дуже зручно, оскільки можна зберігати спільні дані (наприклад, список завдань) і уникати дублювання логіки.

Саме тому сервіс стає єдиним джерелом істини для певної частини логіки або даних вашого застосунку. Якщо цікаво, можна дізнатися більше про шаблон сінглтон у цій статті.

Додавання логіки до сервісу

Переходимо до створення логіки для вашого сервісу. Ось що він має виконувати:

• Зберігати список завдань;

• Повернути список завдань;

• Видаляти завдання;

• Змінювати статус виконання завдань.

Спочатку визначимо, як виглядає завдання, створивши інтерфейс TypeScript:

Цей інтерфейс чітко визначає структуру завдання — він містить id, заголовок і статус виконання. Ви ще не використовували інтерфейси, але додавання його тут робить код зрозумілішим і зручнішим для роботи.

Тепер створимо сервіс, який керує вашим списком завдань:

У цьому прикладі дані про завдання зберігаються безпосередньо в коді у приватному масиві tasks.

Щоб надати іншим частинам застосунку доступ до списку завдань, використовується метод getTasks(). Він повертає копію масиву за допомогою синтаксису розгортання ([...]), що допомагає захистити оригінальні дані від випадкових змін.

Метод deleteTask(id: number) видаляє завдання, відфільтровуючи елемент із відповідним ID та оновлюючи список.

Ще один важливий метод — toggleTaskStatus(id: number). Він знаходить завдання за його ID та змінює статус виконання: якщо завдання було позначене як виконане (true), воно стає невиконаним (false), і навпаки.

Цей сервіс тепер є основою, яка дозволяє вашим компонентам взаємодіяти зі списком завдань — без дублювання логіки.