ANGULAR EĞİTİMİ
Angular eğitimi, framework'ün opinionated yapısını avantaja çeviren bir mimari disiplin kazandırmak için tasarlandı. Standalone API, Signal ve RxJS gibi paradigma araçlarının hangi senaryoda hangisinin seçileceği somut örneklerle çalışılır. NgModule'süz mimariye geçiş ve OnPush ile performans odaklı change detection birlikte ele alınır.
Eğitim sonunda katılımcı, Angular'ı "büyük SPA framework" basitliğinden çıkartıp mimari kararlar veren bir mühendis seviyesine ulaşır. SSR, hydration ve SEO sorunları; HttpInterceptor ile merkezi auth ve error yönetimi; Reactive Form ile karmaşık validasyon gibi pratikler eğitimin temelini oluşturur. Eğitim sırasında Angular dokümantasyonu temel referans olarak kullanılır.
Katılımcı Profili
Bu eğitim, Angular ile kurumsal web uygulaması geliştiren veya geçiş yapan rollere yöneliktir:
- Frontend Geliştiriciler: Angular ile SPA ve dashboard geliştiren mühendisler
- Full-stack Geliştiriciler: .NET veya Java backend ile uyumlu frontend katmanı kuranlar
- React Geliştiricileri: Angular tarafına geçiş veya çift framework deneyimi isteyenler
- UI Mühendisleri: Component library ve design system tasarlayan roller
- Frontend Teknik Liderler: Angular için kod standardı ve mimari kuran liderler
Ön Gereklilikler
Bu eğitime katılım için aşağıdaki temel yetkinlikler önerilir:
- JavaScript veya TypeScript temelleri (variable, function, async)
- HTML ve CSS ile arayüz geliştirme deneyimi
- Temel DOM ve tarayıcı çalışma mantığına aşinalık
- REST API ve JSON veri yapısıyla çalışma deneyimi
- Git ile sürüm kontrol akışına temel aşinalık
Süresi ve Tarihi
Süre: 4 gün. Bu süre standart program içindir; ek modüllere ve hedefe göre süre özelleştirilebilir.
Eğitim tarihleri ve saatleri, ekibinizin uygunluğuna göre birlikte planlanır.
Kazanımlar
Bu programın sonunda katılımcı, Angular'ı sadece framework olarak değil bir mimari disiplin olarak kullanır:
- Component, Service ve Module ayrımını gerçek proje yapısına oturtur
- Standalone API ile NgModule'süz, modern bir mimari kurabilir
- Signal ve RxJS'i çakıştırmadan, doğru senaryoda tek tek seçer
- Reactive Form ve AbstractControl ile karmaşık validasyonu temizler
- HttpInterceptor ile JWT, error handling ve loading state'i merkezileştirir
- Change Detection'ı OnPush ile manuel optimize eder ve nedenini açıklar
- SSR (Angular Universal) ve hydration ile SEO sorununu kapatır
Angular Eğitimi Konuları
1. Angular Felsefesi ve Sürüm Politikası
- Opinionated framework yaklaşımı ve library farkı
- LTS sürüm politikası ve 6 aylık ana sürüm akışı
- Angular CLI ile iskelet üretimi
- Workspace, project ve angular.json yapısı
2. TypeScript - Angular için Vazgeçilmez
- Statik tip ve interface ile sözleşme
- Decorator metadata sistemi ve Angular bağı
- Generic ve TypeAlias kullanımı
- Strict mode ve tip güvenliği kazanımları
- Class, constructor, access modifier
3. Component, Template ve Data Binding
- @Component decorator: selector, template, styles
- Interpolation, property binding, event binding
- Two-way binding ve ngModel
- @Input ve @Output ile component iletişimi
- Lifecycle hook'ları: OnInit, OnDestroy, OnChanges
- ViewChild, ContentChild ve template referansları
4. Direktifler - Yapısal ve Attribute
- Yapısal direktifler: *ngIf, *ngFor, *ngSwitch
- Yeni control flow: @if, @for, @switch
- Attribute direktifler: ngClass, ngStyle
- Custom direktif yazımı ve HostBinding
5. Pipe ve Veri Dönüşümü
- Hazır pipe: date, currency, decimal, async, json
- Pure ve impure pipe farkı (performans etkisi)
- Custom pipe yazımı
- Pipe chain ve okunabilirlik sınırı
6. Hierarchical Dependency Injection
- @Injectable ve providedIn: root, platform, any
- Hierarchical injector ağacı ve scope
- InjectionToken ve useValue, useFactory, useClass
- inject() function ve constructor alternatifi
- Multi provider ve plugin pattern
7. RxJS - First-Class Observable Pattern
- Observable, Observer, Subscription temelleri
- Subject, BehaviorSubject, ReplaySubject farkı
- Operatör seçimi: switchMap, mergeMap, concatMap, exhaustMap
- debounceTime, distinctUntilChanged ile typeahead
- Hata yönetimi: catchError, retry, retryWhen
- takeUntilDestroyed ve subscription leak önleme
8. HttpClient ve Backend Entegrasyonu
- HttpClient ve provideHttpClient kullanımı
- GET/POST/PUT/DELETE ile tip güvenli istek
- HttpInterceptor ile auth, logging, retry
- HttpParams ve query parameter inşası
- Hata yakalama ve user-friendly mesaj
9. Template-Driven Forms
- FormsModule kurulumu ve ngModel
- Template referans (#form="ngForm")
- Yerleşik validator: required, minlength, pattern
- Form submission ve değer erişimi
10. Reactive Forms ve Custom Validator
- FormControl, FormGroup, FormArray yapıları
- FormBuilder ile sade tanımlama
- Synchronous ve async custom validator yazımı
- Dinamik form alanları ve runtime kontrol ekleme
- valueChanges ve statusChanges akışı
- Cross-field validation pattern'i
11. Router - Lazy Loading ve Guards
- Route tanımı, parametre, query params
- Nested route, child route ve auxiliary outlet
- Lazy loading ile bundle splitting
- Functional guards: canActivate, canMatch
- Resolver ile route öncesi veri yükleme
12. Standalone API ve NgModule'den Ayrılış
- Standalone component, directive, pipe
- NgModule'den standalone'a migration
- bootstrapApplication ve provider yapısı
- imports array ile bağımlılık deklarasyonu
13. Signals - Reactive Primitive
- signal(), computed(), effect() fonksiyonları
- RxJS ile Signal arasındaki sınır
- Component state için Signal-based yaklaşım
- Signal input ve output
- toSignal, toObservable köprüleri
14. Change Detection ve Zone.js
- Zone.js'in role: async olay yakalama
- Default ve OnPush change detection stratejisi
- NgZone ve runOutsideAngular ile mikro-optimizasyon
- trackBy ile liste recycling
- Zoneless Angular yaklaşımı (deneysel)
15. State Management - NgRx ve Signal Store
- NgRx Store: Action, Reducer, Effect, Selector
- NgRx Effects ile yan etki yönetimi
- Component Store ile yerel state
- Signal Store: yeni nesil hafif state
- Memoization ve performans etkisi
16. Angular Material ve CDK
- Angular Material kurulumu ve tema sistemi
- Material bileşenleri: form field, table, dialog, snackbar
- CDK (Component Dev Kit) ile özelleştirme
- Layout, overlay, portal CDK alt modülleri
- Tailwind CSS entegrasyonu
17. Authentication ve Route Guard
- JWT tabanlı kimlik doğrulama akışı
- HttpInterceptor ile token ekleme ve refresh
- canActivate / canMatch ile yetki kontrolü
- Role-based UI ve directive bazlı yetki
- OAuth2 / OIDC entegrasyonu
18. Test - TestBed, Spectator, Cypress
- Karma + Jasmine ile unit test temelleri
- TestBed ile component test ortamı
- Spectator ile boilerplate azaltma
- Cypress ile end-to-end senaryo testleri
- Code coverage ve mutation testing
19. AOT Compile ve Build Optimizasyonu
- AOT (Ahead-of-Time) ve JIT derleme farkı
- Production build ve tree shaking
- Lazy chunk ve initial bundle ayrımı
- Source map ve bundle analyzer
- Service Worker ile PWA yapılandırması
20. SSR (Universal) ve Hydration
- Angular Universal ile server-side rendering
- Hydration ile client-side devralma
- SEO ve ilk açılış performansı
- TransferState ile sunucu-istemci veri paylaşımı
- Edge runtime ve serverless deploy seçenekleri
ANGULAR EĞİTİMİ ile İlgili
Sıkça Sorulan Sorular ve Cevapları
Signal ile RxJS arasında ne zaman hangisi seçilir?
Signal eşzamanlı (synchronous) state ve UI binding için ideal — değer okuma, computed, effect ile reactive primitif sağlar. RxJS asenkron stream, debouncing, mergeMap gibi karmaşık akış operasyonları için doğru. Modern Angular ikisini birlikte kullanır: state'i Signal'de, asenkron işlemi RxJS'te.
Standalone API ile NgModule arasındaki temel ayrım nedir?
NgModule declaration, imports, providers ve exports listeleri ile component organizasyonu sağlar. Standalone API component, directive ve pipe'ı tek başına bağımsız hale getirir — imports component'in kendi içinde tutulur. Angular 14+ standalone öneriyor; modüler proje yapısı sadeleşiyor ve lazy loading daha esnek oluyor.
Change Detection OnPush stratejisi neden manuel optimize sayılır?
Default strategy her zone event'inde tüm component tree'yi tarar — küçük projelerde sorun değil. OnPush yalnızca input referansı değişince veya event tetiklenince re-render eder. Immutable data pattern ile birlikte kullanılırsa CPU yükünü ciddi düşürür ama developer'ın referans değişimi disiplini gerekir.
Reactive Form ile Template-driven Form farkı nedir?
Template-driven form HTML'de ngModel ile tanımlanır, basit formlar için yeterlidir ama validation ve dinamik alan kontrolü kısıtlıdır. Reactive Form FormBuilder ile TypeScript tarafında tanımlanır; karmaşık validation, async validator ve dinamik FormArray için doğru. Kurumsal projeler genelde Reactive tercih eder.
Angular Universal SSR ile Next.js SSR arasındaki fark nedir?
Angular Universal sunucu tarafında Angular bootstrap eder ve HTML üretir; React'ın Next.js'inde olduğu gibi hydration tarafı modern Angular'da iyileşti. Next.js daha olgun ekosistem ve daha fazla optimizasyon sunar (ISR, edge runtime). Angular SEO ve initial paint için yeterli; SaaS dashboard'larda zaten gerek olmayabilir.
HttpInterceptor ile global error handling nasıl kurulur?
HttpInterceptor her HTTP isteğine middleware olarak girer. catchError ile response hataları yakalanır, 401'de logout, 5xx'te toast gibi merkezi davranış tek noktadan yönetilir. Loading state, JWT yenileme ve correlation ID gönderme de aynı interceptor'da toplanır.
