Questions Management – Frontend – Áp dụng Routing

Mình đã giới thiệu với các bạn tổng quan về Routing trong Angular. Trong bài viết này, chúng ta sẽ áp dụng nó cho ứng dụng Questions Management của chúng ta các bạn nhé!

Đầu tiên, mình sẽ tạo mới một module tên là AppRoutingModule trong tập tin app-routing.module.ts trong thư mục src/app:

Questions Management - Frontend - Áp dụng Routing

với nội dung như sau:

Hiện tại như các bạn thấy, chúng ta chỉ có trang Dashboard nên mình chỉ có thể cấu hình cho trang này. Mọi request với URL không tồn tại cũng sẽ được redirect đến trang Dashboard.

Tiếp theo, mình sẽ khai báo module AppRoutingModule này trong AppModule của ứng dụng Questions Management như sau:

Rồi thay thế thẻ <qm-body> trong tập tin app.component.html thành thẻ </router-outlet> như sau:

Lúc này, nếu các bạn chạy ứng dụng, các bạn sẽ thấy nội dung của component DashboardComponent sẽ được trả về dù các bạn có truy cập đến request nào đi chăng nữa.

Bây giờ chúng ta sẽ sử dụng directive routerLink cho menu bên trái với dòng chữ Questions Management cũng ở bên trái nhưng trên cùng các bạn nhé!
Vì nội dung của những phần này nằm trong NavigationModule nên để làm được điều này, các bạn cần import AppRoutingModule vào NavigationModule trước:

Sau đó, thay thế thuộc tính href trong các thẻ <a> trong các tập tin sau sử dụng directive routerLink của Angular.

Tập tin navigation.component.html:

Từ

thành

Tập tin sidebar.component.html:

Từ:

thành

OK, vậy là chúng ta đã hoàn thành việc apply Routing cho ứng dụng Questions Management rồi đó các bạn.

Chia sẽ bài viết này ...Share on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment