Angular 4 : Menggunakan Router
Assalamu’alaikum Wr. Wb
pada kesempatan ini, saya ingin berbagi bagaimana menggunakan router.
Kita akan membuat aplikasi sederhana dimana aplikasi tersebut dapat berpindah halaman sesuai dengan kemauan kita.
kita akan membuat halaman1, halaman2, dan halaman3.
Aplikasi yang akan kita buat nanti memiliki tombol di setiap halaman, dan dapat berpindah halaman apabila kita menekan tombol tersebut.
Baiklah kita mulai…
- Pertama kita membuat starter project angular 4 seperti biasa.
ng new belajar-router
2. Kemudian kita buat folder components di dalam app agar terlihat rapi.
3. Dalam folder tersebut buat 3 komponen, (Halaman1, Halaman2, Halaman3).
ng g c halaman1
dst.
kemudian akan muncul folder berikut:
4. Setelah itu, kita buat app.router.module.ts di dalam folder app, dan tulis kode dibawah:
Untuk membuat router kita memerlukan komponen RouterModule, dan Routes.
Routes berisikan route yang kita definisikan.
terdapat { path : ‘’, component: Halaman1Component }, maksudnya adalah secara default mksdnya ketika melakukan request ke http://localhost:4200, maka akan mengarahkan ke halaman1.
Kemudian untuk mengkonfigurasinya kita masukkan routes yang kita definisikan tadi ke RouterModule.
Dan jangan lupa menambahkan exports agar di app.module.ts dapat menggunakan RouterModule tanpa harus mengimport lagi di app.module.ts :D.
Keterangan lebih lanjut sudah saya masukkan dalam code sebagai komentar.
5. Jangan lupa kita panggil app.router.module.ts ke app.module.ts :D
Berikut kodenya :
6. Tambahkan <router-outlet></router-outlet> pada component utama. Jadi route2 tersebut berjalan di component utama didalam <router-outlet></router-outlet>
7. Router sudah berjalan, kalian bisa cek di http://localhost:4200/halaman1, http://localhost:4200/halaman2, atau http://localhost:4200/halaman3.
8. Kita tambahkan tombol pada setiap komponen, dan berikan fungsi untuk mengarahkan router ke url yang kita inginkan.
di paramater constructor terdapat private router: Router, itu digunakan untuk menginisialisasi router.
Dan pada button ditambahkan event click yang akan mengacu pada fungsi onNextHalaman(); dimana fungsi tersebut berisi fungsi yang mengarahkan url ke /halaman2.
Lakukan tersebut pada komponen halaman 2, dan halaman3.
9. Selesai.
Ketika dijalankan maka akan menjadi seperti ini
Sekian tutorial singkat yang dapat saya sampaikan
Sebagai Bahan Belajar dapat dilihat source codenya di https://github.com/dhanarJkusuma/Tutorial-Angular4/tree/t/membuat-route
Terima Kasih sudah membaca ^_^
Wassalamu’alaikum Wr.Wb
