Angular 4’te {provide-useValue} İle Global Değer Oluşturma

Merhaba,

Bazen üzerinde çalıştığınız uygulamanın genelinden erişilebilen global değerlere ihtiyacımız olabilir. Bu global yapılanma eşliğinde projenizin herhangi bir noktasından o değerleri çağırabilir ve kod tekrarına düşmeksizin tek seferde kritik değerleri edinebilir ve hatta hata olasılıklarını neredeyse sıfıra indirgeyip, olası bir değişiklik sonucunda projeyi tek bir kanaldan yönetebiliriz. Bu global değerler; oturum bilgileri, sabit nesneler yahut kullanıcı adı veya şifresi vs. olabileceği gibi herhangi bir veritabanı bağlantısı providerıda konumuz açısından örnek olarak verilebilir.

Angular 4 uygulamalarında, uygulamaya has global değerleri modüller aracılığıyla oluşturabiliriz. Önceki makalelerimizden de biliyoruz ki, bir modüle ya da componente ait uygulama çalıştığı sürece hali hazırda bulunacak global nesneleri ya da modülleri “providers” özelliğinde tanımlamaktayız.

Nesne ya da modül dışında “providers” özelliğine kendi formatımızda verilerde verebilmekte ve bunu istediğimiz noktada modülden talep edebilmekteyiz.

Peki bu işlemi nasıl mı yapıyoruz?
Çok yabancılık çekmeyeceğimiz bir nokta olan modülümüzün “providers” özelliğini kullanarak işlemimizi icra ediyoruz.

 providers:
  [
    { provide: "ProvideName", useValue: "ProvideValue"}
  ]

Yukarıdaki prototipi incelerseniz eğer “providers” özelliğine verilen “provide” ve “useValue” özellikleri uygulama boyunca global erişebileceğimiz verilerimizi organize etme görevi üstlenmektedirler. “provide”, global değeri tanımlayan bir isim bildirimi yaparken, “useValue” ise ilgili değerimizi taşıyacak olan özelliktir.

Şimdi aşağıdaki örnek kod bloğunu inceleyiniz.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: "Siir", useValue: "Sevmek ne büyük aptallıkmış. Ve ben, ne kadar da çok sevmişim meğer…" }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Modülümüzde oluşturulan “Şiir” provideına sahip değerimizi aşağıda olduğu gibi elde etmekteyiz.

import { Component, Inject } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  siir: string;
  constructor(@Inject("Siir") private _siir) {
    this.siir = _siir;
  }
}

Yukarıdaki kod bloğuna dikkat ederseniz eğer “@angular/core” dizininden import edilen “Inject” modülü ile global değişkeni kullanacağımız ilgili componentin constructorından alınan parametre işaretlenmiş ve “Siir” isimli global değişken bu parametreye enjekte edilmiştir. Dolayısıyla yapılan çalışma neticesinde componentin html dosyasında “siir” değişkeni gösterilmekte ve sonuç olarak aşağıdaki gibi bir görüntüyle karşılaşmaktayız.

Önceki makalelerimiz arasında şu ve şu makalelerin içeriklerinde http servisleriyle nasıl çalışıldığını değerlendirmiş ve örneklendirmiştik. Haliyle her iki makaleninde örneğinde dış kaynağın linkini manuel olarak direkt http servisine vermemiz oldukça gayri profesyonel bir yaklaşım olsa gerek.

  providers:
  [,
    { provide: "JsonAdres", useValue: "http://jsonplaceholder.typicode.com/users" }
  ]

import { Component, OnInit, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  datas;
  constructor(private http: Http, @Inject("JsonAdres") private adres) {
  }
  ngOnInit() {
    this.http.get(this.adres)
      .map(response => response.json())
      .subscribe(data => this.datas = data);
  }
}

İşte bu şekilde daha düzgün ve prosfesyonelce bir yaklaşım sergilemiş olduk 😉

Velhasıl… Umarım faydalı olabilmişimdir.
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…