Berpindah Halaman Tanpa Reload di Angular

Pada artikel sebelumnya kita udah berkenalan dengan Angular, selanjutnya saya mau share tentang bagaimana cara berpindah-pindah halaman web tanpa ada reload / refresh pada halaman tersebut. Buat pembaca baru, silahkan di baca dulu ya artikel sebelumnya di Berkenalan Dengan Angular CLI.

Mengenal Single Page Application (SPA)

SPA atau kependekan dari Single Page Application adalah sebuah jenis aplikasi web yang memakai konsep satu halaman untuk menghendel semua aksi atau aktifitas yang terjadi pada aplikasi. Sehingga user tidak akan perlu berpindah halaman setelah melakukan aksi terhadap halaman tersebut. Semua aksi yang dilakukan dihendel secara Asychronous oleh Javascript. Sementaran perpindahan dari satu halaman ke halaman yang berbeda dilakukan oleh Routing. Metode ini sebenarnya sangat menguntungkan, kerna tidak perlu reload untuk berpindah halaman. SPA akan me-load semua komponen yang di butuhkan seperti CSS ketika pertama kali aplikasi dijalankan, sehingga prosesnya tidak memakan waktu yang lama, dan juga baik untuk UX aplikasi.

Ada beberapa Framework yang dapat kita gunakan untuk membuat aplikasi SPA diantaranya yaitu:

• Angular
• ReactJS
• Vue.JS

Namun pada artikel ini kita akan membahas menggunakan Angular saja.

Memulai

Sebelum memulai, pastikan teman-teman telah mengikuti arikel sebelumnya dan telah membuat project baru bernama Latihan-Angular-Pertama.

Didalam folder project ini terdapat banyak sekali susunan file, seperti gambar berikut:

Namun kita hanya akan bermain di folder src/app. Didalam folder app tersebut terdapat beberapa file yang kita butuhkan untuk membuat SPA diantaranya ada app.component.css, app.component.hml, dan app.component.ts

Membuat Component

Masuk ke Command Prompt dan ketikkan perintah:

ng g c product-list

yang artinya kita memerintahkan untuk membuat Component dengan nama product-list.

Setelah itu maka didalam project kita akan bertambah sebuah folder bernama product-list yang didalam nya terdapat susunan file CSS, HTML, dan TS.

File CSS seperti biasa untuk menghendel semua style yang kita butuhkan, HTML untuk mengatur tampilan interface pada browser, dan TS untuk mengatur proses seperti pengambilan data, pengiriman data, dan lain sebagainya.

Selanjutnya buat dua buah component lagi dengan cara yang sama seperti di atas.

ng g c add-product

ng g c dashboard

Maka susunan project kita kurang lebih akan bertambah seperti ini:

Membuat Module Routing

Masukkan perintah berikut di Command Prompt :

ng g m app-routing --flat

Dan akan terbuat sebuah file route seperti berikut:

Buka file app-routing.module.ts tersebut, kemudian import semua component dan route :

import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent }   from './dashboard/dashboard.component';
import { ProductListComponent } from './product-list/product-list.component';
import { AddProductComponent }  from './add-product/add-product.component';

Setelah itu definisikan path url yang kita butuhkan :

const appRoutes: Routes = [
  { path: '',     component:  DashboardComponent },
  { path: 'list', component:  ProductListComponent},
  { path: 'add',  component:  AddProductComponent},
  { path: '**',   redirectTo: ''}
];

Jadi nanti path diatas lah yang kita akses untuk berpindah halaman dari satu halaman ke halaman yang lain. Contoh untuk mengakses Product List maka kita perlu melakukan router link ke http://localhost:4200/list begitu juga jika kita ingin mengakses Add Product, maka kita perlu melakukan router link ke http://localhost:4200/add
Kemudian masukkan RouterModule pada bagian imports dan exports :

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})

Berikut koding lengkapnya :

Kalau teman-teman melihat ada path: '**' itu berguna jika kita salah mengetikkan link url maka kita akan otomatis ridirect ke halaman yang telah di tentukan.

Langkah selanjutnya buka file app.component.hml 
Hapus semua koding yang ada pada file tersebut dan ganti dengan koding berikut:

<router-outlet></router-outlet>

Koding diatas bertujuan untuk meletakkan component yang akan kita panggil menggunakan Router nantinya.

Setelah itu jangan lupa untuk mengimport AppRoutingModule ke dalam file app.module.ts
Seperti gambar dibawah ini :

Jalankan

Sampai disini kita telah selesai dalam proses pembuatan Routing, untuk menjalankan silahkan masukkan perintah berikut pada Command Prompt

ng serve

Setelah compile selesai, coba teman-teman akses link berikut

• http://localhost:4200/ (Menampilkan halaman Dashboard)
• http://localhost:4200/add (Menampilkan halaman Add Product)
• http://localhost:4200/list (Menampilkan halaman Product List)
• http://localhost:4200/xxx (Menampilkan halaman Dashboard kembali)

Cukup sekian artikel kali ini, semoga bermanfaat. Kalau teman-teman suka dengan artikel ini jangan lupa bagikan dan tinggalkan jejak di kolom komentar. Terimakasih.