Latihan 1: Routing Dasar Angular — Angular

Latihan 1 dari materi Routing Dasar Angular di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya AppComponent dengan imports: [RouterLink, RouterOutlet] dan template kosong. Biarkan imports-nya, lalu isi template:

Satu <nav>.
Di dalamnya dua tautan router: <a routerLink="/">Home</a> dan <a routerLink="/about">About</a>. Pakai atribut routerLink, bukan href biasa.
Di bawah <nav>, <router-outlet />.

Latihan ini belum punya daftar rute, jadi kalau tautannya diklik di editor, console menulis NG04002: Cannot match any routes. Itu wajar dan gak dinilai.

Yang dicek:

Ada <nav> di halaman.
Ada minimal 2 <a> di halaman, dan minimal 2 tautan di dalam <nav> yang punya routerLink (atau href).
Kodenya memuat routerLink.

Hint

Tautan antar halaman dibungkus satu <nav>, alamatnya ditulis dengan atribut routerLink supaya halamannya gak dimuat ulang, dan isi halamannya muncul di <router-outlet />.
Di template: <nav> berisi dua <a> dengan routerLink="/" dan routerLink="/about", lalu <router-outlet /> di bawahnya. RouterLink dan RouterOutlet sudah ada di imports.
<nav><a routerLink="/">Home</a> <a routerLink="/about">About</a></nav> <router-outlet />

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Routing Dasar Angular — Angular

Hint

Memperbarui Aplikasi