Gelişmiş Routing
Gelişmiş Routing, Angular uygulamalarında tek sayfa uygulamalarının (SPA) karmaşık navigasyon ihtiyaçlarını yönetmek için kritik bir özelliktir. Basit routing ile sadece temel sayfa geçişleri yapılabilirken, gelişmiş routing ile parametreli yollar, çocuk (nested) yollar, lazy loading, route guards ve dinamik veri senkronizasyonu gibi ileri seviye senaryolar kolayca yönetilebilir. Bu özellikler, kullanıcı deneyimini iyileştirirken uygulamanın mimarisini de daha sürdürülebilir ve modüler hâle getirir.
Gelişmiş Routing, uygulamanın büyüklüğü arttığında ve farklı kullanıcı rollerine, güvenlik gereksinimlerine ya da dinamik içerik yönetimine ihtiyaç duyulduğunda devreye girer. Angular bileşenleri, veri akışı, state management ve lifecycle konseptleri ile entegre çalışarak, navigasyonun hem performanslı hem de güvenli olmasını sağlar.
Bu rehberde, okuyucular parametreli yolların kullanımı, programatik navigasyon, lazy loading, route guards ve nested routing uygulamalarını öğrenecek. Ayrıca state yönetimi ve performans optimizasyonu konularında iyi uygulamalar gösterilecek. Amacımız, Angular ile güçlü, modüler ve yüksek performanslı SPA’lar geliştirebilecek bilgi ve becerileri kazandırmaktır.
Temel Örnek
typescriptimport { NgModule, Component } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-home',
template: `<h1>Ana Sayfa</h1>`
})
export class HomeComponent {}
@Component({
selector: 'app-profile',
template: `<h1>Profil</h1><p>Kullanıcı ID: {{ userId }}</p>`
})
export class ProfileComponent {
userId: string | null = null;
constructor(private route: ActivatedRoute) {
this.userId = this.route.snapshot.paramMap.get('id');
}
}
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'profile/:id', component: ProfileComponent }
];
@NgModule({
declarations: [HomeComponent, ProfileComponent],
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}Bu temel örnekte iki bileşen tanımlanmıştır: HomeComponent ve ProfileComponent. 'profile/:id' rotası, URL üzerinden kullanıcı ID parametresi alır ve bu değer ActivatedRoute aracılığıyla ProfileComponent içinde userId değişkenine atanır. Böylece prop drilling’e gerek kalmadan dinamik veri aktarımı sağlanır.
RouterModule.forRoot(routes), uygulamanın SPA mantığında sayfa yenilenmeden navigasyon yapmasını sağlar. Bu yapı, daha karmaşık senaryolar için temel oluşturur: lazy loading, nested routing ve route guards gibi özellikler eklenebilir. Ayrıca state yönetimi ve performans optimizasyonu konularında Angular’ın en iyi uygulamaları takip edilmiş olur.
Pratik Örnek
typescriptimport { Injectable, Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class UserService {
private userSubject = new BehaviorSubject<{ id: string; name: string }>({ id: '1', name: 'Ahmet' });
user$ = this.userSubject.asObservable();
updateUserName(name: string) {
const current = this.userSubject.value;
this.userSubject.next({ ...current, name });
}
}
@Component({
selector: 'app-user-detail',
template: ` <div *ngIf="user"> <h2>{{ user.name }}</h2> <p>Kullanıcı ID: {{ user.id }}</p> <button (click)="changeName()">Adı Değiştir</button> </div>
`
})
export class UserDetailComponent implements OnInit, OnDestroy {
user!: { id: string; name: string };
private subscription!: Subscription;
constructor(private route: ActivatedRoute, private userService: UserService, private router: Router) {}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.subscription = this.userService.user$.subscribe(user => {
if (user.id === id) {
this.user = user;
} else {
this.router.navigate(['/']);
}
});
}
changeName() {
this.userService.updateUserName('Mehmet');
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}Pratik örnekte, UserService BehaviorSubject kullanarak kullanıcı bilgisini yönetir ve bileşenler arası veri paylaşımını sağlar. UserDetailComponent, rota parametresi ile kullanıcıyı doğrular ve kullanıcı ID eşleşmezse Router.navigate ile ana sayfaya yönlendirir. Bu yapı, state yönetimini reaktif şekilde gerçekleştirir, Change Detection mekanizması ile gereksiz render’ları önler ve ngOnDestroy ile memory leak riskini ortadan kaldırır.
Bu yaklaşım, kullanıcı profilleri, dashboard’lar veya parametreli veri gösterimi gibi gerçek dünya senaryolarında yaygın olarak kullanılabilir.
Angular’da gelişmiş routing için en iyi uygulamalar, state yönetimini servisler üzerinden merkezi hale getirmek, prop drilling’den kaçınmak, state’i immutably güncellemek ve abonelikleri doğru yönetmektir. Lazy loading kullanımı performansı artırır, route guards ile güvenlik sağlanır.
Yaygın hatalar arasında doğrudan state mutasyonu, abonelikleri temizlememek ve karmaşık component yapıları yer alır. Performans için ChangeDetectionStrategy.OnPush uygulanabilir, modüller ayrılarak büyük uygulamalarda yüklenme optimizasyonu sağlanabilir. Güvenlik açısından CanActivate ve CanDeactivate guards ile rotalar korunmalı ve veri doğrulama servislerde yapılmalıdır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| RouterModule | Rota tanımlama ve yönetim | imports: [RouterModule.forRoot(routes)] |
| ActivatedRoute | Rota parametrelerine erişim | constructor(private route: ActivatedRoute) |
| BehaviorSubject | Reaktif state yönetimi | private userSubject = new BehaviorSubject<User>(initialUser) |
| ngOnInit/ngOnDestroy | Lifecycle ve abonelik yönetimi | ngOnInit() { ... } ngOnDestroy() { ... } |
| Router.navigate | Programatik navigasyon | this.router.navigate(['/profile', userId]) |
Gelişmiş Routing, Angular uygulamalarında dinamik navigasyon, state senkronizasyonu ve performans optimizasyonu sağlar. Önemli noktalar, merkezi state yönetimi, parametreli ve nested route kullanımı, programatik yönlendirme ve aboneliklerin doğru yönetimidir. Bu uygulamalar sayesinde modüler, tekrar kullanılabilir ve ölçeklenebilir SPA’lar geliştirmek mümkündür.
Önerilen sonraki konular arasında nested routing, lazy loading, route guards ve resolvers yer almaktadır. Bu konuların öğrenilmesi, kullanıcı deneyimini ve uygulama performansını artıracaktır. Ek kaynaklar Angular resmi dokümantasyonu ve örnek SPA projeleridir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek