Routing Trong Angular

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.

Tạo project routing trong angular

Để tạo 1 project với chức năng routing, bạn dùng lệnh Angular CLI  như sau

 ng new lab4 --routing -–defaults

trong đó lab4 là tên folder project của bạn

Khi tạo project với thông số như trên, trong project có 1 file mới là app-routing.module.ts . Và file app.module.ts được nhúng sẵn module app-routing, đây là module thực hiện routing trong ứng dụng của bạn.

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, AppRoutingModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tạo layout và khai báo router-outlet

Tạo layout là để tạo trang khung để nhúng các trang con vào. Trong layout, vùng có diện tích lớn nhất là nơi bạn dành để đặt các trang chức năng vào. Khai báo bằng cách dùng tag <router-outlet>

<!--src/index.html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- app/app.component.html-->
<div class="container">
  <nav>
  <nav class="navbar navbar-expand navbar-dark bg-dark">
  <ul class="navbar-nav">
  <li class="nav-item"><a class="nav-link" href="#">Trang chủ</a> </li>
  <li class="nav-item"><a class="nav-link" href="#">Sản phẩm</a> </li>
  <li class="nav-item"><a class="nav-link" href="#">Liên hệ</a> </li>
  <li class="nav-item"><a class="nav-link" href="#">Đăng nhập</a> </li>
  </ul>
  </nav>
  </nav>
  <main class="d-flex" style="min-height: 400px;">
    <article class="col-md-9 bg-light"> 
        <router-outlet></router-outlet>
    </article>
    <aside class="col-md-3 bg-secondary"> </aside>
  </main>
</div>
hoạt động SPA trong Angular

Tạo các component

Mỗi component là chức năng trong ứng dụng: như đăng  nhập, sản phẩm, chi tiết sản phẩm, đăng ký…Sau khi tạo xong, bạn khai báo các router cho từng component để nhúng vào layout (<router-outlet>). Việc tạo component không có gì đặc biệt. Mời bạn tạo vài component để test: home, sanPham, chitietSp, dangNhap, lienHe.

Khai báo route cho các component

Thực hiện trong app/app-routing.ts, import các  component và khai báo route dẫn user vào các component đã tạo.

Khai báo route cho các component trong ứng dụng angular routing
Khai báo route cho các component trong ứng dụng angular routing

Tạo link dẫn đến các route bạn thực hiện trong layout nhé. Chỗ nào cũng được, nhưng thường thì định nghĩa trong thanh menu. Tham khảo cách làm như sau:

Tạo link trong ứng dụng angular routing bằng chỉ thị routerLink
Tạo link trong ứng dụng angular routing bằng chỉ thị routerLink

Lúc này nhắp vào từng mục của thanh menu, component được trở tới sẽ hiện ra trong <router-outlet > Sau đó này chỉ còn việc là tạo nội dung cho từng component là xong.

Xem kết quả SPA trong Angular

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-routing nhúng vào vùng router-outlet.

Với việc tận dụng chức năng routing trong Angular, 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, cũng không cần phải tính toán nhiều

Để 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 đọc thêm nữa, mời xem link này https://angular.io/guide/router