Cách gợi ý cho mô hình ngôn ngữ lớn (LLM) viết mã Angular

Viết mã Angular với sự trợ giúp của AI giống như lập trình cặp với một người biết tất cả — nhưng chỉ khi bạn đặt đúng câu hỏi.

Hướng dẫn này sẽ đưa bạn qua cách hiệu quả nhất để gợi ý LLM viết ứng dụng và component Angular, dựa trên những thực hành tốt nhất được các chuyên gia công nhận trong TypeScript và Angular.

Các best pratice trong TypeScript và Angular

Dưới đây là danh sách kiểm tra các thực hành tốt nhất mà bạn nên mong đợi LLM tuân theo. Hãy dùng chúng để xây dựng prompt hợp lý và kiểm tra kết quả đầu ra.

1. Best pratice với TypeScript

• Bật kiểm tra kiểu nghiêm ngặt: Prompt nên luôn giả định rằng dự án sử dụng strict: true trong tsconfig.json.

• Ưu tiên suy luận kiểu khi rõ ràng: Hãy để TypeScript tự động suy luận kiểu khi có thể — không cần làm rối mã với các khai báo kiểu dư thừa.

• Tránh dùng any; hãy dùng unknown: any làm mất đi tính an toàn kiểu. Nếu chưa biết kiểu, hãy yêu cầu dùng unknown + bộ kiểm tra kiểu (type guard).

2. Best practice với Angular

Component

• Luôn sử dụng component độc lập (standalone component) — không cần khai báo standalone: true, vì đã ngầm định.
• Sử dụng signals và computed() để quản lý trạng thái.
• Giữ component nhỏ gọn và chỉ thực hiện một nhiệm vụ (single responsibility).
• Dùng hàm input() và output() thay vì decorator @Input() và @Output().
• Đặt changeDetection: ChangeDetectionStrategy.OnPush.
• Ưu tiên template nội dòng (inline template) cho các component nhỏ.
• Tránh dùng ngClass và ngStyle; thay vào đó hãy dùng binding [class] và [style].
• Ưu tiên Reactive Forms hơn là template-driven forms.

Service

• Thiết kế service với nguyên tắc một nhiệm vụ duy nhất (single responsibility).
• Sử dụng providedIn: 'root' để tạo singleton service.
• Dùng hàm inject() thay vì tiêm qua constructor.

Trạng thái & Template

• Dùng signals cho trạng thái cục bộ.
• Dùng computed() cho các giá trị dẫn xuất.
• Giữ trạng thái thuần (pure) và dễ đoán.
• Trong template, tránh viết logic phức tạp.
• Dùng cấu trúc điều khiển gốc (@if, @for, @switch) thay vì các directive cấu trúc như *ngIf, *ngFor, *ngSwitch.
• Dùng async pipe cho các observable.

Tài nguyên & Định tuyến

• Dùng NgOptimizedImage cho tất cả ảnh tĩnh.
• Sử dụng lazy loading cho tất cả các route tính năng (feature routes).

Khi xem lại mã Angular do LLM sinh ra

LLM có thể “ảo giác” hoặc sử dụng các mẫu mã lỗi thời. Khi đánh giá mã, luôn kiểm tra:

✅ Có sử dụng signals thay vì RxJS (trừ khi thực sự cần thiết) ✅ Dùng computed() cho các giá trị dẫn xuất ✅ Sử dụng đúng inject() trong service ✅ Template nội dòng cho component đơn giản ✅ Không dùng *ngIf, *ngFor; thay vào đó là @if, @for ✅ Không có ngClass hay ngStyle

Chúc bạn prompt vui vẻ! 🎯