Створення Власного Сервісу в Angular
Створення сервісу
Angular надає зручну CLI-команду для швидкого створення сервісу, яка автоматично генерує необхідні файли та імпорти:
Після виконання цієї команди Angular створює два файли:
-
task.service.ts— основний файл сервісу; -
task.service.spec.ts— файл для тестування (можна видалити).
Ось початковий вміст task.service.ts:
task-service.ts
@Injectable декоратор повідомляє Angular, що цей сервіс може бути впроваджений в інші класи.
Частина providedIn: 'root' означає, що Angular автоматично зареєструє сервіс у кореневому модулі та створить єдиний екземпляр для всього застосунку.
Сінглтон — це шаблон проєктування, який гарантує, що клас має лише один екземпляр і забезпечує глобальну точку доступу до нього.
Компонент A, компонент B або будь-який інший компонент — усі вони отримають один і той самий екземпляр сервісу. Це дуже зручно, оскільки можна зберігати спільні дані (наприклад, список завдань) і уникати дублювання логіки.
Саме тому сервіс стає єдиним джерелом істини для певної частини логіки або даних вашого застосунку. Якщо цікаво, можна дізнатися більше про шаблон сінглтон у цій статті.
Додавання логіки до сервісу
Переходимо до створення логіки для вашого сервісу. Ось що він має виконувати:
-
Зберігати список завдань;
-
Повернути список завдань;
-
Видаляти завдання;
-
Змінювати статус виконання завдань.
Спочатку визначимо, як виглядає завдання, створивши інтерфейс TypeScript:
task-interface.ts
Цей інтерфейс чітко визначає структуру завдання — він містить id, назву та статус виконання. Ви ще не використовували інтерфейси раніше, але додавання його тут робить код зрозумілішим і зручнішим для роботи.
Тепер створимо сервіс, який керує вашим списком завдань:
task-service.ts
У цьому прикладі дані про завдання зберігаються безпосередньо в коді у приватному масиві tasks.
Щоб надати іншим частинам застосунку доступ до списку завдань, використовується метод getTasks(). Він повертає копію масиву за допомогою синтаксису розгортання ([...]), що допомагає захистити оригінальні дані від випадкових змін.
Метод deleteTask(id: number) видаляє завдання, відфільтровуючи те, яке має відповідний ID, та оновлює список.
Ще один важливий метод — toggleTaskStatus(id: number). Він знаходить завдання за його ID та перемикає статус виконання — якщо завдання було позначене як виконане (true), воно стає невиконаним (false), і навпаки.
Ви можете впізнати багато цієї логіки зі свого TaskListComponent. Тепер усе це перенесено до TaskService, що допомагає зробити компоненти чистішими та зберігати логіку в одному місці.
Ця служба тепер є основою, яка дозволяє вашим компонентам взаємодіяти зі списком завдань — без дублювання логіки.
1. Чому створюють службу в Angular?
2. Що означає providedIn: 'root' у декораторі @Injectable?
3. Чому у методі [...this.tasks] повертається this.tasks, а не просто getTasks()?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain how to use this service inside a component?
What does the task interface look like in code?
Why is it important to return a copy of the tasks array instead of the original?
Awesome!
Completion rate improved to 3.13Створення Власного Сервісу в Angular
Свайпніть щоб показати меню
Створення сервісу
Angular надає зручну CLI-команду для швидкого створення сервісу, яка автоматично генерує необхідні файли та імпорти:
Після виконання цієї команди Angular створює два файли:
-
task.service.ts— основний файл сервісу; -
task.service.spec.ts— файл для тестування (можна видалити).
Ось початковий вміст task.service.ts:
task-service.ts
@Injectable декоратор повідомляє Angular, що цей сервіс може бути впроваджений в інші класи.
Частина providedIn: 'root' означає, що Angular автоматично зареєструє сервіс у кореневому модулі та створить єдиний екземпляр для всього застосунку.
Сінглтон — це шаблон проєктування, який гарантує, що клас має лише один екземпляр і забезпечує глобальну точку доступу до нього.
Компонент A, компонент B або будь-який інший компонент — усі вони отримають один і той самий екземпляр сервісу. Це дуже зручно, оскільки можна зберігати спільні дані (наприклад, список завдань) і уникати дублювання логіки.
Саме тому сервіс стає єдиним джерелом істини для певної частини логіки або даних вашого застосунку. Якщо цікаво, можна дізнатися більше про шаблон сінглтон у цій статті.
Додавання логіки до сервісу
Переходимо до створення логіки для вашого сервісу. Ось що він має виконувати:
-
Зберігати список завдань;
-
Повернути список завдань;
-
Видаляти завдання;
-
Змінювати статус виконання завдань.
Спочатку визначимо, як виглядає завдання, створивши інтерфейс TypeScript:
task-interface.ts
Цей інтерфейс чітко визначає структуру завдання — він містить id, назву та статус виконання. Ви ще не використовували інтерфейси раніше, але додавання його тут робить код зрозумілішим і зручнішим для роботи.
Тепер створимо сервіс, який керує вашим списком завдань:
task-service.ts
У цьому прикладі дані про завдання зберігаються безпосередньо в коді у приватному масиві tasks.
Щоб надати іншим частинам застосунку доступ до списку завдань, використовується метод getTasks(). Він повертає копію масиву за допомогою синтаксису розгортання ([...]), що допомагає захистити оригінальні дані від випадкових змін.
Метод deleteTask(id: number) видаляє завдання, відфільтровуючи те, яке має відповідний ID, та оновлює список.
Ще один важливий метод — toggleTaskStatus(id: number). Він знаходить завдання за його ID та перемикає статус виконання — якщо завдання було позначене як виконане (true), воно стає невиконаним (false), і навпаки.
Ви можете впізнати багато цієї логіки зі свого TaskListComponent. Тепер усе це перенесено до TaskService, що допомагає зробити компоненти чистішими та зберігати логіку в одному місці.
Ця служба тепер є основою, яка дозволяє вашим компонентам взаємодіяти зі списком завдань — без дублювання логіки.
1. Чому створюють службу в Angular?
2. Що означає providedIn: 'root' у декораторі @Injectable?
3. Чому у методі [...this.tasks] повертається this.tasks, а не просто getTasks()?
Дякуємо за ваш відгук!
