Angular Service Nedir?

Angular Service, Angular uygulamalarında kullanılan, belirli bir işlevi veya mantığı uygulayan bir sınıftır. Servisler, component’ler arasında veri paylaşmak, iş mantığını merkezileştirmek ve uygulamanın çeşitli parçaları arasında tekrarlanan kodları ortadan kaldırmak amacıyla kullanılır. Angular’da servisler, Dependency Injection (Bağımlılık Enjeksiyonu) mekanizması kullanılarak component’lere ve diğer servislere enjekte edilebilir.

Angular Service’in Özellikleri ve Kullanım Alanları

1. İş Mantığını Merkezileştirme: Servisler, iş mantığını bileşenlerden ayırarak kodun daha modüler ve tekrar kullanılabilir olmasını sağlar. Bu sayede aynı iş mantığı birden fazla bileşen tarafından kullanılabilir.
2. Veri Paylaşımı: Servisler, bileşenler arasında veri paylaşımını kolaylaştırır. Örneğin, kullanıcı verilerini veya uygulama durumunu yönetmek için bir servis kullanılabilir. Bunu “Angular Component’lerinin Haberleşmesi” adlı makaleden bakabilirsiniz.
3. HTTP İstekleri: Servisler, HTTP istekleri yaparak sunucu ile iletişimi sağlar. Angular’ın HtppClient modülü genellikle servislerde kullanılır.
4. Bağımlılık Yönetimi: Angular’da servisler, Dependency Injection (DI) kullanılarak yönetilir. Bu, servislerin component’lere ve diğer servislere kolayca enjekte edilmesini sağlar.

Angular Service Nasıl Oluşturulur?

Angular CLI kullanarak bir servis oluşturmak oldukça kolaydır. Aşağıdaki komut, “data” adında bir servis oluşturur:

ng generate service data

Bu komut, “data.service.ts” adında bir dosya oluşturur ve temel bir servis şablonu sağlar.

Aşağıda, kullanıcı verilerini yönetmek için basit bir Angular service örneği bulunmaktadır:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private data: any[] = [];

  constructor() { }

  setData(newData: any) {
    this.data.push(newData);
  }

  getData() {
    return this.data;
  }
}

@Injectable Dekoratörü

Angular servis, Aslında component ve directive gibi bir TypeScript sınıfıdır. Angular compiler üzerindeki “@Injectable” decorator’ü sayesinde servis olduğunu anlar. Bu decorator, Angular'ın Dependency Injection sistemi tarafından servis olarak tanınmasını sağlar. ProvidedIn: ’root’ ifadesi, servisin kök enjeksiyon sağlayıcısında (root injector) mevcut olmasını sağlar, bu da servisin tüm uygulama genelinde tekil (singleton) olacağı anlamına gelir.

Servisi kullanmak için, ilgili bileşene enjekte edilmesi gerekir. Aşağıda, “DataService” servisini bir bileşene nasıl enjekte edileceği ve kullanılacağı gösterilmektedir:

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="addData()">Add Data</button>
      <ul>
        <li *ngFor="let item of data">{{ item }}</li>
      </ul>
    </div>
  `,
})
export class AppComponent {
  data: any[] = [];

  // her component için aynı instance getirir.
  constructor(private dataService: DataService) {} 

  addData() {
    this.dataService.setData('New Data');
    this.data = this.dataService.getData();
  }
}

Fakat bir servis ProvidedIn: ’root’ ifadesi ile “root-injector” içerisine tanımlanmadıysa, kullanılacağı component’lerde “provider” edilmesi gerekir. Böylece her component için yeni bir instance üretilmiş olacaktır.

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="addData()">Add Data</button>
      <ul>
        <li *ngFor="let item of data">{{ item }}</li>
      </ul>
    </div>
  `,
providers:  [ DataService ] // providers'a eklenmiş
})
export class AppComponent {
  data: any[] = [];

  // bu component için yeni instance üretir.
  constructor(private dataService: DataService) {} 

  addData() {
    this.dataService.setData('New Data');
    this.data = this.dataService.getData();
  }
}

Angular servisleri, iş mantığını ve veri yönetimini component’lerden ayırarak uygulamanın daha modüler, bakımının kolay ve tekrar kullanılabilir olmasını sağlar. Servisler, Dependency Injection mekanizması ile kolayca yönetilebilir ve component’ler arasında veri paylaşımını sağlar. Bu, özellikle büyük ve karmaşık uygulamalarda kodun düzenli ve sürdürülebilir olmasına yardımcı olur.

Bir yazının daha sonuna geldik. Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular

Angular

Angular