Angular ile Routing İşlemleri

Merhaba,
Bu yazımda Angular ile routing işlemlerinden bahsedeceğim. Componentler arası yönlendirme işlemi yapmak için Angular’ın kendi mimarisi içinde yer alan Routing yapısını kullanmak oldukça basittir.

Angular projemizde HTML sayfamızda <router-outlet></router-outlet>
tagleri arasında aşağıda yapacağımız routing işlemleri gerçekleşmektedir.

Öncelikle module.ts dosyasımıza RouterModule, Router modülünü import etmemiz gerekmektedir.

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

import { LoginComponent } from './login/login.component';
import { ProfileComponent} from './profile/profile.component';
import { RegisterComponent } from './register/register.component';
import { 404Component } from './404/404.component';

Aynı zamanda routing işlemlerini module.ts sayfasında gerçekleştireğim için kullanacağım componentlerin de bu sayfada import edilmesi gerekmektedir.

Şimdi yönlendirme işleminin nasıl kullanılacağına ve detaylarına bakalım.

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  },
  { path: '**', redirectTo: '404Component' }
];

Her yapacağımız route işleminde belirtmemiz gereken bir path, component bulunmaktadır.

Path: Yönlendirilecek olan adresi belirtmemiz gerekmektedir ve string bir değer vermeliyiz.

Component: Path propertysine bir değer verdiğimize göre artık bu değer hangi componenti çağıracak bu tanımlamamız gerekiyor.

PathMatch: Default değeri ‘prefix’tir. Prefix Url’in başlangıçta eşleştiği ilk yolu seçer. Fakat sonra Url’in geri kalanında alt yolları eşleştirmeye devam eder. Biz ‘full’ olarak bir değer verdik. Bu ise Url’in tamamının eşleşmesini istiyoruz demektir.

En son satırda path için verdiğimiz ‘**’ karakterli bi route işlemi gözükmekte. Bu karakterler daha önce tanımlanan hiçbir path ile eşleşmezse route bu yolu seçer. Biz de burada herhangi bir sayfa bulunamadığı takdirde 404 adında bir component oluşturup yönlendirmeyi tamamladık.

Angular ile Routing işlemleri en temel haliyle bu şekildedir. Bir projede birden fazla routing module.ts sayfası kullanabilirsiniz. Örnek vermem gerekirse ben sadece user componentimin içinde yönlendirme yapmak istiyorum ve dosyalarım bu componentimin içinde. Burada da router-module.ts adında bir sayfa oluşturup yönlendirme işlerini sadece bu componente özel route işlemleri yapabilirim.

Yeni başlayanlar için umarım yararlı bir makale olmuştur :)

Herkese iyi çalışmalar.