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