Perutean di Angular: Mengelola Navigasi di SPA

Angular adalah kerangka kerja yang kuat untuk membangun aplikasi halaman tunggal (SPA). Salah satu fitur utamanya adalah Angular Router, yang memungkinkan navigasi yang mulus di antara tampilan tanpa perlu memuat ulang satu halaman penuh. Artikel ini membahas dasar-dasar perutean Angular, yang mencakup pengaturan, konfigurasi, dan praktik terbaik untuk mengelola navigasi secara efektif.

Memahami Perutean Sudut

Perutean sudut adalah salah satu dari sedikit fitur yang memungkinkan pengguna untuk menelusuri tampilan yang berbeda tanpa gangguan apa pun karena mulus. Angular akan secara dinamis merender bagian yang relevan dari aplikasi. Hal itu membuatnya lebih cepat dan ramah pengguna.

Angular Router menginterpretasikan URL dalam aplikasi dan memetakannya ke komponen yang akan dirender, yang memungkinkan kita untuk dengan mudah membuat tampilan yang berbeda untuk dikunjungi dalam satu aplikasi.

sumber: medium.com

Menyiapkan Perutean Sudut

Untuk menggunakan perutean dalam aplikasi Angular, ikuti langkah-langkah berikut:

Langkah 1: Mengaktifkan Perutean dalam Proyek Angular

Jika Anda membuat proyek Angular baru dengan Angular CLI, Anda dapat mencentang aktifkan perutean saat berjalan:

ng new my-angular-app --routing

Oleh karena itu secara otomatis akan membuat file app-routing. module. ts yang mengonfigurasi rute aplikasi.

Langkah 2: Tentukan Rute

Rute adalah sebuah larik objek JS yang masing-masing memiliki jalur dan pasangan komponen. Buka file app-routing.module.ts dan konfigurasikan rute:

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 {}

Langkah 3: Tambahkan Outlet Router

Untuk menampilkan komponen yang dirutekan, tambahkan arahan <router-outlet> ke file app.component.html:

<nav>
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

Di sini, routerLink membantu menavigasi di antara komponen tanpa me-refresh halaman.

Parameter Rute & Parameter Kueri

Parameter Rute

Parameter rute digunakan untuk memasukkan nilai dinamis dalam URL. Pertama, tentukan rute dengan parameter:

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

Di dalam ProdukKomponen, akses parameter melalui layanan ActivatedRoute:

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

@Component({
selector: 'app-product',
templateUrl: './product.component.html',
})
export class ProductComponent implements OnInit {
productId: string | null = '';

constructor(private route: ActivatedRoute) {}

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

Parameter Kueri

Untuk menggunakan parameter kueri: ubah navigasi:

<a [routerLink]="['/product', 1]" [queryParams]="{category: 'electronics'}">View Product</a>

Gunakan kait siklus hidup onInit untuk mengambil parameter kueri di dalam komponen:

this.route.snapshot.queryParamMap.get('category');

Modul Pemuatan Malas

Dalam aplikasi besar, memuat modul fitur secara malas sesuai permintaan adalah pilihan yang lebih baik untuk menjaga kinerja yang baik. Tentukan modul yang dimuat secara malas:

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

Pendekatan ini mengurangi waktu muat awal, sehingga meningkatkan efisiensi aplikasi.

Penjaga Rute untuk Keamanan

Angular menyediakan penjaga rute untuk mengontrol akses ke rute berdasarkan autentikasi atau otorisasi:

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 isAuthenticated = false; // Replace with actual authentication logic
if (!isAuthenticated) {
this.router.navigate(['/login']);
return false;
}
return true;
}
}

Menerapkan pengaman ke rute-rute:

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

Kesimpulan

Perutean adalah aspek fundamental dari aplikasi Angular yang memungkinkan navigasi yang mulus dan meningkatkan pengalaman pengguna. Dengan mengonfigurasi rute, menggunakan parameter, mengimplementasikan lazy loading, dan mengamankan rute dengan penjaga, pengembang dapat membangun SPA yang dapat diskalakan dan efisien. Menguasai perutean Angular memastikan kinerja dan pemeliharaan yang lebih baik dalam aplikasi web.

Kembali ke>>>> Membangun Aplikasi Halaman Tunggal (SPA) dengan Angular