Frontend Angular
Frontend dùng Angular 20, TypeScript, Signals, RxJS, Sass, PWA, Dexie và Shaka Player.
Nếu bị hỏi sâu về giao diện, đổi màu, đổi layout hoặc smoke responsive, mở thêm UX/UI và design system.
Folder map
| Folder |
Vai trò |
fe/src/app/api |
API client, endpoint constants, DTO types |
fe/src/app/core |
Auth, guards, interceptors, singleton services |
fe/src/app/features |
Các feature chính: teacher, student, admin, learning, ai-chat |
fe/src/app/shared |
Component/service dùng lại |
fe/src/app/state |
Global state/signal store |
Quy tắc Angular hiện tại
- Component standalone theo Angular 20.
- Dùng
inject() thay vì constructor injection khi viết mới.
- Dùng
signal, computed, input, output cho UI state.
- Dùng
@if, @for, @switch thay cho *ngIf, *ngFor, *ngSwitch.
- Component nên có
ChangeDetectionStrategy.OnPush.
Khi cần sửa màu/layout
- Tìm component template
.html.
- Xem class style trong
.scss hoặc Tailwind utility ngay trong template.
- Ưu tiên design token đang dùng:
#0056D2, bg-slate-50, border-gray-200, semantic red chỉ cho lỗi/xóa.
- Kiểm lại trạng thái hover, focus, disabled, loading, empty, error và viewport mobile.
Khi cần sửa logic
| Tình huống |
Mở file |
| Course editor |
fe/src/app/features/teacher/course-editor |
| Teacher dashboard |
fe/src/app/features/teacher/dashboard |
| Learning player |
fe/src/app/features/learning/pages/course-learning.component.* |
| AI/Wiii/Pointy |
fe/src/app/features/ai-chat |
| Auth/JWT |
fe/src/app/core/services/auth.service.ts, interceptors/guards |
| API contract |
fe/src/app/api |
UI primitives quan trọng
| Thành phần |
File |
Khi dùng |
| Button |
fe/src/app/shared/components/ui/button/button.component.ts |
Nút dùng lại ở vùng UI chung |
| Card |
fe/src/app/shared/components/ui/card/card.component.ts |
Khung nội dung/card dùng lại |
| Toast |
fe/src/app/shared/components/toast-container/toast-container.component.ts |
Thông báo lưu thành công/lỗi |
| Dialog |
fe/src/app/shared/components/dialog/dialog.component.ts |
Modal có scroll lock/focus behavior |
| Confirm dialog |
fe/src/app/shared/components/confirm-dialog/confirm-dialog.component.ts |
Xác nhận hành động nguy hiểm |
| Sidebar theo role |
fe/src/app/shared/components/navigation/sidebar.component.* |
Điều hướng chính, collapse, tooltip |
| Icon |
fe/src/app/shared/components/ui/icon/icon.component.ts |
Giữ icon nhất quán, tránh emoji/text thô |