@Injectable() in Angular

Evet, Angular 6 ve üzeri versiyonlarda, servislerin @Injectable() dekoratörüyle birlikte providedIn özelliği kullanılarak providers kısmına yazmadan da servisleri kullanabiliyorsunuz. Bu, Angular'ın dependency injection (bağımlılık enjeksiyonu) sisteminin bir parçasıdır ve servislerin uygulamanın genelinde ya da belirli modüllerde nasıl sağlanacağını kontrol eder.

@Injectable({ providedIn: 'root' }) Ne Anlama Gelir?

Angular'da servisler, modüller ve bileşenler arasındaki ortak işlevleri sağlamak için kullanılır. Bir servisin nerede kullanılacağını belirtmek için iki temel yol vardır:

1. @Injectable() ile providedIn kullanmak: Servisin hangi modülde veya kapsamda sağlanacağını belirtir.
2. Modülün providers kısmına servis eklemek: Bu eski yöntemdir ve genellikle hala geçerlidir, ancak Angular 6 ile birlikte providedIn özelliği daha yaygın hale geldi.

Örnek: providedIn: 'root'

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

@Injectable({
  providedIn: 'root'  // Bu servis uygulamanın kök seviyesinde (global) sağlanır.
})
export class UserService {
  constructor() { }
}

• providedIn: 'root': Bu özellik, Angular'a bu servisi uygulamanın genelinde sağlayacağını (singleton olarak) bildirir. Yani servis app.module.ts dosyasının providers kısmına eklenmesine gerek kalmaz.
• Bu sayede servis, uygulamanın herhangi bir bileşeninde veya başka bir serviste doğrudan constructor ile kullanılabilir.

Neden providers Alanına Eklemeye Gerek Yok?

Angular'ın yeni sürümleriyle birlikte providedIn ile servislerin uygulamanın global scope'unda veya belirli modüllerde sağlanmasını sağlıyoruz. Bu şu avantajları getirir:

1. Daha Basit ve Temiz Kod: providers kısmına eklemeye gerek kalmaz.
2. Ağaç Sallama (Tree Shaking): Eğer servis hiçbir yerde kullanılmazsa, Angular uygulamanın derlemesi sırasında bu servisi koddan kaldırabilir (daha küçük bundle boyutu).
3. Global veya Modül Bazında Sağlanabilirlik: providedIn ile servisin globalde mi yoksa sadece belirli bir modülde mi sağlanacağını belirleyebilirsiniz.

Eğer Modül Bazında Sağlamak İsterseniz:

@Injectable({
  providedIn: SomeModule  // Bu servis sadece SomeModule içinde kullanılabilir.
})
export class SomeService {
  constructor() { }
}

Bu durumda servis yalnızca SomeModule yüklendiğinde aktif hale gelir ve kullanılabilir.

Eski Yöntem: providers Kısmına Servis Ekleme

Eski Angular sürümlerinde veya bazı durumlarda, servisleri modülün providers kısmına ekleyerek kullanılabilir hale getirirdik. Örneğin:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserService } from './user.service';

@NgModule({
  imports: [CommonModule],
  providers: [UserService]  // Servis burada tanımlanır
})
export class UserModule { }

Ancak artık bu yönteme çoğunlukla gerek kalmamıştır, çünkü providedIn daha modern ve kullanışlı bir yaklaşımdır.

Özet:

• @Injectable({ providedIn: 'root' }) ile servisler global olarak sağlanır, bu nedenle providers kısmına eklemeye gerek kalmaz.
• Eğer servisi belirli bir modülde sağlamak isterseniz, providedIn parametresiyle modülü belirtebilirsiniz.
• Eski yöntem olan providers kısmına servis eklemek hala geçerli bir yöntemdir, ancak genellikle providedIn yaklaşımı tercih edilir çünkü daha basit ve verimlidir.