<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Angular mimarisinin 18. s\u00fcr\u00fcm\u00fcnde gelen ve bizim i\u00e7in kritik arzeden yenilikleri seri bir \u015fekilde inceliyor olaca\u011f\u0131z. Normalde bilenler bilir, toplu incelemeler hi\u00e7 huyum de\u011fildir bilakis her gelen yenili\u011fi tek tek ayr\u0131 ba\u015fl\u0131klar alt\u0131nda de\u011ferlendirmek nacizane tercihimdir. Amma velakin Angular mimarisi a\u00e7\u0131s\u0131ndan hal \u00f6yle bir vaziyet ald\u0131 ki, bir konuya dair tam teferruatl\u0131 vak\u0131f olmaya \u00e7al\u0131\u015fsak ayn\u0131 anda pe\u015f pe\u015fe yeni \u00f6zellikler gelmekte, hadi onlara g\u00f6z atsak bu sefer de vak\u0131f\u0131z dedi\u011fimiz konuya yeni bir davran\u0131\u015f eklenmektedir. Ee madem durum b\u00f6yle, o zaman tek tek gelmeyen Angular’a bizde uygun ko\u015fullarda e\u015flik ediyor olaca\u011f\u0131z \ud83d\ude42 Neyse fazla uzatmaks\u0131z\u0131n bakal\u0131m gelen s\u00fcr\u00fcmlerdeki yeni davran\u0131\u015flar nelermi\u015f buyurun incelemeye ba\u015flayal\u0131m.<\/p>\n

Progressing Change Detection<\/em><\/strong>
\nBiliyorsunuz ki Angular mimarisi 18. s\u00fcr\u00fcme kadar change detection i\u00e7in zone.js adl\u0131 bir k\u00fct\u00fcphaneyle \u00e7al\u0131\u015fma ger\u00e7ekle\u015ftirmekteydi. Bu k\u00fct\u00fcphanenin bir\u00e7ok getirisi olsa da yap\u0131sal olarak bir o kadar da performans zorluklar\u0131 da dahil olmak \u00fczere dezavantajlar getirmekteydi. Uzun s\u00fcredir zone.js’e dayanmayan bir altyap\u0131 kurma tela\u015f\u0131nda olan Angular geli\u015ftiricileri netice olarak Zoneless bir API yap\u0131s\u0131na kavu\u015ftuklar\u0131n\u0131 duyurmu\u015f oldular. Bizler zoneless yap\u0131lanmay\u0131 Angular 18 \u2013 Zoneless Change Detection<\/a> ba\u015fl\u0131kl\u0131 i\u00e7eri\u011fimizde tam teferruatl\u0131 incelemi\u015ftik. Dolay\u0131s\u0131yla burada hi\u00e7 detaya girmeksizin hususi olarak adresinde incelemeniz i\u00e7in linki b\u0131rak\u0131yor, konuyu burada noktal\u0131yorum.\n<\/li>\n

Control State Change Events<\/em><\/strong>
\nArt\u0131k Reactive Forms<\/a> yap\u0131lanmas\u0131nda control’lerin state’i de\u011fi\u015fti\u011fi taktirde bir event f\u0131rlatabiliyor ve b\u00f6ylece form denetimini daha efektif ger\u00e7ekle\u015ftirebiliyoruz.<\/p>\n
\n
\r\n this.parcelCheckForm.controls["parcelName"].events.subscribe(event => {\r\n console.log(event);\r\n })\r\n<\/pre>\n<\/div>\n
Bu event’ler \u00fczerinden verisel de\u011fi\u015fiklikler derinlemesine takip edilip, gerekli analizlerde bulunulabilmektedir.\n<\/li>\n
ng-content \u0130\u00e7in Yedek \u0130\u00e7erik<\/em><\/strong>
\nBu g\u00fcne kadar Angular’da geli\u015fmi\u015f component yap\u0131s\u0131 olarak kulland\u0131\u011f\u0131m\u0131z ng-content<\/a>‘te varsay\u0131lan bir i\u00e7erik belirtme \u015fans\u0131m\u0131z yoktu. Art\u0131k var \ud83d\ude42<\/p>\n
\n
\r\n<ng-content>Default Content<\/ng-content>\r\n<\/pre>\n<\/div>\n<\/li>\n
Route Redirects as Functions<\/em><\/strong>
\nAngular 18’de uygulaman\u0131n rotalar\u0131n\u0131 belirledi\u011fimiz Routes i\u00e7erisinde geriye bir array d\u00f6nd\u00fcrecek olan redirectTo<\/code> delegate’i tan\u0131mlanm\u0131\u015ft\u0131r. Bu delegate’e verece\u011fimiz metot i\u00e7erisinde daha esnek sayfa y\u00f6nlendirmeleri ger\u00e7ekle\u015ftirilebilmekte ve \u00f6zellikle runtime’daki durumlara dayanan bir y\u00f6nlendirme davran\u0131\u015f\u0131 s\u00f6z konusuysa bu tarz karma\u015f\u0131k mant\u0131\u011f\u0131 rahatl\u0131kla uygulayabilmekteyiz.<\/p>\n\n\r\nexport const routes: Routes = [\r\n {\r\n path: 'about', component: AboutComponent\r\n },\r\n {\r\n path: "profile",\r\n redirectTo: ({ queryParams }) => {\r\n const errorHandler = inject(ErrorHandler);\r\n const userId = queryParams["userId"];\r\n if (userId !== undefined)\r\n return `\/user\/${userId}`\r\n else {\r\n errorHandler.handleError(new Error("No user id..."));\r\n return `\/user\/not-found`\r\n }\r\n }\r\n }\r\n];\r\n<\/pre>\n<\/div>\n<\/li>\n<\/ul>\nBunlar\u0131n d\u0131\u015f\u0131nda farkl\u0131 yenilikler ve \u00f6zellikler gelmi\u015f olsa da onlar\u0131 hususi ba\u015fl\u0131klar alt\u0131nda incelemek gerekti\u011fi kanaatinde oldu\u011fumdan dolay\u0131 bu i\u00e7eri\u011fimizi burada noktal\u0131yorum.<\/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, Bu i\u00e7eri\u011fimizde Angular mimarisinin 18. s\u00fcr\u00fcm\u00fcnde gelen ve bizim i\u00e7in kritik arzeden yenilikleri seri bir \u015fekilde inceliyor olaca\u011f\u0131z. Normalde bilenler bilir, toplu incelemeler hi\u00e7 huyum de\u011fildir bilakis her gelen yenili\u011fi tek tek ayr\u0131...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5061],"tags":[5115,2156,5062,5112,5079,5113,4643,5111,5114],"class_list":["post-27160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-18","tag-let-it-begin","tag-angular","tag-angular-18","tag-angular-18-1","tag-angular-18-2","tag-control-state-change-events","tag-ng-content","tag-progressing-change-detection","tag-route-redirects-as-functions"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27160","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=27160"}],"version-history":[{"count":5,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27160\/revisions"}],"predecessor-version":[{"id":27165,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27160\/revisions\/27165"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/26698"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=27160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=27160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=27160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}