Modifikasi Routing pada Angular
- Pada sebuah SPA, semua fungsi aplikasi berada di dalam satu halaman HTML.
- Saat seorang pengguna mengakses fitur dari aplikasi yang dibuat, browser perlu melakukan proses rendering hanya pada bagian yang penting untuk user.
- Routing pada angular berfungsi untuk memberi tahu browser, bagian mana dari SPA yang akan diakses oleh user.
- Routing juga digunakan oleh user untuk melakukan navigasi di seluruh bagian aplikasi yang dibuat.
- Routing juga dapat digunakan untuk menjaga aplikasi dari aksi user yang tidak diduga maupun yang tidak diharapkan.
Berikut adalah latihan untuk modifikasi routing pada angular.
Latihan pertama adalah menambah komponen pada proyek Angular.
- Buka folder proyek yang sudah dibuat pada slide sebelumnya.
- Buka terminal/cli pada folder proyek tersebut.
- Buat sebuah component dengan perintah ng generate component nama_component. Contoh: ng generate component about-us
- Lalu dari aplikasi code editor (VS Code), buka file about-us.component.html dan ganti code contentnya dengan html berikut:
- Buat component kedua dengan nama component contact-us. ng generate component contact-us
- Lalu dengan VS Code, buka file contact-us.component.html dan ubah code contentnya menjadi seperti berikut:
- Setelah berhasil membuat dan memodifikasi file HTML dari dua Component yang baru dibuat, buka file app.component.html dan ganti code isi-nya dengan code HTML berikut:
- Lalu jalankan local server dengan command ng serve dan lihat hasilnya pada browser.
Berikut adalah latihan untuk modifikasi routing pada angular.
- Bila tidak ada kesalahan, maka tampilan halaman Angular sekarang adalah seperti pada gambar berikut:
- Saat ini, browser akan menampilkan kedua komponen di dalam satu halaman web.
- Routing pada angular akan memodifikasi halaman web sehingga hanya akan menampilkan isi dari salah satu component saja. Tergantung pada URL path yang dimasukkan ke field URL browser.
- Untuk menambahkan fungsi router, file app.module.ts perlu diupdate untuk mengaktifkan module RouterModule. Import module dari @angular/router ke dalam file app.module.ts. Langkah-langkahnya adalah:
- Buka file app.module.ts pada VS Code.
- Tambahkan baris import berikut: import { RouterModule } from ‘@angular/router’;
- Setelah menambahkan baris import, tambahkan baris berikut pada bagian imports untuk menambahkan dua route sesuai komponen yang sudah ditambahkan sebelumnya.
- Pada file app.module.ts yang sudah dibuka, cari lokasi seksi @NgModule().
- Lalu ubah array pada bagian imports dengan menambahkan baris berikut:
- Sampai di langkah ini, proyek Angular sudah memiliki dua route. Namun pada halaman Angular, masih menampilkan isi dari dua komponen yang sudah dibuat.
- Agar route yang sudah dibuat dapat bekerja, file app.component.html perlu diupdate untuk dapat menampilkan halaman secara dinamis tergantung pada component yang dimasukkan user pada URL.
- Buka file app.component.html dengan aplikasi VS Code.
- Hapus dua baris berikut:
- Tambahkan directive router-outlet:
- Pada langkah ini, bila halaman proyek dibuka, hanya akan menampilkan judul seperti pada gambar berikut:
- Untuk menampilkan isi dari component about-us, masukkan URL berikut pada browser: http://localhost:4200/about-us
- Untuk menampilkan isi dari component contact-us, masukkan URL berikut pada browser: http://localhost:4200/contact-us
- Saat ini, proyek yang dibuat telah memiliki dua komponen. Namun untuk mengakses isi dari komponen tersebut, dilakukan dengan mengetik URL pada browser.
- Aplikasi Web pada umumnya menggunakan elemen HTML untuk berpindah halaman atau fungsi. Contohnya adalah menggunakan elemen tombol.
- Untuk menambahkan elemen tombol pada proyek Angular, langkah-langkahnya adalah sebagai berikut:
- Buka file app.component.html dan tambahkan code HTML seperti berikut:
- Bila dilihat pada halaman Angular, tampilannya menjadi seperti gambar berikut:
- Terdapat dua link yang bila di klik, akan menampilkan isi sesuai componentnya masing-masing.
- Tampilannya masih kurang menarik sehingga perlu dimodifikasi lebih lanjut agar terlihat bentuk elemen tombol.
- Untuk mengubah tampilan link menjadi elemen tombol, perlu melakukan modifikasi pada komponen css. Langkah-langkahnya adalah sebagai berikut:
- Buka file app.component.css dan tambahkan kode berikut:
- Setelah menambahkan baris kode CSS di file app.component.css, tampilan halaman proyek Angular akan menjadi seperti pada gambar berikut:
- Agar efek tombol yang aktif sesuai dengan URL bisa terlihat, modifikasi file app.component.html. Langkah-langkah-nya:
- Buka file app.component.html
- Modifikasi kode anchor tag dengan menambahkan directive routerLinkActive seperti pada gambar berikut:
- Setelah modifikasi ini, tombol aktif akan berbeda efeknya seperti pada gambar berikut
