Создание сервиса в Angular
Давайте начнем изучение сервисов с
создания своего собственного.
Для этого в папке test/src/app
сделаем файл data.service.ts.
Пусть наш сервис отвечает за вывод
некоторых данных на экран.
Сделаем класс для нашего сервиса:
export class DataService {
}
Теперь нам нужен декоратор Injectable.
Его применение позволит сделать так,
что класс сервиса можно будет внедрять
в класс компонента. О внедрении мы поговорим
на следующем уроке. А сейча импортируем
нужный декоратор:
import { Injectable } from '@angular/core';
export class DataService {
}
Применим его к нашему классу:
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
}
Теперь сделаем так, чтобы в нашем классе были некоторые данные. Обычно в приложениях Angular происходит загрузка данных с сервера, но мы в учебных целях будем использовать массив. Сделаем его в приватном свойстве:
export class DataService {
private data: string[] = ['a', 'b', 'c'];
}
Напишем теперь метод для получения данных:
export class DataService {
private data: string[] = ['a', 'b', 'c'];
getData(): string[] {
return this.data;
}
}
Наш сервис готов. В следующем уроке мы будем подключать его к классу компонента.
Создайте свой сервис, который будет отдавать массив объектов с товарами:
[
{
name: 'prod1',
cost: 100,
},
{
name: 'prod2',
cost: 200,
},
{
name: 'prod3',
cost: 300,
},
]