Angular Routing: Sayfa Yönlendirmesi ve İleri Düzey Konular

Angular, kullanıcıların farklı sayfalar arasında gezinmelerini sağlamak için güçlü bir yönlendirme sistemi sunar. Bu blog yazısında, Angular’da yönlendirme konusunu ele alacak ve sayfa yönlendirme temelleri ile birlikte daha ileri düzey konuları inceleyeceğiz. Aşağıda, Angular yönlendirme ile ilgili bazı konuları örneklerle ele alacağız.

• Sayfa Yönlendirmesi: Angular’da sayfa yönlendirmesi, kullanıcının belirli bir URL’ye eriştiğinde ilgili bileşenin yüklenmesini sağlar. RouterModule modülünü kullanarak yönlendirme yapılandırmasını yapabiliriz. İşte bir örnek:

// app-routing.module.ts dosyası
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Yukarıdaki örnekte, boş URL’ye erişildiğinde HomeComponent, “/about” URL’ye erişildiğinde ise AboutComponent yüklenir.

• Parametre Aktarımı: Angular yönlendirmesi ile sayfalara parametreler aktarabiliriz. Bu, dinamik içerik oluşturmak veya sayfalar arasında veri paylaşmak için kullanışlıdır. İşte bir örnek:

// app-routing.module.ts dosyası
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductComponent } from './product.component';
import { ProductDetailComponent } from './product-detail.component';

const routes: Routes = [
  { path: 'products', component: ProductComponent },
  { path: 'products/:id', component: ProductDetailComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Yukarıdaki örnekte, “/products” sayfasında ürünleri listeleyen bir bileşen var ve “/products/:id” sayfasında ise belirli bir ürünün detaylarını gösteren bir bileşen bulunuyor. “:id” parametresi, URL’de belirli bir ürünün kimliğini temsil eder.

• Güvenlik Önlemleri: Angular’da yönlendirme ile güvenlik önlemleri almak önemlidir. Yetkilendirilmemiş kullanıcıları korumak ve erişim kontrolü yapmak için CanActivate, CanDeactivate gibi koruyucu yolları kullanabiliriz. İşte bir örnek:

// auth.guard.ts dosyası
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Yukarıdaki örnekte, AuthGuard adında bir koruyucu yol oluşturulmuş. canActivate metodunda, kullanıcının oturum açmış olup olmadığı kontrol edilir. Oturum açmamış kullanıcılar “/login” sayfasına yönlendirilir.

• Dinamik Yönlendirme: Angular’da yönlendirme yapısını programatik olarak yönetebiliriz. Bunu, yönlendirme işlemlerini tetikleyen kullanıcı etkileşimlerine veya uygulama durumuna bağlı olarak kullanabiliriz. İşte bir örnek:

// product.component.ts dosyası
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
selector: 'app-product',
template: `
<h1>Ürünler</h1>
<button (click)="goToProductDetail(1)">Ürün 1'e Git</button>
`
})
export class ProductComponent implements OnInit {
constructor(private router: Router) {}

goToProductDetail(productId: number) {
this.router.navigate(['/products', productId]);
}

ngOnInit() {}
}

Yukarıdaki örnekte, ProductComponent adında bir bileşen var ve bir düğmeye tıklandığında goToProductDetail fonksiyonuyla dinamik olarak ürün detay sayfasına yönlendiriliyoruz.

Sonuç: Angular yönlendirme, kullanıcıların uygulamada farklı sayfalar arasında gezinmesini sağlar. Bu blog yazısında, sayfa yönlendirmesi temellerini ele aldık ve parametre aktarımı, güvenlik önlemleri ve dinamik yönlendirme gibi daha ileri düzey konuları örneklerle incelledik. Angular yönlendirme ile uygulamanızın kullanıcı deneyimini iyileştirebilir ve daha karmaşık navigasyon senaryolarını yönetebilirsiniz.

Umarım faydalı bir yazı olmuştur