Angular Routing พื้นฐาน: การสร้าง Route และ Navigation

Angular Routing คืออะไร

Angular Router ช่วยให้เราสร้าง Single Page Application (SPA) ที่สามารถเปลี่ยนหน้าได้โดยไม่ต้อง reload browser

ติดตั้งและตั้งค่า Router

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

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

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

RouterOutlet และ RouterLink

<!-- app.component.html -->
<nav>
  <a routerLink="/">หน้าหลัก</a>
  <a routerLink="/about">เกี่ยวกับ</a>
</nav>
<router-outlet></router-outlet>

Route Parameters

// routes
{ path: 'user/:id', component: UserComponent }

// component
import { ActivatedRoute } from '@angular/router';

export class UserComponent {
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(params => {
      console.log(params['id']);
    });
  }
}

Lazy Loading Routes

export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () =>
      import('./admin/admin.component').then(m => m.AdminComponent)
  }
];

Navigation ด้วย Code

import { Router } from '@angular/router';

export class LoginComponent {
  constructor(private router: Router) {}

  onLogin() {
    // หลัง login สำเร็จ
    this.router.navigate(['/dashboard']);
  }
}

สรุป

Angular Router เป็นส่วนสำคัญของทุก Angular application การเข้าใจ Route, Parameter, Lazy Loading และ Navigation จะช่วยให้สร้าง SPA ได้อย่างมีประสิทธิภาพครับ