Створення Власного Сервісу в Angular
Перш ніж створювати сервіс, необхідно створити для нього папку. Виконайте наступну команду:
Ця команда створить папку services всередині src/app і одразу перейде до неї, щоб ви могли відразу почати працювати з вашими сервісами.
Створення сервісу
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()?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
What does the initial content of the generated service file look like?
Can you explain how to use the service in a component?
Why should I return a copy of the task list instead of the original array?
Awesome!
Completion rate improved to 3.13Створення Власного Сервісу в Angular
Свайпніть щоб показати меню
Перш ніж створювати сервіс, необхідно створити для нього папку. Виконайте наступну команду:
Ця команда створить папку services всередині src/app і одразу перейде до неї, щоб ви могли відразу почати працювати з вашими сервісами.
Створення сервісу
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()?
Дякуємо за ваш відгук!
