Ustvarjanje storitve v Angular

Začnimo preučevanje storitev z ustvarjanjem naše lastne. Za to v mapi test/src/app naredimo datoteko data.service.ts. Naj naša storitev odgovarja za prikaz nekaterih podatkov na zaslonu.

Naredimo razred za našo storitev:

data.service.tsexport class DataService {
  
}

Zdaj potrebujemo dekorator Injectable. Njegova uporaba bo omogočila, da lahko razred storitve vnamestimo v razred komponente. O vnamestitvi bomo govorili v naslednji lekciji. Zdaj pa uvozimo potrebni dekorator:

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

export class DataService {
  
}

Uporabimo ga za naš razred:

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

@Injectable()
export class DataService {
  
}

Zdaj naredimo tako, da so v našem razredu nekateri podatki. Običajno v aplikacijah Angular pride do nalaganja podatkov s strežnika, vendar bomo v učne namene uporabili matriko. Naredimo jo v zasebni lastnosti:

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

Zdaj napišimo metodo za pridobivanje podatkov:

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

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

Naša storitev je pripravljena. V naslednji lekciji jo bomo povezali z razredom komponente.

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