Angular ile Router Kullanımı

Adı : Angular ile Router Kullanımı

Angular, modern web uygulamaları geliştirmek için kullanılan popüler bir JavaScript framework'tür. Angular, geliştiricilere tek sayfa uygulamaları oluşturmak ve yönetmek için gelişmiş bir altyapı sunar. Bu bağlamda, Angular Router, uygulamanızda gezinme ve yönlendirme işlemlerini sağlamak için kullanılan bir modüldür. Bu yazıda, Angular ile Router kullanımını detaylı bir şekilde ele alacağız ve örneklerle açıklayacağız.

Angular Router Nasıl Çalışır?

Angular Router, uygulamanızın farklı bileşenleri arasında gezinme işlemlerini yönetir. Router, URL'ye dayalı bir eşlemeyi kullanır ve belirli bir URL'ye yapılan istekleri yönlendirilen bileşene yönlendirir. Bu sayede, uygulamanızdaki sayfalar arasında geçiş yapabilirsiniz. Angular Router, yönlendirmeleri yönetmek için Route nesnelerini kullanır. Bu nesneler, URL'leri bileşenlere bağlamak için kullanılır.

Router Bileşenleri

Angular Router, bir dizi bileşen kullanır. Bu bileşenler şunlardır:

1. Router Outlet: Router Outlet, yönlendirilen bileşenin görüntüleneceği alanı temsil eder. Yani, yönlendirilen bileşenin HTML'inin yerleştirileceği bir yerdir. Router Outlet, uygulamanın ana bileşeninde tanımlanır.

2. Router Link: Router Link, kullanıcıların belirli bir bileşene gitmek için tıklamasını sağlayan bir yönlendirme bağlantısıdır. Router Link, HTML içinde kullanılır ve belirli bir URL'ye yönlendirme işlemini gerçekleştirir.

3. Route Config: Route Config, uygulamadaki URL'lere yönlendirmeleri yapmanızı sağlar. Route Config, uygulamanın kök modülü (app.module.ts) içinde tanımlanır ve her bir yönlendirmeyi belirler.

Router Modülünü Ekleme

Angular Router'ı kullanmaya başlamak için öncelikle AppModule dosyasınıza Router modülünü eklemeniz gerekmektedir. AppModule dosyasına şu kodu ekleyin:

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
// Yönlendirmeler burada tanımlanır
];

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


Yönlendirme Tanımlama

Yönlendirmeleri tanımlamak için, öncelikle Routes dizisini kullanarak bir route config oluşturmanız gerekmektedir. Bu konfigürasyonu AppModule içine ekleyebilirsiniz. Örneğin:

const routes: Routes = [
{ path: '', component: HomeComponent