Questions Management – Frontend – Chia nhỏ template sử dụng Module, Component của Angular

Ứng dụng Questions Management của chúng ta sẽ có nhiều trang, mỗi trang sẽ có những phần chung cho tất cả các trang và những phần riêng dành cho những trang đó. Do đó, việc chia nhỏ template của chúng ta sử dụng Component và Module trong Angular là điều cần thiết. Trong bài viết này, mình sẽ hướng dẫn các bạn cách chúng ta chia nhỏ template như thế nào các bạn nhé!

Đầu tiên, hãy nhìn lại giao diện hiện tại của Questions Management:

Questions Management - Frontend - Chia nhỏ template sử dụng Module, Component của Angular

Các bạn sẽ thấy phần menu bên trái và phần navigation ở phía trên của chúng ta là những phần chung cho tất cả các trang của ứng dụng. Chỉ có phần ở giữa “Dashboard” là phần sẽ thay đổi khi chúng ta di chuyển giữa các trang khác nhau.

Nếu các bạn xem nội dung của tập tin app.component.html thì các bạn sẽ thấy bên trong thẻ root với id là wrapper, chúng ta sẽ có 2 phần cho navigation và page-wrapper, cụ thể như sau:

Questions Management - Frontend - Chia nhỏ template sử dụng Module, Component của Angular
Phần navigation chính là phần menu bên trái và phần navigation ở phía trên đó các bạn, còn phần page-wrapper thì là của Dashboard.

Giờ mình sẽ tạo 2 thư mục dashboard và navigation trong thư mục src/app tương ứng cho mỗi phần trên:

Questions Management - Frontend - Chia nhỏ template sử dụng Module, Component của Angular



Nói về phần dashboard trước, nội dung của trang Dashboard sẽ gồm nhiều thông tin khác nhau. Mỗi thông tin sẽ là một Component trong Angular nên mình sẽ tạo một class DashboardModule để compile những phần này lại. Giờ mình sẽ tạo 3 tập tin dashboard.module.ts, dashboard.component.ts, dashboard.component.html.

Questions Management - Frontend - Chia nhỏ template sử dụng Module, Component của Angular

Nội dung của tập tin dashboard.component.html sẽ được copy từ phần page-wrapper trong tập tin app.component.html. Nội dung hơi nhiều nên mình sẽ không copy ra đây nha các bạn. Nhưng có một cái là chúng ta sẽ thay thế nội dung phần page-wrapper trong tập tin app.component.html thành “<qm-body></qm-body>“.
Lúc này nội dung của class DashboardModule và class DashboardComponent như sau:
DashboardComponent:

DashboardModule:




Tiếp theo chúng ta sẽ nói về phần navigation.

Như mình nói, phần navigation này gồm 2 phần menu bên trái và phần navigation ở phía trên. Nhìn vào nội dung HTML của tập tin app.component.html lúc này, các bạn sẽ thấy rõ điều này:

Questions Management - Frontend - Chia nhỏ template sử dụng Module, Component của Angular

Phần navigation ở phía trên chính là thẻ <ul> hình trên đó các bạn, còn phần menu bên trái là thẻ <div> với role là navigation.

Để chia nhỏ template cho phần navigation này, mình sẽ tạo một module là NavigationModule với 2 component là NavbarTopComponent và SidebarComponent như sau:

Questions Management - Frontend - Chia nhỏ template sử dụng Module, Component của Angular

Như các bạn thấy, mình đã tạo 2 thư mục là sidebar và navbartop trong thư mục src/app/navigation.

Thư mục sidebar sẽ định nghĩa component SidebarComponent để định nghĩa nội dung của menu bên trái. Nội dung của tập tin sidebar.component.html sẽ được copy từ thẻ <div> với role navigation trong tập tin app.component.html. Còn nội dung của class SidebarComponent sẽ có nội dung như sau:

Thư mục navbartop sẽ định nghĩa component NavbarTopComponent để định nghĩa phần nội dung của navigation ở phía trên. Nội dung của tập tin navbartop.component.html sẽ được copy từ thẻ <ul> trong tập tin app.component.html. Nội dung của class NavbarTopComponent như sau:

Trong 2 class component trên, các bạn thấy phần selector trong decorator @Component được định nghĩa với giá trị là nav-sidebar và nav-top, đây chính là những thẻ HTML được định nghĩa trong tập tin navigation.component.html đấy các bạn.

Nội dung của tập tin navigation.component.html được copy từ phần navigation trong tập tin app.component.html với phần menu bên trái được thay thế bằng thẻ <nav-sidebar> và phần navigation ở phía trên được thay thế bằng thẻ <nav-top>. Nội dung của tập tin navigation.component.html lúc này như sau:

Lúc này, nội dung của 2 class NavigationComponent và NavigationModule được định nghĩa như sau:

NavigationModule:

NavigationComponent:

Trong phần selector của NavigationComponent trên, như các bạn thấy, mình đã định nghĩa giá trị “qm-nav”. Đây là thẻ HTML đã được thay thế bằng nội dung của phần navigation trong tập tin app.component.html.

Và do vây, nội dung của tập tin app.component.html lúc này chỉ đơn giản như sau:

OK, đến đây thì chúng ta đã cơ bản xong phần chia nhỏ template ra thành từng phần nhỏ. Lúc này, các bạn chạy lại ứng dụng thì kết quả vẫn tương tự.

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

Add Comment