<\/div>\n
Merhaba,<\/p>\n
Angular mimarisi, 14. s\u00fcr\u00fcmde \u00e7ok ilgin\u00e7 \u00f6zelliklerin yan\u0131nda ekstradan inject<\/code> fonksiyonu e\u015fli\u011finde dependency injection’a yeni bir yakla\u015f\u0131m getirmi\u015f bulunmaktad\u0131r. Bu i\u00e7eri\u011fimizde hem bu fonksiyonu de\u011ferlendirecek hem de kullan\u0131m alanlar\u0131 \u00fczerine irdelemede bulunuyor olaca\u011f\u0131z. Ee o halde buyurun ba\u015flayal\u0131m…<\/p>\n
inject Fonksiyonu<\/h4>\nAngular 14 ile gelen ve @angular\/core<\/em> path’i alt\u0131ndan eri\u015filebilen inject<\/code> fonksiyonu sayesinde component, directive ve pipe’lar da dependency injection’\u0131 farkl\u0131 bir yakla\u015f\u0131mla kullanabilmekteyiz. \u015e\u00f6yle ki;<\/p>\n
\n\r\nimport { Component, inject } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\nfunction getUrl(url: string) {\r\n  return inject(HttpClient).get(url);\r\n}\r\n\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  data$ = getUrl("https:\/\/jsonplaceholder.typicode.com\/todos\/1").subscribe({\r\n    next: data => { console.log(data) }\r\n  });\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131da, basit bir get i\u015flemi i\u00e7in ‘HttpClient’ nesnesine olan ihtiyac\u0131m\u0131z\u0131 constructor’a gerek kalmaks\u0131z\u0131n direkt inject<\/code> fonksiyonuyla giderdi\u011fimizi g\u00f6r\u00fcyoruz. \u0130\u015fte burada inject<\/code> fonksiyonu kullan\u0131ld\u0131\u011f\u0131 yap\u0131n\u0131n injector’\u0131n\u0131 kullanarak dependency injection ile ilgili nesneyi talep etmekte ve i\u015flemlerin ger\u00e7ekle\u015ftirilmesini sa\u011flamaktad\u0131r.<\/p>\n
inject<\/code> fonksiyonu kullan\u0131ld\u0131\u011f\u0131 yap\u0131n\u0131n constructor seviyesinde \u00e7a\u011fr\u0131lmal\u0131d\u0131r. Aksi taktirde hata verecektir. Misal olarak a\u015fa\u011f\u0131daki gibi bir kullan\u0131ma meyledersek;<\/p>\n
\n\r\nfunction getUrl(url: string) {\r\n  return inject(HttpClient).get(url);\r\n}\r\n\r\n.\r\n.\r\n.\r\nexport class AppComponent implements OnInit {\r\n  ngOnInit(): void {\r\n    const data$ = getUrl("https:\/\/jsonplaceholder.typicode.com\/todos\/1").subscribe({\r\n      next: data => { console.log(data) }\r\n    });\r\n  }\r\n}\r\n\r\n<\/pre>\n<\/div>\nbahsedildi\u011fi gibi constructor seviyesinde tetiklenmedi\u011fi i\u00e7in bizleri a\u015fa\u011f\u0131daki hatayla kar\u015f\u0131layacakt\u0131r.
\n<\/a>Lakin a\u015fa\u011f\u0131daki gibi yakla\u015f\u0131m sergilenirse hatas\u0131z \u00e7al\u0131\u015facakt\u0131r;<\/p>\n
\n\r\nfunction getUrl(url: string) {\r\n  return inject(HttpClient).get(url);\r\n}\r\n.\r\n.\r\n.\r\nexport class AppComponent implements OnInit {\r\n  data$ = getUrl("https:\/\/jsonplaceholder.typicode.com\/todos\/1");\r\n  ngOnInit(): void {\r\n    const data = this.data$.subscribe({\r\n      next: data => { console.log(data) }\r\n    })\r\n  }\r\n}\r\n\r\n<\/pre>\n<\/div>\nDikkat ederseniz e\u011fer \u00f6zellikle servis s\u0131n\u0131flar\u0131nda constructor’\u0131 haddinden fazla \u015fi\u015firecek olan dependency injection operasyonlar\u0131n\u0131 inject<\/code> fonksiyonuyla t\u00f6rp\u00fcleyerek daha kullan\u0131labilir bir hale getirebiliriz.<\/p>\n
inject Fonksiyonunun Avantajlar\u0131 Nelerdir?<\/h4>\ninject<\/code> fonksiyonunun bir \u00e7ok faydas\u0131 s\u00f6z konusudur. Ama \u00f6zellikle iki farkl\u0131 durumda avantajlar\u0131n\u0131 net bir \u015fekilde g\u00f6zlemleyebilmekteyiz. Bu durumlar\u0131n ilki abstract class’larda dependency injection operasyonu iken, di\u011feri ise \u00f6n konfig\u00fcrasyon gerektiren \u00e7al\u0131\u015fmalar\u0131n oldu\u011fu durumlard\u0131r. \u015eimdi gelin her iki durumu da s\u0131ras\u0131yla inceleyelim.<\/p>\n
Normal \u015fartlarda abstract class’lar da dependency injection’\u0131 ger\u00e7ekle\u015ftirirken a\u015fa\u011f\u0131daki gibi bir davran\u0131\u015f sergileyebiliyoruz;<\/p>\n
\n\r\n@Directive()\r\nexport abstract class BaseComponent {\r\n  constructor(protected activatedRote: ActivatedRoute, protected router: Router) { }\r\n}\r\n<\/pre>\n<\/div>\nBu \u015fekilde constructor’\u0131 parametreli bir abstract class @Directive<\/code> dekorat\u00f6r\u00fc ile i\u015faretliyse direkt a\u015fa\u011f\u0131daki gibi kal\u0131t\u0131msal durumlarda kullan\u0131labiliyor.<\/p>\n
\n\r\nexport class AppComponent extends BaseComponent {\r\n\r\n}\r\n<\/pre>\n<\/div>\nYani burada @Directive<\/code> dekorat\u00f6r\u00fc sayesinde abstract class olan ‘BaseComponent’in constructor’\u0131na a\u015fa\u011f\u0131daki gibi super<\/code> fonksiyonu arac\u0131l\u0131\u011f\u0131yla de\u011fer g\u00f6ndermek zorunda kalm\u0131yoruz.<\/p>\n
\n\r\nexport class AppComponent extends BaseComponent {\r\n  constructor(activatedRote: ActivatedRoute, router: Router) {\r\n    super(activatedRote, router);\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nTabi e\u011fer ki bu s\u0131n\u0131fta dependency injection \u00fczerinden farkl\u0131 bir instance talebinde bulunulacaksa i\u015fte o zaman super<\/code> fonksiyonu a\u015fa\u011f\u0131daki gibi zoraki call edilmek mecburiyetinde kal\u0131nacakt\u0131r.<\/p>\n
\n\r\nexport class AppComponent extends BaseComponent {\r\n  constructor(private service: ServiceWorker, activatedRote: ActivatedRoute, router: Router) {\r\n    super(activatedRote, router);\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nVelhas\u0131l i\u015fte bu tarz kurall\u0131 durumlardan inject<\/code> fonksiyonu sayesinde kurtulabilmekte ve a\u015fa\u011f\u0131daki gibi \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirebilmekteyiz.<\/p>\n
\n\r\n@Directive()\r\nexport abstract class BaseComponent {\r\n  protected readonly activatedRoute: ActivatedRoute = inject(ActivatedRoute);\r\n  protected readonly router: Router = inject(Router);\r\n}\r\n<\/pre>\n<\/div>\n\n\r\nexport class AppComponent extends BaseComponent {\r\n\r\n}\r\n<\/pre>\n<\/div>\nBu vaziyette ‘AppComonent’te farkl\u0131 bir dependency injection’a ihtiya\u00e7 duyulursa kal\u0131t\u0131m mevzu bahis oldu\u011fu i\u00e7in base class’\u0131n constructor’\u0131 super<\/code> fonksiyonu ile call edilecek lakin herhangi bir parametre verilmek mecburiyetinde kal\u0131nmayacakt\u0131r.<\/p>\n
Bir di\u011fer avantajl\u0131 duruma ise \u00f6n konfig\u00fcrasyon gerektiren \u00e7al\u0131\u015fmalar demi\u015ftik. \u015e\u00f6yle ki;<\/p>\n
\n\r\nfunction injectIcon() {\r\n  const iconRegistry = inject(MatIconRegistry);\r\n  const domSanitizer = inject(DomSanitizer);\r\n  const url = domSanitizer.bypassSecurityTrustResourceUrl("assest\/icons\/icon.svg");\r\n  iconRegistry.addSvgIcon("github", url);\r\n}\r\n.\r\n.\r\n.\r\nexport class AppComponent {\r\n  constructor() {\r\n    injectIcon();\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nYukar\u0131da, Angular material k\u00fct\u00fcphanesinin ‘MatIconRegistry’ mod\u00fcl\u00fcnde icon \u00f6zelle\u015ftirmesini ger\u00e7ekle\u015ftirdi\u011fimiz \u00f6rnek bir kod blo\u011funu g\u00f6rmektesiniz. Bu \u00e7al\u0131\u015fman\u0131n sonradan ihtiya\u00e7 olmad\u0131\u011f\u0131ndan uygulamadan kald\u0131r\u0131laca\u011f\u0131n\u0131 varsayarsak e\u011fer bu k\u00fct\u00fcphanelerle ilgilenmek zorunlulu\u011fu kal\u0131nmayacak ve sadece bu fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 noktadan kald\u0131r\u0131lmas\u0131 yeterli olacakt\u0131r. B\u00f6ylece uygulamada bu g\u00fcn var olup yar\u0131n olmayabilecek \u00e7al\u0131\u015fmalar\u0131n, ihtiya\u00e7 kalmad\u0131\u011f\u0131 taktirde uygulama genelinde temizlenme\/kald\u0131r\u0131lma gibi side effect’leriyle u\u011fra\u015f\u0131lmayacakt\u0131r. \u0130\u015fte avantajlar\u0131ndan biri de budur…<\/p>\n
Evet… B\u00f6ylece Angular 14 ile gelen yeniliklerden birini daha incelemi\u015f olduk.
\nOkuyarak e\u015flik etti\u011finiz i\u00e7in te\u015fekk\u00fcr ederim.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular mimarisi, 14. s\u00fcr\u00fcmde \u00e7ok ilgin\u00e7 \u00f6zelliklerin yan\u0131nda ekstradan inject fonksiyonu e\u015fli\u011finde dependency injection’a yeni bir yakla\u015f\u0131m getirmi\u015f bulunmaktad\u0131r. Bu i\u00e7eri\u011fimizde hem bu fonksiyonu de\u011ferlendirecek hem de kullan\u0131m alanlar\u0131 \u00fczerine irdelemede bulunuyor olaca\u011f\u0131z....<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4610],"tags":[2156,4685,4688,4686,4687,946],"class_list":["post-25735","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-14","tag-angular","tag-angular-14","tag-angular-14-inject","tag-angular-dependency-injection","tag-angular-inject","tag-dependency-injection"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25735","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=25735"}],"version-history":[{"count":6,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25735\/revisions"}],"predecessor-version":[{"id":25742,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25735\/revisions\/25742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7400"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=25735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=25735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=25735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}