Angular Routing Nedir?

Merhaba arkadaşlar, bu yazımda sizlere Angular Routing Nedir? konusundan bahsetmeye çalışacağım.

Angular routing konusunu kısaca anlatmak gerekirse ilgili sayfalarımızı oluşturmak için bir routing tanımlaması gerçekleştiririz. Routing tanımlamasından kastımız, bir ana sayfamız var, bir de listeleme yaptığımız sayfamız var diyelim. Bu iki sayfanın içeriği de haliyle farklı olması gerekir. Bu işlemleri de sağlamak istediğimizde url olarak /home anasayfayı gösterebilir. /list dediğimizde de ilgili listeleme sayfamızı gösterebilir. Bu işlemleri sağlayabilmesi için de Routing üzerinde tanımlamaları yapmamız gerekmektedir. Tanımlamaları yaptığımızda, URL’de /home görüldüyse eğer sen git home.component dosyamızın içeriğini göster. Eğer başka bir şey görüldüyse ilgili component’i hangisi ise yani tanımlamasında hangi component belirtildiyse sen git o component dosyasının içeriğini göster. Routing konusunu kısaca bu şekilde söyleyebiliriz.

Şimdi örnekler ile bir routing tanımlaması gerçekleştirelim.

Projemize Routing Ekleme

Projemize routing dosyamızı eklemek için aşağıdaki komutu kullanacağız.

ng generate module app-routing — flat — module=app

Bu komutu terminal üzerinden çalıştırdığımızda bir adet app-routing.module.ts dosyası oluşturulacaktır. Komut ile bir module oluşturuyoruz ve ismine de AppRoutingModule diyoruz. Ek olarak oluşturduğumuz bu modülü de bizim app.module dosyamıza import etmemizi belirtiyoruz.

Bu işlemden sonra app-routing.module.ts dosyamızı açıyoruz ve tanımlamalarımızı yapmaya başlıyoruz.

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

const routes: Routes = [
  {path:"", component:HomeComponent, pathMatch:"full"},
  {path:"home", component:HomeComponent },
  {path:"list", component:ListComponent }
];

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

Evet, 3 adet bir tanım gerçekleştirdik. Bu routes tanımlarını da bir sabit olarak yaptık. İlk tanımlamamızda ise path değerimiz boş olarak görünmektedir. Bu değerin boş olarak kalması, url’de bir değer yok ise sen git direkt olarak home.component dosyamızın içeriğini bize göster. Aslında ilk olarak açılan sayfamız home olacaktır ve url’de farklı bir şey geldiğinde o tanım burada bulunmadığından bizi tekrardan home içeriğine yönlendirecektir.. Onun dışında da home ve list olarak 2 tanım gerçekleştirdik.

Değerlerimizi tanımladık ve app-module.ts dosyamızda da imports içerisine AppRoutingModule dosyamızı yazdık. Zaten terminal üzerinden yukarıdaki kodu çalıştırdığımızda bu işlemi de gerçekleştirmiştik. Terminal üzerinden bu işlemi yapmazsak eğer app-module.ts dosyamız içerisinde de bu routing tanımını yazmamız gerekmektedir.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,

    ListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
]
})
export class AppModule { }

Angular ile routing işlemlerini yukarıdaki gibi gerçekleştirebilirsiniz.

Angular Routing Nedir? konusu ile ilgili anlatacaklarım buraya kadar.

Angular.IO üzerindeki örnekleri de incelemek isterseniz eğer buradan routing sayfasına gidebilirsiniz.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…