Vytvorenie služby v Angular

Začnime štúdium služieb vytvorením vlastnej. Pre tento účel v priečinku test/src/app vytvoríme súbor data.service.ts. Nech naša služba zodpovedá za zobrazenie niektorých údajov na obrazovke.

Vytvorme triedu pre našu službu:

data.service.tsexport class DataService {
  
}

Teraz potrebujeme dekorátor Injectable. Jeho použitie umožní, aby bola trieda služby injektovateľná do triedy komponentu. O injektovaní si povieme v nasledujúcej lekcii. Teraz importujeme potrebný dekorátor:

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

export class DataService {
  
}

Aplikujme ho na našu triedu:

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

@Injectable()
export class DataService {
  
}

Teraz urobme tak, aby v našej triede boli nejaké údaje. V aplikáciách Angular zvyčajne prebieha načítavanie údajov zo servera, ale my na vzdelávacie účely budeme používať pole. Vytvorme ho v súkromnej vlastnosti:

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

Napíšme teraz metódu na získanie údajov:

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

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

Naša služba je pripravená. V nasledujúcej lekcii ju pripojíme do triedy komponentu.

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