Angular-da Servis Yaradılması

Gəlin servisləri öyrənməyə özümüzünkünü yaratmaqla başlayaq. Bunun üçün test/src/app qovluğunda data.service.ts faylını edək. Qoy bizim servisimiz ekrana bəzi məlumatların çıxarılmasına cavabdeh olsun.

Servisimiz üçün sinif yaradaq:

data.service.tsexport class DataService {
  
}

İndi bizə Injectable dekoratoru lazımdır. Onun tətbiqi elə edəcək ki, servis sinfini komponent sinfinə yeridə etmək mümkün olsun. Yeridə etmə barədə növbəti dərsdə danışacağıq. İndi isə lazımlı dekoratoru import edək:

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

export class DataService {
  
}

Gəlin onu sinfimizə tətbiq edək:

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

@Injectable()
export class DataService {
  
}

İndi elə edək ki, sinfimizdə bəzi məlumatlar olsun. Adətən Angular proqramlarında məlumatlar serverdən yüklənir, amma biz tədris məqsədləri üçün massivdən istifadə edəcəyik. Onu xüsusi mülkiyyətdə edək:

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

İndi məlumatları almaq üçün metod yazaq:

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

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

Servisimiz hazırdır. Növbəti dərsdə biz onu komponent sinfinə qoşacağıq.

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