Angular'da Temel Routing Yapılandırması

Şimdi routing'i yapılandıralım. Tarayıcının adres çubuğuna URL olarak /aaaa/ yazıldığında ilk bileşenin, /bbbb/ yazıldığında ise ikinci bileşenin görüntülenmesini sağlayalım.

Bu yapılandırma app.routes.ts dosyasında yapılır. Öncelikle bileşenlerimizi içe aktarmamız gerekiyor:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

Şimdi hangi URL'nin hangi bileşene karşılık geldiğini belirtmemiz gerekiyor. Bunun için, route'lar (yollar) içeren özel bir nesne dizisi oluşturmalıyız. Her nesnede, URL'yi (son eğik çizgiler olmadan) belirten bir path anahtarı ve bu URL'de hangi bileşenin görüntüleneceğini belirten bir component anahtarı olacaktır:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

Ancak, routing ayarları tek başına yeterli değildir. Ana bileşende, bileşenlerimizin nereye yükleneceğini belirtmemiz gerekiyor. Bununla bir sonraki derste ilgileneceğiz.

app.routes.ts dosyasında routing'i yapılandırın.