Создание сервиса в Angular

Давайте начнем изучение сервисов с создания своего собственного. Для этого в папке test/src/app сделаем файл data.service.ts. Пусть наш сервис отвечает за вывод некоторых данных на экран.

Сделаем класс для нашего сервиса:

data.service.tsexport class DataService {
  
}

Теперь нам нужен декоратор Injectable. Его применение позволит сделать так, что класс сервиса можно будет внедрять в класс компонента. О внедрении мы поговорим на следующем уроке. А сейча импортируем нужный декоратор:

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

Применим его к нашему классу:

data.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  
}

Теперь сделаем так, чтобы в нашем классе были некоторые данные. Обычно в приложениях Angular происходит загрузка данных с сервера, но мы в учебных целях будем использовать массив. Сделаем его в приватном свойстве:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];
}

Напишем теперь метод для получения данных:

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];

  getData(): string[] {
    return this.data;
  }
}

Наш сервис готов. В следующем уроке мы будем подключать его к классу компонента.

typescript[
  {
    name: 'prod1',
    cost: 100,
  },
  {
    name: 'prod2',
    cost: 200,
  },
  {
    name: 'prod3',
    cost: 300,
  },
]