Daftar Isi

1. Pengantar Angular Router
2. Konsep Dasar Angular Router
3. Setup Proyek Angular dengan Router
4. Routing Dasar dan Navigasi
5. Route Parameters dan Query Params
6. Nested Routing dan Child Routes
7. Lazy Loading Modul
8. Route Guards untuk Proteksi Route
9. Advanced Routing: Preloading dan Resolver
10. Source Code dan Referensi Pembelajaran

1. Pengantar Angular Router

Angular Router adalah modul resmi Angular yang memungkinkan pengembangan aplikasi Single Page Application (SPA) dengan navigasi yang dinamis dan terstruktur. Dengan Angular Router, Anda dapat mengelola berbagai tampilan (views) dalam satu aplikasi tanpa perlu reload halaman, sehingga memberikan pengalaman pengguna yang mulus dan cepat.

Dalam panduan ini, kita akan membahas secara mendalam bagaimana menggunakan Angular Router untuk membangun SPA skala besar yang terstruktur, mudah dipelihara, dan scalable.

2. Konsep Dasar Angular Router

Angular Router bekerja dengan cara memetakan URL ke komponen tertentu. Ketika URL berubah, router akan menampilkan komponen yang sesuai tanpa me-reload halaman.

• Route: Definisi path URL dan komponen yang akan ditampilkan.
• RouterOutlet: Tempat di template yang akan menampilkan komponen sesuai route.
• RouterLink: Direktif untuk membuat link navigasi antar route.
• Route Parameters: Parameter dinamis yang bisa diteruskan lewat URL.
• Guards: Mekanisme untuk mengontrol akses ke route tertentu.

3. Setup Proyek Angular dengan Router

Untuk memulai menggunakan Angular Router, Anda harus membuat proyek Angular baru dan menambahkan routing saat setup.

npx @angular/cli new angular-router-guide --routing --style=scss
cd angular-router-guide
npm install
      

Perintah di atas membuat proyek baru dengan routing sudah diaktifkan. File app-routing.module.ts akan otomatis dibuat untuk mengatur routing aplikasi.

4. Routing Dasar dan Navigasi

Berikut contoh konfigurasi routing dasar dan navigasi antar halaman.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
      

app.component.html

Dengan konfigurasi di atas, Anda dapat berpindah antar halaman Home dan About tanpa reload halaman.

5. Route Parameters dan Query Params

Route parameters memungkinkan Anda mengirim data dinamis lewat URL. Contoh: menampilkan detail produk berdasarkan ID.

app-routing.module.ts

const routes: Routes = [
  { path: 'product/:id', component: ProductDetailComponent },
];
      

product-detail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-detail',
  template: \`
    <h2>Detail Produk ID: {{ productId }}</h2>
  \`
})
export class ProductDetailComponent implements OnInit {
  productId!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.productId = this.route.snapshot.paramMap.get('id')!;
  }
}
      

Untuk query params, Anda bisa menggunakan this.route.queryParams untuk mengambil data dari URL seperti ?ref=google .

6. Nested Routing dan Child Routes

Nested routing memungkinkan Anda membuat route di dalam route, cocok untuk layout yang kompleks.

app-routing.module.ts

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: '', component: OverviewComponent },
      { path: 'stats', component: StatsComponent },
      { path: 'settings', component: SettingsComponent },
    ]
  }
];
      

Pada dashboard.component.html harus ada <router-outlet> untuk menampilkan child routes.

dashboard.component.html

7. Lazy Loading Modul

Lazy loading adalah teknik memuat modul hanya saat dibutuhkan, mempercepat waktu load awal aplikasi.

app-routing.module.ts

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.module').then(m => m.AdminModule)
  }
];
      

Modul AdminModule hanya akan dimuat saat user mengakses route /admin .

8. Route Guards untuk Proteksi Route

Route guards digunakan untuk mengontrol akses ke route, misalnya hanya user yang sudah login yang bisa mengakses halaman tertentu.

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const loggedIn = !!localStorage.getItem('token');
    if (!loggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}
      

app-routing.module.ts

const routes: Routes = [
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
  }
];
      

Dengan konfigurasi di atas, route /profile hanya bisa diakses jika user sudah login.

9. Advanced Routing: Preloading dan Resolver

Angular Router juga menyediakan fitur preloading modul dan resolver data untuk meningkatkan performa dan pengalaman pengguna.

Preloading Modul

imports: [
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
]
      

Dengan PreloadAllModules , modul lazy loading akan dimuat di background setelah aplikasi utama selesai dimuat.

Resolver Data

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { DataService } from './data.service';

@Injectable({ providedIn: 'root' })
export class DataResolver implements Resolve<any> {
  constructor(private dataService: DataService) {}

  resolve() {
    return this.dataService.getData();
  }
}
      

app-routing.module.ts

const routes: Routes = [
  {
    path: 'data',
    component: DataComponent,
    resolve: { data: DataResolver }
  }
];
      

Resolver akan mengambil data terlebih dahulu sebelum route diaktifkan, sehingga komponen sudah memiliki data saat ditampilkan.

10. Source Code dan Referensi Pembelajaran

Berikut beberapa sumber belajar dan contoh source code lengkap untuk memperdalam pemahaman Angular Router:

• Dokumentasi Resmi Angular Router
• Source Code Angular Router di GitHub
• Tutorial Angular Router Lengkap oleh Academind (YouTube)
• Contoh Proyek Angular Router di StackBlitz

Dengan mempelajari sumber-sumber di atas dan praktik langsung, Anda akan mampu menguasai Angular Router untuk membangun SPA skala besar yang handal dan efisien.