Angular-da servis döretmek

Servisleri öwrenmegi özümiziň servisimizi döretmekden başlalyň. Bunuň üçin test/src/app papkasyna data.service.ts faýlyny dözeris. Geliň, servisimiz ekrana käbir maglumatlary çykarmak üçin jogap bersin.

Servisimiz üçin klas dözeris:

data.service.tsexport class DataService {
  
}

Indi bizə Injectable dekoratory gerek. Ony ulanyp, servis klasyny komponent klasyna goşup boljak etmek mümkin. Goşmak hakda indiki sapakda gürrüň ederis. Häzir bolsa zerur dekoratory import edeliň:

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

export class DataService {
  
}

Ony klasymyza ulanyň:

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

@Injectable()
export class DataService {
  
}

Indi klasymyzda käbir maglumatlar bolsun. Köplenç Angular programmalary serwerden maglumat ýükläp alýar, ýöne okuw maksatlary üçin biz massiw ulanarys. Ony hususy aýratynlykda dözeris:

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

Indi maglumatlary almak üçin metot ýazalyň:

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

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

Servisimiz taýar. Indiki sapakda ony komponent klasyna birikdireris.

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