Angular 17 Eğitimi

Angular 17'ye Giriş

• Angular nedir?
• Angular vs React vs Vue
• Angular 17 özellikleri ve mimarisi genel bakış
• Geliştirme Ortamını Kurma

Başlangıç

• Angular CLI kullanarak yeni bir Angular 17 projesi oluşturma
• Proje yapısını ve dosyaları keşfetme
• Uygulamayı çalıştırma ve sunma
• İnterpolasyon ve ifadeler kullanarak veri görüntüleme

Bileşenler (Components)

• Angular 17'de bileşenlerin rolünü anlama
• Bileşen oluşturma ve kullanma
• inputs ve outputs kullanarak bileşenler arasında veri geçirme
• Bileşen yaşam döngüsü kancalarını (hooks) kullanma

Direktifler (Directives)

• Yapısal ve öznitelik (attribute) direktifleri arasındaki farkı anlama
• ngIf, ngFor, ngSwitch gibi yerleşik direktifleri oluşturma ve kullanma
• Özel direktifler oluşturma ve kullanma

Borular (Pipes)

• Angular 17'de boruların (pipes) amacını anlama
• date, currency, json gibi yerleşik boruları (pipes) oluşturma ve kullanma
• Özel borular (pipes) oluşturma ve kullanma

Servisler (Services)

• Angular 17'de servislerin rolünü anlama
• Servis oluşturma ve kullanma
• Sağlayıcılar (providers) kullanarak bağımlılık enjeksiyonu

Modüller (Modules)

• Angular 17'de modüllerin rolünü anlama
• Modül oluşturma ve kullanma
• Modülleri içe ve dışa aktarma

Veri Bağlama (Data Binding)

• Bir yönlü ve iki yönlü veri bağlama arasındaki farkı anlama
• Öznitelik bağlama, olay bağlama ve muz kutusunda banan (banana-in-a-box) sözdizimini oluşturma ve kullanma
• Şablon referans değişkenlerini kullanma

Yönlendirme (Routing)

• Angular 17'de yönlendirmenin rolünü anlama
• Yol (route) oluşturma ve yapılandırma
• routerLink ve router.navigate() kullanarak yollar arasında gezinme
• Yol parametreleri, sorgu parametreleri ve parçacıkları (fragments) kullanma

Formlar

• Şablon tabanlı ve tepkisel formlar arasındaki farkı anlama
• Form kontrolleri, form grupları, form dizileri vb. kullanarak formları oluşturma ve doğrulama
• required, minLength, maxLength gibi yerleşik doğrulayıcıları kullanma
• Özel doğrulayıcılar oluşturma ve kullanma

HTTP İstemcisi

• Angular 17'de HTTP istemcisinin rolünü anlama
• Arka uç servisleriyle iletişim kurmak için HTTP istekleri oluşturma ve kullanma
• Asenkron veri akışlarını yönetmek için gözlemlenebilirleri (observables) kullanma
• HTTP isteklerini veya yanıtlarını değiştirmek veya yönetmek için araçlayıcıları (interceptors) kullanma

Yeni, Açıklayıcı Akış Kontrolü

• Yeni şablon akış kontrolü bloğu sözdizimini açıklamak ve koşul bazlı görüntüleme, döngüler ve boş koleksiyonları yönetme gibi ortak görevleri nasıl basitleştirdiğini göstermek
• @if, @else, @switch, @case, @default, @for ve @empty gibi yeni blokları kullanımına örnekler vermek
• *ngIf, *ngSwitch ve *ngFor gibi önceki sözdizimiyle yeni sözdizimini karşılaştırmak
• Yeni akış kontrolü bloklarının sinyallerle (signals) bölgesiz (zoneless) uygulamaları nasıl desteklediğini belirtmek

Ertelenmiş Yükleme Blokları

• Ertelenmiş yükleme (deferred loading) kavramını açıklamak ve bunun web uygulamalarının performansını ve kullanıcı deneyimini nasıl iyileştirebileceğini göstermek
• Bloğun içeriğini ve bağımlılıklarını tembel yükleme (lazy-loading) yapabilen yeni @defer akış kontrolü bloğunu tanıtmak
• Bileşenler, direktifler, borular, animasyonlar ve stilleri yükleme gibi farklı senaryolar için @defer bloğunu kullanımına örnekler vermek
• @defer bloğunun yeni görünüm geçişleri API'si ile nasıl çalıştığını belirtmek

Görünüm Geçişleri API'si (View Transitions API)

• Geliştiricilerin görünimler arasındaki animasyonları ve geçişleri özelleştirmesini sağlayan görünüm geçişleri API'sinin amacını ve faydalarını açıklamak
• Görünüm geçişleri API'sinin kullanımını mümkün kılan yeni withViewTransitions direktifini tanıtmak
• withViewTransitions direktifini fade, slide, zoom ve flip gibi farklı geçiş tipleriyle kullanımına örnekler vermek
• Görünüm geçişleri API'sinin Angular yönlendirici ve tarayıcı geçmişiyle nasıl çalıştığını belirtmek

Diğer Özellikler ve İyileştirmeler

• Angular 17'nin sunduğu diğer bazı özellikleri ve iyileştirmeleri kısaca özetlemek, örneğin:
• @Component.styles'in bir dize olarak geçirilmesini destekleme
• Angular animasyon kodunun tembel yüklenebilir (lazy-loadable) olması
• TypeScript 5.2 desteği
• Temel sinyal API'sinin artık stabil olması
• Node.js v16 desteğinin kaldırılması ve en az desteklenen sürümün v18.13.0 olması
• Esbuild'in varsayılan derleyici (builder) olması ve varsayılan geliştirme sunucusunun Vite kullanması