Ôn tập Angular: Angular Router

Ôn tập Angular: Angular Router - Part 3

Angular Routing

Angular Routing giống như hệ thống điều hướng trong ứng dụng web của bạn. Nó cho phép người dùng "di chuyển" giữa các trang hoặc màn hình khác nhau mà không cần tải lại toàn bộ trang web.

Angular Routing hoạt động thế nào?

Đầu tiên, bạn xem qua ví dụ về link trong HTML

<a href="/example">
  Example HTML link.
</a>

Link trên sẽ redirect page tới url /example. Tuy nhiên, một ứng dụng trang đơn (SPA) không có các trang khác nhau để liên kết. Thay vào đó, ứng dụng có các view khác nhau để hiển thị cho người dùng. Để cho phép người dùng điều hướng và thay đổi view, bạn sẽ muốn sử dụng directive RouterLink thay vì href:

Angular Routing dựa trên khái niệm về route, một URL cụ thể được ánh xạ đến một component cụ thể. Khi người dùng truy cập một URL nhất định, Angular sẽ tìm kiếm route tương ứng và hiển thị component được liên kết với nó.

Ví dụ:

Giả sử bạn đang xây dựng một ứng dụng blog. Bạn có thể định nghĩa các route sau:

/: Hiển thị danh sách bài viết blog.
/blog/:id: Hiển thị chi tiết bài viết blog với ID cụ thể.
/about: Hiển thị trang giới thiệu về blog.

Khi người dùng truy cập /, component hiển thị danh sách bài viết sẽ được hiển thị. Khi họ nhấp vào một bài viết cụ thể, route /blog/:id sẽ được kích hoạt và component hiển thị chi tiết bài viết sẽ được hiển thị.

Configure Angular Router

Để cấu hình Router sử dụng Angular standalone component, bạn cần làm các bước sau:

- Định nghĩa base href. Angular CLI generate ra đoạn này hoặc bạn thêm đoạn code sau vào file index.html

<head>
<...>
<base href="/">
</head>

- Định nghĩa Routes cho View

- Đăng ký Router Service và Routes trong application startup

- Map HTML Element actions to Route: gán hành động của các phần tử HTML (ví dụ: khi người dùng click vào một button) với một route cụ thể.

- Choose where you want to display the view: Bạn sẽ quyết định vị trí trong giao diện người dùng mà view tương ứng với route đó sẽ được hiển thị.

Ví dụ

Tạo component mới

ng g c home
ng g c angular
ng g c react
ng g c about
ng g c page-not-found

Thiết lập Route cho ứng dụng

Thứ tự định tuyến rất quan trọng vì Bộ định tuyến sử dụng chiến lược first-match ( phù hợp đầu tiên) khi kết hợp các route, vì vậy các route mô tả cụ thể chi tiết hơn nên được đặt bên trên các route ít cụ thể hơn. Liệt kê các route với một đường dẫn tĩnh trước tiên, tiếp theo là một route trống, phù hợp với tuyến đường mặc định. Tuyến ký tự đại diện đến cuối cùng vì nó khớp với mọi URL và Bộ định tuyến chỉ chọn nó nếu không có route nào khác khớp trước.

Mở file app.routes.ts, update nội dung lại như sau:

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AngularComponent } from './angular/angular.component';
import { ReactComponent } from './react/react.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const routes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'angular', component: AngularComponent},
    {path: 'react', component: ReactComponent},
    {path: 'about', component: AboutComponent},
    { path: '**', component: PageNotFoundComponent },
];

Route cuối cùng với đường dẫn của ** là một tuyến ký tự đại diện. Bộ định tuyến chọn tuyến này nếu URL được yêu cầu không khớp với bất kỳ đường dẫn nào trước đó trong danh sách và gửi người dùng đến PageNotFoundComponent.

Đăng ký Route

Chúng ta cần đăng ký Route lúc khởi động Application. Mở file main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Method bootstrapApplication chịu trách nhiệm hiển thị Root Component. bootstrapApplication mong đợi hai tham số:

AppComponent để hiển thị khi ứng dụng start.
Đối tượng ApplicationConfig, cung cấp tập hợp các cấu hình cho method bootstrapApplication.

provideRouter là một phương thức hỗ trợ đăng ký các dịch vụ liên quan đến bộ Angular Router và cấu hình routing.

File app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

File app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AngularComponent } from './angular/angular.component';
import { ReactComponent } from './react/react.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const routes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'angular', component: AngularComponent},
    {path: 'react', component: ReactComponent},
    {path: 'about', component: AboutComponent},
    { path: '**', component: PageNotFoundComponent },
];

Map Action vào Route

Tiếp theo, chúng ta cần bind event vào hyperlink, image hoặc button với 1 route. Chúng ta sử dụng routerLink.

<div class="topnav">
    <a routerLinkActive="active" routerLink="/" [routerLinkActiveOptions]="{ exact: true }">Home</a>
    <a routerLinkActive="active" [routerLink]="['angular']" >Angular</a>
    <a routerLinkActive="active" routerLink="react" >React</a>
    <a routerLinkActive="active" routerLink="about">About</a>
</div>

Thêm CSS cho top navigation

.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #04AA6D;
    color: white;
  }

Hiển thị nội dung trang sau khi chuyển trang

<router-outlet></router-outlet>

Một số ví dụ khác về redirect page

<a routerLink="/users/sammy">
  Link that uses a string.
</a>

Trong Angular, bạn sẽ viết như sau

<a [routerLink]="['/', 'users', 'sammy']">
  Link that uses an array.
</a>

Nhận giá trị từ Param

Khi sử dụng routing, Angular cho phép bạn truy cập vào các tham số trong URL bằng cách sử dụng ActivatedRoute và paramMap. Bạn có thể dùng route.paramMap.subscribe để lắng nghe thay đổi của các tham số và cập nhật dữ liệu trong component tương ứng.

Cập nhật lại file app.route.ts

export const routes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'angular/:category', component: AngularComponent},
    //...
    { path: '**', component: PageNotFoundComponent },
];

File app.component.ts

<a routerLinkActive="active" [routerLink]="['angular', '123']" >Angular</a>

Cập nhật với angular.component.ts như sau

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

@Component({
  selector: 'app-angular',
  standalone: true,
  imports: [],
  templateUrl: './angular.component.html',
  styleUrl: './angular.component.scss'
})
export class AngularComponent implements OnInit{
  constructor(private route: ActivatedRoute){

  }
  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      
      let value = params.get('category') || 'all';
      console.log("this.route.paramMap.subscribe: "  + value);      
    });      
  }
}

paramMap.subscribe: Lắng nghe sự thay đổi của paramMap. Khi tham số thay đổi, callback trong subscribe sẽ được kích hoạt. Trong ví dụ này, chúng ta lấy giá trị của tham số id bằng cách gọi params.get('id') và gán cho biến productId.

Tham khảo

How to use Standalone Components with Angular Router

Routing trong Angular: có thể bạn chưa biết.

Common Routing Tasks

Angular Router: Navigation Using RouterLink, Navigate, or NavigateByUrl

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này