Questions Management – Frontend – Xây dựng giao diện cho phần Categories

Phần đầu tiên trong ứng dụng Questions Management mà chúng ta cần hiện thực đó là phần quản lý những Categories mà các câu hỏi sẽ thuộc về. Do đó, trong bài viết này mình sẽ bắt đầu với việc thêm giao diện cho phần quản lý các Categories này. Giao diện này sẽ cho phép chúng ta thêm, chỉnh sửa, xóa, cập nhập Categories một cách dễ dàng. OK, bắt đầu nào các bạn!

Để dễ quản lý, tất cả những thứ liên quan đến câu hỏi, mình sẽ group chúng lại trong menu item Questions ở phần sidebar bên trái.

Để làm được điều này, mình sẽ sửa tập tin sidebar.component.html để thêm vào sau đoạn code:

một đoạn code HTML như sau:

Trong đoạn code trên, mình đã thêm một menu item tên là Questions đóng vai trò là root của một menu item khác tên là Categories. Trong tương lai mình sẽ thêm một số menu item khác bên trong menu Questions này.

Lúc này, nếu các bạn chạy lại ứng dụng, các bạn sẽ thấy kết quả của phần menu bên trái như sau:

Questions Management - Frontend - Xây dựng giao diện cho phần Categories

Tiếp theo, mình sẽ thêm mới một module tên là QuestionsModule nằm trong thư mục src/app/questions:

Questions Management - Frontend - Xây dựng giao diện cho phần Categories

Module QuestionsModule này sẽ quản lý tất cả những phần liên quan đến câu hỏi và cái đầu tiên mà nó sẽ quản lý đó là các Categories. Để sử dụng module này, chúng ta cần import nó vào AppModule như sau:

Để xây dựng phần giao diện cho Categories, đầu tiên mình sẽ thêm một số thư viện mà mình sẽ sử dụng để xây dựng giao diện này trước.

Đó là các thư viện:

  • Datatables.net: 1.10.12
  • Datatables.net Bootstrap: 1.10.12
  • Datatables.net Responsive: 2.1.0

Mặc dù những thư viện này có các phiên bản mới hơn nhưng mình chỉ sử dụng những phiên bản cũ phù hợp với template mà chúng ta đang sử dụng là SB Admin 2.

Để thêm các thư viện này vào ứng dụng Questions Management của chúng ta, mình sẽ chạy những câu lệnh sau:

sau đó, sẽ khai báo trong phần scripts của tập tin angular.json ở thư mục root của project Angular các thư viện này:

Trong tập tin style.css ở thư mục src mình cũng khai báo thêm tập tin CSS của thư viện Datatables.net Bootstrap như sau:

Tiếp theo, mình sẽ tạo mới một component tên là CategoriesComponent nằm trong thư mục src/app/questions/categories:

Questions Management - Frontend - Xây dựng giao diện cho phần Categories

Nội dung của CategoriesComponent sẽ như sau:

với tập tin categories.component.html được xây dựng sử dụng các thư viện Datatables.net, Bootstrap như mình đã nói ở trên như sau:

Bây giờ chúng ta sẽ khai báo CategoriesComponent vào QuestionsModule:

với khai báo Routing cho nó:

Bước cuối cùng chúng ta cần làm là sửa phần menu bên trái cho menu item Categories sử dụng directive routerLink của Angular để chúng ta có thể navigate tới trang Categories này.

Chúng ta sẽ sửa như sau:

Bây giờ, nếu các bạn chạy lại ứng dụng và đi đến trang Categories, các bạn sẽ thấy kết quả như sau:

Questions Management - Frontend - Xây dựng giao diện cho phần Categories

5/5 - (1 bình chọn)

Add Comment