Teenuse loomine Angularis

Alustame teenuste õppimist oma enda loomisega. Selleks kaustas test/src/app teeme faili data.service.ts. Olgu meie teenus vastutav mõnede andmete kuvamise eest ekraanile.

Teeme oma teenusele klassi:

data.service.tsexport class DataService {
  
}

Nüüd vajame dekoraatorit Injectable. Selle kasutamine võimaldab seda, et teenuseklassi saab süstida komponendi klassi. Süstimisest räägime järgmisel õppetunnil. Praegu impordime vajaliku dekoraatori:

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

export class DataService {
  
}

Rakendame seda oma klassile:

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

@Injectable()
export class DataService {
  
}

Teeme nüüd nii, et meie klassis oleks mõned andmed. Tavaliselt Angulari rakendustes laaditakse andmed serverist, kuid me õppe-eesmärkidel kasutame massiivi. Teeme selle privaatsesse omadusse:

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

Kirjutame nüüd meetodi andmete saamiseks:

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

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

Meie teenus on valmis. Järgmisel tunnil me ühendame selle komponendi klassiga.

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