Routing Dasar di Angular — CompileDaily Study

Penjelasan

Routing Angular didefinisikan sebagai array objek {path, component} di file app.routes.ts, didaftarkan ke aplikasi lewat provideRouter() di app.config.ts. Navigasi antar halaman tanpa reload memakai directive routerLink di template, dan <router-outlet> menandai TEMPAT halaman aktif dirender.

Contoh Konsep

// app.routes.ts
import { Routes } from '@angular/router';
import { BerandaComponent } from './beranda.component';
import { TentangComponent } from './tentang.component';

export const routes: Routes = [
    { path: '', component: BerandaComponent },
    { path: 'tentang', component: TentangComponent },
];

// Di template induk (app.component.ts):
// <nav>
//   <a routerLink="/">Beranda</a>
//   <a routerLink="/tentang">Tentang</a>
// </nav>
// <router-outlet></router-outlet>

Praktikum

Buat dua component: KontakComponent dan LayananComponent. Daftarkan keduanya di array routes pada path 'kontak' dan 'layanan', dan tulis contoh routerLink navigasi ke masing-masing.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

SELALU pakai routerLink="..." untuk navigasi internal, JANGAN pakai href="..." biasa — sama alasannya dengan React Router/Vue Router, href memicu RELOAD PENUH halaman, sedangkan routerLink berpindah halaman tanpa reload.