Angular'da Servis Oluşturma

Servisleri incelemeye kendi servisimizi oluşturarak başlayalım. Bunun için test/src/app klasöründe data.service.ts dosyasını oluşturalım. Servisimizin ekrana bazı verileri yazdırmaktan sorumlu olmasına izin verin.

Servisimiz için bir sınıf oluşturalım:

data.service.tsexport class DataService {
  
}

Şimdi Injectable dekoratörüne ihtiyacımız var. Onun kullanımı, servis sınıfının bir bileşen sınıfına enjekte edilebilmesini sağlayacaktır. Enjeksiyonu bir sonraki derste konuşacağız. Şimdi gerekli dekoratörü içe aktaralım:

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

export class DataService {
  
}

Onu sınıfımıza uygulayalım:

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

@Injectable()
export class DataService {
  
}

Şimdi sınıfımızda bazı veriler olacak şekilde ayarlayalım. Genellikle Angular uygulamalarında sunucudan veri yüklemesi yapılır, ancak eğitim amaçlı biz bir dizi kullanacağız. Onu özel bir özellikte oluşturalım:

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

Şimdi verileri almak için bir metot yazalım:

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

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

Servisimiz hazır. Bir sonraki derste onu bileşen sınıfına bağlayacağız.

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