Lập trình Angular

Routing Trong Angular

24/04/2024

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

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

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ố

Định nghĩa route có tham số

Lấy giá trị của tham số trong route

Tạo link đến route có tham số

Tạo layout cho ứng dụng

Tạo nội dung cho các component

BÀI VIẾT LIÊN QUANXEM THÊM

Service trong Angular

Module trong Angular

Authentication trong Angular

BÀI VIẾT LIÊN QUAN XEM THÊM