<\/div>\n

Merhaba,<\/p>\n

Bazen \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z uygulaman\u0131n genelinden eri\u015filebilen global de\u011ferlere ihtiyac\u0131m\u0131z olabilir. Bu global yap\u0131lanma e\u015fli\u011finde projenizin herhangi bir noktas\u0131ndan o de\u011ferleri \u00e7a\u011f\u0131rabilir ve kod tekrar\u0131na d\u00fc\u015fmeksizin tek seferde kritik de\u011ferleri edinebilir ve hatta hata olas\u0131l\u0131klar\u0131n\u0131 neredeyse s\u0131f\u0131ra indirgeyip, olas\u0131 bir de\u011fi\u015fiklik sonucunda projeyi tek bir kanaldan y\u00f6netebiliriz. Bu global de\u011ferler; oturum bilgileri, sabit nesneler yahut kullan\u0131c\u0131 ad\u0131 veya \u015fifresi vs. olabilece\u011fi gibi herhangi bir veritaban\u0131 ba\u011flant\u0131s\u0131 provider\u0131da konumuz a\u00e7\u0131s\u0131ndan \u00f6rnek olarak verilebilir.<\/p>\n

Angular 4 uygulamalar\u0131nda, uygulamaya has global de\u011ferleri mod\u00fcller arac\u0131l\u0131\u011f\u0131yla olu\u015fturabiliriz. \u00d6nceki makalelerimizden de biliyoruz ki, bir mod\u00fcle ya da componente ait uygulama \u00e7al\u0131\u015ft\u0131\u011f\u0131 s\u00fcrece hali haz\u0131rda bulunacak global nesneleri ya da mod\u00fclleri “providers” \u00f6zelli\u011finde tan\u0131mlamaktay\u0131z.<\/p>\n

Nesne ya da mod\u00fcl d\u0131\u015f\u0131nda “providers” \u00f6zelli\u011fine kendi format\u0131m\u0131zda verilerde verebilmekte ve bunu istedi\u011fimiz noktada mod\u00fclden talep edebilmekteyiz.<\/p>\n

Peki bu i\u015flemi nas\u0131l m\u0131 yap\u0131yoruz?<\/strong><\/em>
\n\u00c7ok yabanc\u0131l\u0131k \u00e7ekmeyece\u011fimiz bir nokta olan mod\u00fcl\u00fcm\u00fcz\u00fcn “providers” \u00f6zelli\u011fini kullanarak i\u015flemimizi icra ediyoruz.<\/p>\n

\r\n providers:\r\n  [\r\n    { provide: "ProvideName", useValue: "ProvideValue"}\r\n  ]\r\n<\/pre>\nYukar\u0131daki prototipi incelerseniz e\u011fer “providers” \u00f6zelli\u011fine verilen “provide” ve “useValue” \u00f6zellikleri uygulama boyunca global eri\u015febilece\u011fimiz verilerimizi organize etme g\u00f6revi \u00fcstlenmektedirler. “provide”, global de\u011feri tan\u0131mlayan bir isim bildirimi yaparken, “useValue” ise ilgili de\u011ferimizi ta\u015f\u0131yacak olan \u00f6zelliktir.<\/p>\n
\u015eimdi a\u015fa\u011f\u0131daki \u00f6rnek kod blo\u011funu inceleyiniz.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule\r\n  ],\r\n  providers: [\r\n    { provide: "Siir", useValue: "Sevmek ne b\u00fcy\u00fck aptall\u0131km\u0131\u015f. Ve ben, ne kadar da \u00e7ok sevmi\u015fim me\u011fer\u2026" }\r\n  ],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nMod\u00fcl\u00fcm\u00fczde olu\u015fturulan “\u015eiir” provide\u0131na sahip de\u011ferimizi a\u015fa\u011f\u0131da oldu\u011fu gibi elde etmekteyiz.<\/p>\n
\r\nimport { Component, Inject } from '@angular\/core';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  siir: string;\r\n  constructor(@Inject("Siir") private _siir) {\r\n    this.siir = _siir;\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funa dikkat ederseniz e\u011fer “@angular\/core” dizininden import edilen “Inject” mod\u00fcl\u00fc ile global de\u011fi\u015fkeni kullanaca\u011f\u0131m\u0131z ilgili componentin constructor\u0131ndan al\u0131nan parametre i\u015faretlenmi\u015f ve “Siir” isimli global de\u011fi\u015fken bu parametreye enjekte edilmi\u015ftir. Dolay\u0131s\u0131yla yap\u0131lan \u00e7al\u0131\u015fma neticesinde componentin html dosyas\u0131nda “siir” de\u011fi\u015fkeni g\u00f6sterilmekte ve sonu\u00e7 olarak a\u015fa\u011f\u0131daki gibi bir g\u00f6r\u00fcnt\u00fcyle kar\u015f\u0131la\u015fmaktay\u0131z.
\n<\/a><\/p>\n
\u00d6nceki makalelerimiz aras\u0131nda \u015fu<\/a> ve \u015fu<\/a> makalelerin i\u00e7eriklerinde http servisleriyle nas\u0131l \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131n\u0131 de\u011ferlendirmi\u015f ve \u00f6rneklendirmi\u015ftik. Haliyle her iki makaleninde \u00f6rne\u011finde d\u0131\u015f kayna\u011f\u0131n linkini manuel olarak direkt http servisine vermemiz olduk\u00e7a gayri profesyonel bir yakla\u015f\u0131m olsa gerek.<\/p>\n
\r\n  providers:\r\n  [,\r\n    { provide: "JsonAdres", useValue: "http:\/\/jsonplaceholder.typicode.com\/users" }\r\n  ]\r\n<\/pre>\n\r\nimport { Component, OnInit, Inject } from '@angular\/core';\r\nimport { Http, Response } from '@angular\/http';\r\nimport 'rxjs\/add\/operator\/map';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n  datas;\r\n  constructor(private http: Http, @Inject("JsonAdres") private adres) {\r\n  }\r\n  ngOnInit() {\r\n    this.http.get(this.adres)\r\n      .map(response => response.json())\r\n      .subscribe(data => this.datas = data);\r\n  }\r\n}\r\n<\/pre>\n\u0130\u015fte bu \u015fekilde daha d\u00fczg\u00fcn ve prosfesyonelce bir yakla\u015f\u0131m sergilemi\u015f olduk \ud83d\ude09<\/p>\n
Velhas\u0131l… Umar\u0131m faydal\u0131 olabilmi\u015fimdir.
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bazen \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z uygulaman\u0131n genelinden eri\u015filebilen global de\u011ferlere ihtiyac\u0131m\u0131z olabilir. Bu global yap\u0131lanma e\u015fli\u011finde projenizin herhangi bir noktas\u0131ndan o de\u011ferleri \u00e7a\u011f\u0131rabilir ve kod tekrar\u0131na d\u00fc\u015fmeksizin tek seferde kritik de\u011ferleri edinebilir ve hatta hata...<\/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":[2251,2249,2250,2247,2248,2244,2246,2245],"class_list":["post-7580","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","tag-angular-4-global-value","tag-angular-4-provide","tag-angular-4-usevalue","tag-angular-provide","tag-angular-usevalue","tag-provide","tag-providers","tag-usevalue"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7580","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=7580"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7580\/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=7580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}