Konfigurasi Routing Dasar di Angular

Sekarang mari kita konfigurasi routing. Mari kita buat agar jika URL /aaaa/ diketik di bilah alamat browser, maka komponen pertama akan ditampilkan, dan jika /bbbb/ diketik, maka komponen kedua yang ditampilkan.

Konfigurasi seperti itu dilakukan di file app.routes.ts. Pertama-tama, kita perlu mengimpor komponen-komponen kita:

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

Dan sekarang perlu ditentukan URL mana yang sesuai dengan komponen mana. Untuk itu, perlu dibuat array objek khusus berisi rute (routes). Dalam setiap objek akan ada kunci path, yang di dalamnya diatur URL (tanpa garis miring di akhir), dan kunci component, yang di dalamnya diatur komponen yang akan ditampilkan pada URL tersebut:

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

Namun, pengaturan routing saja tidak cukup. Perlu ditentukan tempat di komponen induk untuk menampilkan komponen-komponen kita. Ini akan kita bahas dalam pelajaran berikutnya.

Konfigurasikan routing di file app.routes.ts.