Vytváření služby v Angular

Začněme studium služeb vytvořením vlastní. Pro tento účel ve složce test/src/app vytvoříme soubor data.service.ts. Nechť naše služba odpovídá za zobrazení některých dat na obrazovku.

Vytvořme třídu pro naši službu:

data.service.tsexport class DataService {
  
}

Nyní potřebujeme dekorátor Injectable. Jeho použití umožní, aby třída služby mohla být vložena do třídy komponenty. O vkládání si povíme v příští lekci. Nyní importujme požadovaný dekorátor:

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

export class DataService {
  
}

Aplikujme jej na naši třídu:

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

@Injectable()
export class DataService {
  
}

Nyní udělejme, aby v naší třídě byly některá data. Obvykle v aplikacích Angular dochází k načítání dat ze serveru, ale my pro výukové účely budeme používat pole. Vytvořme jej v privátní vlastnosti:

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

Nyní napišme metodu pro získání dat:

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

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

Naše služba je hotova. V příští lekci ji budeme připojovat ke třídě komponenty.

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