Angular'da Servis Kullanımı

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

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

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

app/app.component.ts@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:

app/app.component.tsexport 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:

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

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

app/app.component.html<ol>
  <li *ngFor="elem of data">
    {{ elem }}
  </li>
</ol>