Açısal Temel Bilgiler, Angular ile ilgili temel kavramları içerir. Yönlendirme, Angular uygulamalarında kullanılan önemli bir kavramdır. Yönlendirme, bir URL’yi bir bileşene eşleştirmeye ve kullanıcının belirli bir bileşene erişmek için URL’yi kullanmasına olanak tanır.
Angular uygulamasında yönlendirme eklemek için şu adımları izleyebilirsiniz:
İlk olarak, @angular/router paketini projenize ekleyin. Bu paket, Angular’da yönlendirme işlemlerini gerçekleştirmek için kullanılan temel pakettir.
Yönlendirme işlemlerini gerçekleştirmek için app.module.ts dosyasını açın ve RouterModule.forRoot() yöntemini çağırın. Bu yöntem, ana yönlendiriciyi yapılandırmanıza ve başlangıç noktanızı belirlemenize olanak tanır.
import { RouterModule } from ‘@angular/router’;
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
...
})
export class AppModule { }
Daha sonra, yönlendirilecek bileşenleri tanımlamak için bir rota tanımı oluşturmanız gerekir. Rota tanımı, bir URL’yi bir bileşene eşleştiren nesnedir. Rota tanımları, genellikle app-routing.module.ts dosyasında tanımlanır.
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { HomeComponent } from ‘./home/home.component’;
import { AboutComponent } from ‘./about/about.component’;
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Yukarıdaki örnek, iki rota tanımı içerir. İlk tanım, boş bir URL’yi HomeComponent bileşenine eşleştirirken, ikinci tanım /about URL’sini AboutComponent bileşenine eşleştirir.
Son adım olarak, yönlendirme bağlantılarını uygulamanızın bileşenlerinde kullanabilirsiniz. Yönlendirme bağlantıları, routerLink özelliği kullanılarak oluşturulur. Bu özelliğe bağlantı URL’si verilir ve bağlantıya tıklandığında ilgili bileşene yönlendirilirsiniz.
<a routerLink=”/”>Home</a>
<a routerLink=”/about”>About</a>
Yukarıdaki örnekte, iki yönlendirme bağlantısı oluşturulmuştur. Birincisi, ana sayfaya yönlendirirken, ikincisi about sayfasına yönlendirir.