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.
- Khởi tạo project
- Thực hiện layout và khai báo router-outlet
- Tạo các component
- Khai báo route cho các component
- Tạo các link dẫn đến các route
- Thực hiện tạo nội dung cho các component
Tạo project có 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
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.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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>
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: 1. import các component và 2. khai báo các route.
Tạo link trong menu dẫn đến các route
Tạo link dẫn đến các route đã tạo để user nhắp vào. Việc tạo link (tag a) là thực hiện trong layout hoặc trong các view. Đặc biệt thanh menu là nơi khai báo các link quan trọng. Xem cách làm như sau:
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 bạn chỉ còn việc là tạo nội dung cho từng component là xong.
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.
Để 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
