Angular 4 İle Providers İle Singleton İnstance Yaratmak

Merhaba,

Angular 4 uygulamalarında yapının genel ya da özel olarak kullanacağı bir nesneyi providers özelliğini kullanarak yaratmamız ve tutmamız bizim için performans ve maliyet açısından oldukça önem arz etmektedir. Şimdi bu konuyu örnek bir senaryo üzerinden ele alacak, açacak ve kullanımını ve ihtiyacını teorik ve pratik olarak netleştireceğiz.

İlk olarak “ornek” adında bir component oluşturalım ve “ornek.component.ts” dosyasını açıp içeriğini aşağıdaki gibi şekillendirelim.

import { Component, OnInit } from '@angular/core';
import { Personel } from '../entitys/personel';
@Component({
  selector: 'app-ornek',
  templateUrl: './ornek.component.html',
  styleUrls: ['./ornek.component.css']
})
export class OrnekComponent implements OnInit {
  _personel: Personel;
  constructor(private personel: Personel) { }
  ngOnInit() {
    this.personel.Adi = "Gençay";
    this.personel.SoyAdi = "Yıldız";
    this._personel = this.personel;
  }
}

Dikkat ederseniz eğer, “ornek” componentimiz “Personel” tipinde bir sınıfı dinlemektedir. Bu component çalıştırılacağı zaman constructerında dinlediği bu “Personel” nesnesi bir yerde oluşturulmuş olmalıdır.

Eğer ki mevcut durumda projeyi kaydedip, yayınlarsak tarayıcıda hiçbir sonuç alamayacağız ve hatta sayfaya sağ tıklayarak “İncele” menüsüne tıkladığınız zaman çıkan pencerede “Console” kategorisini açarsanız hatayı net bir şekilde görebileceksiniz.

Hatada “Personel” nesnesinin hiçbir providerda tanımlanmadığından/bulamadığından bahsetmektedir.

İşte Angular 4 compilerı bu durumda iki yere bakmaktadır.

1. “app.module.ts” dosyası içerisindeki yani modül içerisindeki providers özelliğine,
2. “ornek.component.ts” dosyası içerisindeki yani component içerisindeki providers özelliğine.

Bu iki noktadan birinde eğer bu nesne tanımlanmış ise “OrnekComponent” sınıfının constructerındaki parametre ilgili nesneyi rahat bir şekilde yakalayıp, dinleyebilecektir.

Örnek “ornek.component.ts” içeriği;

import { Component, OnInit } from '@angular/core';
import { Personel } from '../entitys/personel';
@Component({
  selector: 'app-ornek',
  templateUrl: './ornek.component.html',
  styleUrls: ['./ornek.component.css'],
  providers: [Personel]
})
export class OrnekComponent implements OnInit {
  _personel: Personel;
  constructor(private personel: Personel) { }
  ngOnInit() {
    this._personel = this.personel;
  }
}

Örnek “app.module.ts” içeriği;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { OrnekComponent } from './ornek/ornek.component';
import { Personel } from './entitys/personel';
@NgModule({
  declarations: [
    AppComponent,
    PersonelComponent,
    OrnekComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Personel],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bu şekilde bir tanımlamadan sonra “ornek” componentimizi constructerında “Personel” nesnesi dinlerken rahatlıkla kullanabilmekteyiz.

Şimdi asıl sorulması gereken soruya gelelim.

Nerede Modül Providers’ı, Nerede Component Providers’ı Kullanılmalıdır?

Eğer ki, Singleton instance olarak ayarlanacak nesne tüm uygulama tarafından kullanılacaksa o nesneyi “app.module.ts” dosyasındaki yani modül içerisindeki providers özelliğinden oluşturmanız gerekecektir.

Yok sadece tek bir componente özel bir singleton instance olacaksa ilgili componentin providers özelliğinde oluşturulması daha doğru olacaktır.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…