<\/div>\n

Merhaba,<\/p>\n

Angular 4 uygulamalar\u0131nda yap\u0131n\u0131n genel ya da \u00f6zel olarak kullanaca\u011f\u0131 bir nesneyi providers \u00f6zelli\u011fini kullanarak yaratmam\u0131z ve tutmam\u0131z bizim i\u00e7in performans ve maliyet a\u00e7\u0131s\u0131ndan olduk\u00e7a \u00f6nem arz etmektedir. \u015eimdi bu konuyu \u00f6rnek bir senaryo \u00fczerinden ele alacak, a\u00e7acak ve kullan\u0131m\u0131n\u0131 ve ihtiyac\u0131n\u0131 teorik ve pratik olarak netle\u015ftirece\u011fiz.<\/p>\n

\u0130lk olarak “ornek” ad\u0131nda bir component olu\u015ftural\u0131m ve “ornek.component.ts” dosyas\u0131n\u0131 a\u00e7\u0131p i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi \u015fekillendirelim.<\/p>\n

\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Personel } from '..\/entitys\/personel';\r\n@Component({\r\n  selector: 'app-ornek',\r\n  templateUrl: '.\/ornek.component.html',\r\n  styleUrls: ['.\/ornek.component.css']\r\n})\r\nexport class OrnekComponent implements OnInit {\r\n  _personel: Personel;\r\n  constructor(private personel: Personel) { }\r\n  ngOnInit() {\r\n    this.personel.Adi = "Gen\u00e7ay";\r\n    this.personel.SoyAdi = "Y\u0131ld\u0131z";\r\n    this._personel = this.personel;\r\n  }\r\n}\r\n<\/pre>\nDikkat ederseniz e\u011fer, “ornek” componentimiz “Personel” tipinde bir s\u0131n\u0131f\u0131 dinlemektedir. Bu component \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131 zaman constructer\u0131nda dinledi\u011fi bu “Personel” nesnesi bir yerde olu\u015fturulmu\u015f olmal\u0131d\u0131r.<\/p>\n
E\u011fer ki mevcut durumda projeyi kaydedip, yay\u0131nlarsak taray\u0131c\u0131da hi\u00e7bir sonu\u00e7 alamayaca\u011f\u0131z ve hatta sayfaya sa\u011f t\u0131klayarak “\u0130ncele” men\u00fcs\u00fcne t\u0131klad\u0131\u011f\u0131n\u0131z zaman \u00e7\u0131kan pencerede “Console” kategorisini a\u00e7arsan\u0131z hatay\u0131 net bir \u015fekilde g\u00f6rebileceksiniz.
\n<\/a><\/p>\n
Hatada “Personel” nesnesinin hi\u00e7bir providerda tan\u0131mlanmad\u0131\u011f\u0131ndan\/bulamad\u0131\u011f\u0131ndan bahsetmektedir.<\/p>\n
\u0130\u015fte Angular 4 compiler\u0131 bu durumda iki yere bakmaktad\u0131r.<\/p>\n
1. “app.module.ts” dosyas\u0131 i\u00e7erisindeki yani mod\u00fcl i\u00e7erisindeki providers \u00f6zelli\u011fine,
\n2. “ornek.component.ts” dosyas\u0131 i\u00e7erisindeki yani component i\u00e7erisindeki providers \u00f6zelli\u011fine.<\/p>\n
Bu iki noktadan birinde e\u011fer bu nesne tan\u0131mlanm\u0131\u015f ise “OrnekComponent” s\u0131n\u0131f\u0131n\u0131n constructer\u0131ndaki parametre ilgili nesneyi rahat bir \u015fekilde yakalay\u0131p, dinleyebilecektir.<\/p>\n
\u00d6rnek “ornek.component.ts” i\u00e7eri\u011fi;<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Personel } from '..\/entitys\/personel';\r\n@Component({\r\n  selector: 'app-ornek',\r\n  templateUrl: '.\/ornek.component.html',\r\n  styleUrls: ['.\/ornek.component.css'],\r\n  providers: [Personel]\r\n})\r\nexport class OrnekComponent implements OnInit {\r\n  _personel: Personel;\r\n  constructor(private personel: Personel) { }\r\n  ngOnInit() {\r\n    this._personel = this.personel;\r\n  }\r\n}\r\n<\/pre>\n\u00d6rnek “app.module.ts” i\u00e7eri\u011fi;<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { OrnekComponent } from '.\/ornek\/ornek.component';\r\nimport { Personel } from '.\/entitys\/personel';\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    PersonelComponent,\r\n    OrnekComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule\r\n  ],\r\n  providers: [Personel],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nBu \u015fekilde bir tan\u0131mlamadan sonra “ornek” componentimizi constructer\u0131nda “Personel” nesnesi dinlerken rahatl\u0131kla kullanabilmekteyiz.<\/p>\n
\u015eimdi as\u0131l sorulmas\u0131 gereken soruya gelelim.<\/p>\n
Nerede Mod\u00fcl Providers’\u0131, Nerede Component Providers’\u0131 Kullan\u0131lmal\u0131d\u0131r?<\/h5>\nE\u011fer ki, Singleton instance olarak ayarlanacak nesne t\u00fcm uygulama taraf\u0131ndan kullan\u0131lacaksa o nesneyi “app.module.ts” dosyas\u0131ndaki yani mod\u00fcl i\u00e7erisindeki providers \u00f6zelli\u011finden olu\u015fturman\u0131z gerekecektir.<\/p>\n
Yok sadece tek bir componente \u00f6zel bir singleton instance olacaksa ilgili componentin providers \u00f6zelli\u011finde olu\u015fturulmas\u0131 daha do\u011fru olacakt\u0131r.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular 4 uygulamalar\u0131nda yap\u0131n\u0131n genel ya da \u00f6zel olarak kullanaca\u011f\u0131 bir nesneyi providers \u00f6zelli\u011fini kullanarak yaratmam\u0131z ve tutmam\u0131z bizim i\u00e7in performans ve maliyet a\u00e7\u0131s\u0131ndan olduk\u00e7a \u00f6nem arz etmektedir. \u015eimdi bu konuyu \u00f6rnek bir...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144],"tags":[2215,2217,2216,2218],"class_list":["post-7478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-providers","tag-angular-4-providers-singleton-instance-yaratmak","tag-angular-4-singleton-instance","tag-angular-4-singleton-providers"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7478"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7478\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}