Angular Prodiver

Photo by Cytonn Photography on Unsplash

Provider, Angular’da bir nesnenin başka bir nesne örneğini almasını sağlamak için kullanılan bir mekanizma olarak tanımlanabilir. Provider, Angular uygulamasının bir bileşenine, servise veya diğer bir nesneye nasıl erişebileceği veya bu nesnelerin oluşabileceği konusunda yönergeler içerir.

Provider, bir nesnenin hangi örneğinin kullanılacağını veya nasıl oluşturulacağını belirler. Örneğin, bir component içinde bir servisi kullanmak istiyorsanız, component içinde bir provider tanımlayarak servis nesnesinin nasıl oluşturulacağını belirleyebilirsiniz. Provider, Angular’da bir nesnenin bağımlılıklarını yönetmek için kullanılan bir mekanizmadır.

@Component({
  selector: 'app-root',
  template: `<h1>{{data}}</h1>`,
  providers: [MyService]
})

Bu component içinde, MyService nesnesi “providers” özelliği ile tanımlanmıştır. Bu component içinde kullanılabilir.

Angular’da provider çeşitleri:

1. Class provider: Bir sınıfın örneğini sağlar.
2. Value provider: Bir değer sağlar. Örneğin, bir sabit değer sağlamak için kullanılabilir.
3. Factory provider: Bir fonksiyon sağlar ve bu fonksiyon çağrıldığında bir nesne döndürür. Örneğin, dinamik bir nesne oluşturmak için kullanılabilir.
4. Existing provider: Başka bir yerde tanımlanmış bir nesnenin örneğini sağlar.
5. Aliased provider : Bir nesnenin farklı bir ad ile tanımlanmasını sağlar. Örneğin, bir nesnenin birden fazla ad ile erişilebilmesini sağlamak için kullanılabilir.

Ayrıca, Angular ile birlikte kullanılan @Injectable() decorator ile servislerin sağlandığını söylemekte fayda var.

Class Provider

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getData() {
    return 'Data from MyService';
  }
}

Bu örnekte, “MyService” adında bir sınıf tanımlanmıştır ve bu sınıf @Injectable() decorator ile işaretlenmiştir.

Component içinden erişim:

import { Component } from '@angular/core';
import { MyClass } from './my.class';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyClassProvider]
})
export class AppComponent {
  constructor(private myClass: MyClass) {
    this.myClass.getData();
  }
}

Value Provider

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

@Injectable({
  providedIn: 'root',
  useValue: 'Hello World'
})
export class MyValue {

}

Bu örnekte, “MyValue” adında bir sınıf tanımlanmıştır ve useValue özelliği ile “Hello World” değeri sağlanmıştır.

Component içinden erişim:

import { Component } from '@angular/core';
import { MyValue } from './my.value';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyValueProvider]
})
export class AppComponent {
  constructor(private myValue: MyValue) {}
  get value() { return this.myValue.value; }
}

Factory Provider

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

@Injectable()
export class MyValue {
  value = 'Hello World';
}

export function myFactory(myValue: MyValue) {
  return {
    getValue() {
      return myValue.value;
    }
  };
}

const MyFactoryProvider: FactoryProvider = {
  provide: 'MyFactory',
  useFactory: myFactory,
  deps: [MyValue]
};

Bu örnekte, “MyValue” adında bir sınıf tanımlanmıştır ve useFactory özelliği ile “myFactory” isimli bir fonksiyon sağlanmıştır. Bu fonksiyon çağrıldığında “MyValue” sınıfının bir örneği döndürür.

Component içinden erişim:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyFactoryProvider]
})
export class AppComponent {
  value: string;
  
  constructor(private myFactory: any) {}
  
  ngOnInit() {
    const myFactoryInstance = this.myFactory;
    this.value = myFactoryInstance.getValue();
  }
}

Existing Provider

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

@Injectable()
export class MyValue {
  value = 'Hello World';
}

Bu örnekte, “AppComponent” bileşeninde “MyService” sınıfının örneği “AnotherService” sınıfının örneği olarak kullanılmıştır.

Aliased Provider

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

@Injectable({
  providedIn: 'root',
  useValue: 'Hello World',
  multi: true
})
export class MyValue {

}

Component içerisinden erişim:

import { Component } from '@angular/core';
import { MyValue} from './my.value';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `
})
export class AppComponent {
  value: string;
  valueProvider: string;
  constructor(private myValue: MyValue) {
    this.value = myValue;
  }
}

Provider Kullanım Alanları

1. Servislerin ve bağımlılıkların yönetimi: Bir component, servis veya diğer nesnenin bağımlılıklarını yönetmek için kullanılabilir. Örneğin, bir component içinde bir servis kullanmak istiyorsanız, component içinde bir provider tanımlayarak servis nesnesinin nasıl oluşturulacağını belirleyebilirsiniz.
2. Değerlerin sağlanması: Sabit değerleri veya dinamik olarak oluşan değerleri sağlamak için kullanılabilir. Örneğin, bir component içinde bir sabit değer kullanmak istiyorsanız, component içinde bir value provider tanımlayabilirsiniz.
3. Test edilebilirlik: Nesneler arasındaki bağımlılıkları yönetmenizi ve test etmenizi kolaylaştırır. Örneğin, bir servis nesnesini test etmek istiyorsanız, servis nesnesinin örneğini test etmek istediğiniz component tarafından sağlanan bir provider ile değiştirebilirsiniz.
4. Dinamik nesne oluşturma: Dinamik nesneler oluşturmak için kullanılabilir. Örneğin, bir component içinde farklı bir nesnenin örneğini kullanmak istiyorsanız, component içinde bir factory provider tanımlayarak nesnenin nasıl oluşturulacağını belirleyebilirsiniz.
5. Farklı adlar ile erişim: Farklı adlar ile erişebilmek için kullanılabilir. Örneğin, bir component içinde bir servis nesnesini farklı adlar ile erişebilmek istiyorsanız, component içinde bir aliased provider tanımlayabilirsiniz.

SONUÇ

Angular’da provider’lar, uygulamanızda verilerinizi, servislerinizi ve diğer bağımlılıklarınızı yönetmenize yardımcı olur. Angular, bize çeşitli provider türleri sunarak, her bir ihtiyaca uygun bir yaklaşım sunmaktadır. Bu provider türleri arasında value, class, factory, existing ve aliased provider’lar yer almaktadır.

Value provider, sadece belirli bir değeri paylaşmak istediğimizde kullanılabilirken, class provider’lar, sınıfların instance’larını sağlamak için kullanılır. Factory provider’lar, daha fazla kontrol isteyen durumlarda kullanılırken, existing provider’lar ise zaten oluşturulmuş olan bir provider’ı yeniden kullanmak için kullanılabilir. Aliased provider’lar ise var olan bir provider’a daha kolay erişim sağlamak için kullanılabilir.

Provider’lar, Angular uygulamalarında bağımlılık yönetimini kolaylaştırır ve kodun daha okunaklı ve yeniden kullanılabilir olmasını sağlar. Provider’lar, Angular framework’ünün temel bileşenlerinden biridir.

Destek: Bana bir pizza ısmarlar mısın? :)