Създаване на услуга в 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,
  },
]