Routing Dasar Angular — Angular

Angular Router memungkinkan navigasi antar halaman tanpa reload. Konfigurasi Route // app.routes.ts export const routes: Routes = [ { path: "", component…

Router membuat satu aplikasi Angular punya beberapa halaman, masing-masing dengan alamatnya sendiri (/menu, /pesanan), dan berpindah di antaranya tanpa memuat ulang halaman. Bayangin warung Martabak Bang Jali punya ruang Menu dan ruang Pesanan. Penerima tamu memegang daftar "alamat ini, ruang yang itu" (routes), dan cuma ada satu meja tempat isi ruangnya disajikan (<router-outlet>). Pindah lewat pintu dalam (routerLink) itu cepat dan barang bawaanmu tetap di tangan. Keluar lewat pintu depan lalu masuk lagi (<a href>) berarti semuanya mulai dari awal.

🧪 Tebakan cepat: Keranjang dari pelajaran Services sudah berisi 2 martabak. Kamu klik <a href="/pesanan">Pesanan</a>, bukan routerLink. Halaman Pesanan menampilkan berapa item? Jawabannya ada di bagian "routerLink vs href".

Daftar rute: alamat ke komponen

// src/app/app.routes.ts
import { Routes } from '@angular/router'
import { MenuPage } from './menu/menu'
import { PesananPage } from './pesanan/pesanan'
import { TidakDitemukan } from './tidak-ditemukan/tidak-ditemukan'

export const routes: Routes = [
  { path: '', redirectTo: 'menu', pathMatch: 'full' },
  { path: 'menu', component: MenuPage },
  { path: 'pesanan', component: PesananPage },
  { path: '**', component: TidakDitemukan },
]

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideHttpClient } from '@angular/common/http'
import { provideRouter } from '@angular/router'
import { routes } from './app.routes'

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()],
}
Alamat Yang tampil
/ dialihkan ke /menu, jadi MenuPage
/menu MenuPage
/pesanan PesananPage
/promo TidakDitemukan

router-outlet: tempat halamannya muncul

// src/app/app.ts
import { Component } from '@angular/core'
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterLink, RouterLinkActive, RouterOutlet],
  template: `
    <h1>Martabak Bang Jali</h1>
    <nav>
      <a routerLink="/menu" routerLinkActive="aktif">Menu</a>
      <a routerLink="/pesanan" routerLinkActive="aktif">Pesanan</a>
    </nav>
    <router-outlet />
  `,
})
export class App {}

Latihan pertama memakai bentuk yang sama: <nav> berisi <a routerLink="/">Home</a> dan <a routerLink="/about">About</a>, lalu <router-outlet />. Latihan kedua menulis daftarnya: export const routes: Routes = [...] dengan '' ke HomeComponent, 'about' ke AboutComponent, dan '**' ke NotFoundComponent.

routerLink vs href

routerLink="/pesanan" <a href="/pesanan">
Halamannya gak dimuat ulang dimuat ulang dari server
JavaScript aplikasi tetap jalan diunduh dan dijalankan lagi dari nol
KeranjangService instance yang sama, isinya tetap dibuat lagi, kosong
Pesanan menampilkan Keranjang: 2 item Keranjang: 0 item

href membuat browser meninggalkan aplikasi dan memintanya lagi ke server. Semua service dibuat ulang, jadi keranjangnya kosong: Pesanan menampilkan 0 item. Itu jawaban tebakannya. Pakai routerLink untuk halaman di dalam aplikasi, dan href untuk alamat di luar aplikasi (Instagram Bang Jali, file PDF menu).

Rute kosong, pathMatch, dan wildcard

Pindah halaman dari kode

Sesudah pesanan terkirim, pindah ke /pesanan tanpa menunggu klik:

private router = inject(Router)

kirim() {
  this.router.navigate(['/pesanan'])
}

navigate(['/pesanan']) dan navigateByUrl('/pesanan') sama-sama pindah tanpa memuat ulang, persis seperti routerLink.

⚠️ Jebakan yang sering ketemu

TL;DR: Router memetakan alamat ke komponen lewat Routes ({ path: 'menu', component: MenuPage }) yang dipasang dengan provideRouter(routes), dan komponen yang cocok muncul di <router-outlet />. routerLink="/pesanan" berpindah tanpa memuat ulang, jadi isi service seperti keranjang tetap ada; <a href> memuat ulang seluruh aplikasi dan semuanya mulai dari nol. routerLinkActive menandai tautan yang aktif. Rute kosong yang dialihkan butuh pathMatch: 'full', '**' ditaruh paling bawah untuk halaman 404, dan router.navigate(['/pesanan']) pindah halaman dari kode.

Yang akan kamu pelajari