Angular'da Servis Kullanımı

Önceki derste kendi DataService servisimizi oluşturduk. Şimdi onu bileşene içe aktaralım:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // burada

@Component dekoratöründeki providers özelliğine servisimizi belirtmeliyiz:

@Component({
	.....
	providers: [ DataService ] // burada
})

Şimdi bağımlılık enjeksiyonu (dependency injection) adı verilen özel bir yaklaşım kullanacağız. Özü, bileşenin yapıcısına (constructor) servisimizi parametre olarak iletebileceğimiz ve otomatik olarak bileşenimizin özel özelliğine dahil olacağıdır. Koddaki gibi:

export class AppComponent {
	constructor(private dataService: DataService) { // bağımlılığı enjekte ediyoruz
		console.log(this.dataService); // servis özel özellikte
	}
}

Servisimiz için enjeksiyon çalışıyor, çünkü daha önce ona Injectable dekoratörünü uyguladık.

Şimdi bileşen sınıfının yapıcısında, ilgili metodu çağırarak servisimizden verileri alalım:

export class AppComponent {
	public data: string[] = [];
	
	constructor(private dataService: DataService) {
		this.data = this.dataService.getData();
	}
}

Şimdi alınan verileri bileşenin şablonunda (template) gösterelim:

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

Servisinizdeki ürünleri bileşende alın ve bileşen şablonunda gösterin.

Servisinizde yeni ürün eklemek için bir metod yapın. Bileşende, tıklandığında yeni bir ürün eklenecek bir buton yapın.

İki girdi (input) ve bir butondan oluşan bir form yapın, butona basıldığında yeni bir ürün eklensin.