Routing trong Angular là bài hướng dẫn triển khai SPA trong Angular. Đây là một trong các chức năng hay bạn phải biết khi lập trình Front-End
- Chuẩn bị: khởi tạo project
- Tạo các component
- Import component và khai báo các route
- Import các thành phần router vào app component
- Tạo link đến các route và khai báo router-outlet
- Route có tham số
- Tạo layout cho ứng dụng
- Tạo nội dung cho các component
Routing trong Angular là chức năng giúp nạp component vào trang web theo từng route (đường dẫn) đã khai báo, đây là chức năng nền tảng để tạo nên Single Page Application – ứng dụng web 1 trang.
Chuẩn bị: khởi tạo project
Tạo 1 project để test:
ng new lab4 --defaults
Tạo các component
Chúng ta cần một vài component để nhúng vào trang web theo các route.
ng g c home
ng g c detail
ng g c contact
ng g c category
ng g c notFound
Import component và khai báo các route
Mở file app/app.routes.ts , import các component và khai báo các route trong mảng routes . Mỗi route là 1 đối tượng gồm path là đường dẫn , component là component sẽ được nạp vào, title là tiêu đề trên trình duyệt.
Trong mỗi route có thể dùng hàm redirectTo để chuyển đến route khác. Route với path là ‘**’ được dùng trong trường hợp user nhập đường dẫn không tồn tại trong ứng dụng.
//app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';
import { CategoryComponent } from './category/category.component';
import { DetailComponent } from './detail/detail.component';
import { NotFoundComponent } from './not-found/not-found.component';
export const routes: Routes = [
{ path: '', component: HomeComponent, title:"Trang chủ" },
{ path: 'lien-he', component: ContactComponent, title:"Liên hệ" },
{ path: 'contact', redirectTo: '/lien-he', pathMatch: 'full' },
{ path: '**', component: NotFoundComponent }
];
Với khai báo như trên, các hoạt động sau sẽ diễn ra: User xem path ” , Angular sẽ nạp component Home. User xem path ‘lien-he’, Angular sẽ nạp component Contact . Xem path ‘contact’, sẽ chuyển về path lien-he. Khi xem 1 path không có, Angular sẽ nạp component NotFound.
Import các thành phần router vào app component
Ở đầu app.component.ts, bạn cần import các thành phần router như RouterLink, RouterOutlet… Đây là các thành phần dùng để định nghĩa route và nơi hiện các component.
//app.component.ts
...
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root', standalone: true,
imports: [RouterOutlet, RouterLink],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
Tạo link đến các route và khai báo router-outlet
Trong view app.component.html, tag a với thuộc tính routerLnk dùng để khai báo liên kết đến route đã khai báo.
<router-outlet>: khai báo 1 lần duy nhất trong view để đánh dấu nơi các component nạp vào khi user nhắp các routerLink
<!-- app.component.html -->
<h1>Router in Angular</h1>
<input />
<ul>
<li><a routerLink="/" >Trang chủ</a></li>
<li><a routerLink="/lien-he" >Liên hệ </a></li>
</ul>
<hr>
<router-outlet></router-outlet>
Xem kết quả: trong trang web nhắp thử các link, path routerLink sẽ thể hiện trên thanh địa chỉ của trình duyệt, và component tương ứng sẽ được nạp vào router-outlet. Chú ý là chỉ có router-outlet mới nạp lại nội dung, toàn trang không nạp lại. Bạn có thể test bằng cách nhập chữ vào input rồi nhắp các link: chữ trong input không bị mất chứng tỏ toàn trang không bị nạp lại.
Route có tham số
Với các route có tham số, bạn cần làm thêm một số việc
Định nghĩa route có tham số
Trong file app.routes.ts, khai báo route và tham số cần dùng. Mỗi tham số có tên, ngay trước là dấu hai chấm.
//app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';
import { CategoryComponent } from './category/category.component';
import { DetailComponent } from './detail/detail.component';
import { NotFoundComponent } from './not-found/not-found.component';
export const routes: Routes = [
{ path: '', component: HomeComponent, title:"Trang chủ" },
{ path: 'lien-he', component: ContactComponent, title:"Liên hệ" },
{ path: 'contact', redirectTo: '/lien-he', pathMatch: 'full' },
{ path: 'category/:id', component:CategoryComponent },
{ path: '**', component: NotFoundComponent }
];
Lấy giá trị của tham số trong route
Trong component được nạp, bạn import ActivatedRoute, khai báo biến route trong hàm constructor. Và code trong hàm ngOnInit để lấy giá trị của tham số trong route theo cú pháp this.route.snapshot.paramMap.get(‘TênThamSố’)
//category.component.ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-category', standalone: true, imports: [],
templateUrl: './category.component.html',
styleUrl: './category.component.css'
})
export class CategoryComponent {
id:number= 0; //id loại sản phẩm
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.id = Number(this.route.snapshot.paramMap.get('id'));
}
}
<!-- category.component.html -->
<h4>Sản phẩm trong loại {{id}} </h4>
Tạo link đến route có tham số
Trong app.component.html, code tạo routerLink như sau
<!-- app.component.html -->
<h1>Router in Angular</h1>
<input />
<ul>
<li><a routerLink="/" >Trang chủ</a></li>
<li><a routerLink="/lien-he" >Liên hệ </a></li>
<li><a [routerLink]="['/category', 1]" >Asus </a></li>
<li><a [routerLink]="['/category', 2]" >Acer</a></li>
</ul>
<hr>
<router-outlet></router-outlet>
Xem kết quả
Tạo layout cho ứng dụng
app.component.html là nơi bạn tạo layout cho ứng dụng Angular. Layout là trang khung để nhúng các trang con (component con) vào. Trong layout bạn định nghĩa các routerLink , router-outlet . Nếu bạn có dùng thêm các thư viện hỗ trợ định dạng (như bootstrap) thì nhúng nó vào src/index.html
<!--src/index.html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><!-- app/app.component.html-->
<div class="container">
<header class="bg-info" style="height: 90px">asdasd </header>
<nav>
<nav class="navbar navbar-expand bg-warning">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" routerLink="/">Trang chủ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" routerLink="lien-he">Liên hệ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" [routerLink]="['/category',1]">
Asus
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" [routerLink]="['/category',2]">
Acer
</a>
</li>
</ul>
</nav>
</nav>
<main class="d-flex" style="min-height: 300px;">
<article class="col-md-9 bg-body-secondary">
<router-outlet></router-outlet>
</article>
<aside class="col-md-3 bg-info-subtle"> </aside>
</main>
</div>
Tạo nội dung cho các component
Nội dung của từng component bạn tạo tùy nhu cầu. Các nội dung này sẽ được Angular nhúng vào vùng router-outlet.
Chức năng routing trong Angular giúp cho toàn trang layout hầu như không thay đổi, chỉ có vùng <router-outlet> mới thay đổi nội dung . Do đó website sẽ chạy rất nhanh, nhờ không nạp lại nhiều lần.
Để thực hiện bài này, bạn cần có kiến thức về sử dụng component trong angular nhé. Muốn tham khao thêm mời xem các link https://angular.io/guide/routing-overview, https://angular.io/guide/router
