Angular-da servis yaratish

Keling, servislarni o'rganishni o'zimizning servisimizni yaratishdan boshlaymiz. Buning uchun test/src/app papkasida data.service.ts faylini yaratamiz. Bizning servisimiz ekranga ma'lum ma'lumotlarni chiqarish uchun javobgar bo'lsin.

Bizning servisimiz uchun klass yaratamiz:

data.service.tsexport class DataService {
  
}

Endi bizga Injectable dekoratori kerak. Uni qo'llash servis klassini komponent klassiga kirita olish imkonini beradi. Biz kirish haqida keyingi darsda gaplashamiz. Hozir esa kerakli dekoratorni import qilamiz:

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

export class DataService {
  
}

Keling, uni bizning klassimizga qo'llaymiz:

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

@Injectable()
export class DataService {
  
}

Endi bizning klassimizda ma'lum ma'lumotlar bo'lishi uchun qilaylik. Odatda Angular ilovalarida ma'lumotlar serverdan yuklanadi, lekin biz o'quv maqsadlarida massivdan foydalanamiz. Keling, uni xususiy xususiyatda yaratamiz:

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

Endi ma'lumotlarni olish uchun metod yozamiz:

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

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

Bizning servisimiz tayyor. Keyingi darsda biz uni komponent klassiga ulaymiz.

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