Mengonfigurasi rute di Angular

Pelajaran ini memperkenalkan perutean Angular, yaitu cara berpindah antar tampilan dan mengelola alamat di aplikasi Anda.

Apa itu perutean?

Perutean membantu Anda berpindah antara berbagai komponen atau halaman dalam aplikasi Angular berdasarkan alamat.

Menyiapkan modul perutean

Buat modul perutean saat memulai proyek atau nanti menggunakan Angular CLI:

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

Mendefinisikan rute

Rute didefinisikan sebagai larik jalur yang ditautkan ke komponen:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Outlet perute

Gunakan <router-outlet></router-outlet> untuk menampilkan komponen yang cocok secara dinamis berdasarkan rute.

<router-outlet></router-outlet>

Bernavigasi dengan routerLink

Berpindahlah antar tampilan menggunakan direktif routerLink:

<a routerLink="/home">Home</a>

Bernavigasi secara terprogram

Anda juga dapat berpindah secara terprogram menggunakan layanan perute:

this.router.navigate(['/home']);

Rute pola bebas

Tangani jalur yang tidak terdefinisi menggunakan rute pola bebas untuk menampilkan halaman 404 khusus:

{ path: '**', component: PageNotFoundComponent }

Ringkasan

Sekarang Anda memahami dasar-dasar perutean dan dapat mengonfigurasi rute di aplikasi Angular secara efektif. Kerja bagus!