Креирање сервиса у 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,
  },
]