Angular 18 – Gelen Bazı Yeniliklere Hızlıca Göz Atalım

Merhaba,

Bu içeriğimizde Angular mimarisinin 18. sürümünde gelen ve bizim için kritik arzeden yenilikleri seri bir şekilde inceliyor olacağız. Normalde bilenler bilir, toplu incelemeler hiç huyum değildir bilakis her gelen yeniliği tek tek ayrı başlıklar altında değerlendirmek nacizane tercihimdir. Amma velakin Angular mimarisi açısından hal öyle bir vaziyet aldı ki, bir konuya dair tam teferruatlı vakıf olmaya çalışsak aynı anda peş peşe yeni özellikler gelmekte, hadi onlara göz atsak bu sefer de vakıfız dediğimiz konuya yeni bir davranış eklenmektedir. Ee madem durum böyle, o zaman tek tek gelmeyen Angular’a bizde uygun koşullarda eşlik ediyor olacağız 🙂 Neyse fazla uzatmaksızın bakalım gelen sürümlerdeki yeni davranışlar nelermiş buyurun incelemeye başlayalım.

• Progressing Change Detection
  Biliyorsunuz ki Angular mimarisi 18. sürüme kadar change detection için zone.js adlı bir kütüphaneyle çalışma gerçekleştirmekteydi. Bu kütüphanenin birçok getirisi olsa da yapısal olarak bir o kadar da performans zorlukları da dahil olmak üzere dezavantajlar getirmekteydi. Uzun süredir zone.js’e dayanmayan bir altyapı kurma telaşında olan Angular geliştiricileri netice olarak Zoneless bir API yapısına kavuştuklarını duyurmuş oldular. Bizler zoneless yapılanmayı Angular 18 – Zoneless Change Detection başlıklı içeriğimizde tam teferruatlı incelemiştik. Dolayısıyla burada hiç detaya girmeksizin hususi olarak adresinde incelemeniz için linki bırakıyor, konuyu burada noktalıyorum.
• Control State Change Events
  Artık Reactive Forms yapılanmasında control’lerin state’i değiştiği taktirde bir event fırlatabiliyor ve böylece form denetimini daha efektif gerçekleştirebiliyoruz.

      this.parcelCheckForm.controls["parcelName"].events.subscribe(event => {
        console.log(event);
      })
  

  Bu event’ler üzerinden verisel değişiklikler derinlemesine takip edilip, gerekli analizlerde bulunulabilmektedir.

• ng-content İçin Yedek İçerik
  Bu güne kadar Angular’da gelişmiş component yapısı olarak kullandığımız ng-content‘te varsayılan bir içerik belirtme şansımız yoktu. Artık var 🙂

  <ng-content>Default Content</ng-content>
  

• Route Redirects as Functions
  Angular 18’de uygulamanın rotalarını belirlediğimiz Routes içerisinde geriye bir array döndürecek olan redirectTo delegate’i tanımlanmıştır. Bu delegate’e vereceğimiz metot içerisinde daha esnek sayfa yönlendirmeleri gerçekleştirilebilmekte ve özellikle runtime’daki durumlara dayanan bir yönlendirme davranışı söz konusuysa bu tarz karmaşık mantığı rahatlıkla uygulayabilmekteyiz.

  export const routes: Routes = [
      {
          path: 'about', component: AboutComponent
      },
      {
          path: "profile",
          redirectTo: ({ queryParams }) => {
              const errorHandler = inject(ErrorHandler);
              const userId = queryParams["userId"];
              if (userId !== undefined)
                  return `/user/${userId}`
              else {
                  errorHandler.handleError(new Error("No user id..."));
                  return `/user/not-found`
              }
          }
      }
  ];
  

Bunların dışında farklı yenilikler ve özellikler gelmiş olsa da onları hususi başlıklar altında incelemek gerektiği kanaatinde olduğumdan dolayı bu içeriğimizi burada noktalıyorum.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…