Angular’da routing işlemleri, iki temel bileşen üzerine inşa edilir: Router ve RouterOutlet. Router, uygulamanızdaki URL’leri yönetirken, RouterOutlet, uygulamanızın bileşenlerini belirtilen yol üzerinde eşleştirir.
Routing işlemlerini başlatmak için öncelikle, uygulama modülünüze RouterModule’yu eklemeniz gerekir. RouterModule, uygulamanızın Router’ı kullanabilmesi için gerekli olan önemli bileşenleri içerir.
Routes adlı bir dizi oluşturmanız gerekiyor. Bu dizi, uygulamanızda hangi URL’lerin hangi bileşenlerle eşleştirileceğini belirtir. Örneğin:
|
1 2 3 4 5 6 7 |
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'products', component: ProductsComponent }, { path: 'products/:id', component: ProductDetailsComponent }, { path: 'about', component: AboutComponent }, { path: '**', component: PageNotFoundComponent } ]; |
Yukarıdaki örnekte, routes dizisi beş rotaya sahiptir. Path özelliği, URL’nin sonunda ne olacağını belirtirken, component özelliği, bu URL’ye gidildiğinde gösterilecek bileşeni belirtir.
- ‘/’ path’i, HomeComponent bileşeniyle eşleştirilir ve anasayfa olarak kullanılır.
- ‘/products’ path’i, ProductsComponent bileşeniyle eşleştirilir ve ürünlerin listelendiği bir sayfa olarak kullanılır.
- ‘/products/:id’ path’i, ProductDetailsComponent bileşeniyle eşleştirilir ve bir ürünün ayrıntılarını gösteren bir sayfa olarak kullanılır.
- ‘/about’ path’i, AboutComponent bileşeniyle eşleştirilir ve hakkımızda sayfası olarak kullanılır.
- ‘**’ path’i, PageNotFoundComponent bileşeniyle eşleştirilir ve hiçbir yolun eşleşmediği durumlarda kullanılır.
Routes dizisi tamamlandıktan sonra, uygulamanızda RouterOutlet bileşenini kullanarak rotalarınızı belirtilen bileşenlere yönlendirebilirsiniz. RouterOutlet, bir bileşenin içinde belirli bir yere yerleştirilir ve belirli bir URL için belirtilen bileşenin yüklenmesini sağlar.
|
1 |
<router-outlet></router-outlet> |
Yukarıdaki kod, RouterOutlet bileşeninin uygulamanızdaki yerini belirler. Bu bileşen, uygulamanızdaki diğer bileşenlerle birlikte kullanılabilir.
RouteLink bileşeni, uygulamanızdaki farklı sayfalar arasında geçiş yapmanızı sağlar. Bu bileşen, routerLink özelliği kullanılarak belirtilen URL’ye yönlendirir.
|
1 2 3 4 5 |
<nav> <a routerLink="/" routerLinkActive="active">Ana Sayfa</a> <a routerLink="/products" routerLinkActive="active">Ürünler</a> <a routerLink="/about" routerLinkActive="active">Hakkımızda</a> </nav> |
Route parametreleri, özel URL’lerle çalışmanıza olanak tanır. Bu parametreler, URL’nin sonundaki verileri yakalamanıza ve ilgili bileşene aktarmanıza olanak tanır. Örneğin:
|
1 |
{ path: 'products/:id', component: ProductDetailsComponent } |
Yukarıdaki rotada, ‘:id’ parametresi, URL’nin sonunda bir sayı alır ve ProductDetailsComponent bileşenine aktarılır.
|
1 |
<a routerLink="/products/1">Ürün Detayları</a> |
Yukarıdaki kod, URL’nin sonundaki ‘:id’ parametresini ‘1’ olarak ayarlar ve ProductDetailsComponent bileşeninde kullanılır.
CanActivate arayüzü, belirli sayfaların erişimini sınırlamanıza olanak tanır. Örneğin, kullanıcıların yalnızca giriş yaptıktan sonra ürün ekleme sayfasına erişmesine izin verebilirsiniz. CanActivate arayüzü, kullanıcı erişiminin engellenmesi durumunda yapılacak eylemleri belirlemenize olanak tanır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree { // Eğer kullanıcı giriş yapmışsa true döndürür // Eğer kullanıcı giriş yapmamışsa false veya UrlTree döndürür } } |
Yukarıdaki kod, CanActivate arayüzünü ve bir örnek AuthGuard sınıfını gösterir. Bu sınıf, kullanıcının giriş yapmış olup olmadığını kontrol eder ve giriş yapmamış kullanıcılara belirtilen sayfaya erişimi engeller.
