27/05/2025
🚀Đã đến lúc quay lại với Angular chưa? Angular hiện đại có gì mới🤔
Nếu bạn đã từng cảm thấy Angular quá nặng nề, khó tiếp cận… thì có lẽ bạn sẽ phải thay đổi quan điểm với Angular hiện đại, đặc biệt là phiên bản v19. Framework này đã “lột xác” mạnh mẽ để đơn giản hóa, dễ tiếp cận hơn bao giờ hết, cùng mình khám phá tìm hiểu xem có gì mới nhé!😁
💡 Những đặc trưng cốt lõi của Angular:
✅ Lập trình hướng đối tượng
✅ Dependency Injection
✅ Module-based Architecture
✅ RxJS
✅ Change Detection
🛠️ Cách tạo 1 dự án mới với Angular CLI:
Lệnh: ng new app-name
Ngoài ra bạn có thể thêm các flag tùy chọn như:
--skip-test: Bỏ tạo file test (spec.ts) cho component/service/module.
--strict: Bật chế độ kiểm tra nghiêm ngặt TypeScript để đảm bảo code chặt chẽ.
--inline-template: Viết template HTML ngay trong file component thay vì tách riêng .html
--minimal: Tạo project tối giản, chỉ bao gồm những gì cần thiết nhất.
--defaults: Dùng cấu hình mặc định, không hỏi thêm câu hỏi khi tạo project.
Sau khi khởi tạo thành công ta sẽ có một dự án Angular standalone hoàn toàn, gọn nhẹ, không còn app.module.ts truyền thống!
Sử dụng lệnh ng serve để chạy ứng dụng.
=================
Cấu trúc file và thư mục hiện đại:
✅ Không còn AppModule
✅ app.routes.ts thay vì app-routing.module.ts
✅ app.config.ts: cấu hình toàn cục, injection và routing
📁 public/: chứa các tài nguyễn tĩnh (ảnh, icon,...)
📁 src/: chứa mã nguồn chính của ứng dụng
📁 app/: chứa các component chính của ứng dụng, cấu hình và định tuyến.
📦 app.component.css: style riêng của AppComponent.
📦 app.component.html: template của component gốc(AppComponent).
📦 app.component.ts: Chứa code của component gốc AppComponent.
📦 app.config.ts: file cấu hình ứng dụng.
📦 app.routes.ts: khai báo định tuyến(router).
📦 index.html: File html chính, nơi Angular render toàn bộ ứng dụng trong .
📦 main.ts: Điểm vào/khởi động ứng dụng.
📦 style.css: Chứa css toàn cục.
📦 angular.json: Cấu hình build, serve, test, lint cho Angular CLI
📦 package.json: Danh sách thư viện, script dùng trong dự án (npm)
📦 tsconfig.app.json: Cấu hình chung cho TypeScript
📦 tsconfig.json: Cấu hình TypeScript riêng cho mã ứng dụng (không bao gồm test)
📦 tsconfig.spec.json: Cấu hình TypeScript riêng cho unit test
=====================
✨ Những tính năng đột phá của Angular hiện đại (v14 → v19):
🧪 Standalone Components & APIs – không còn phải lo tạo Module phức tạp
🧪 inject() – đơn giản hóa việc lấy dependency
🧪 Type-safe Reactive Forms
🧪 Directive Composition API – tái sử dụng logic linh hoạt
🧪 Tương thích RxJS tốt hơn bao giờ hết
🧪 Signals – thay thế hiệu quả cho BehaviorSubject/ReplaySubject
🧪 Cú pháp template mới: , , cực kỳ dễ đọc
🧪 Deferred loading – tải chậm 1 phần template giúp tối ưu hiệu suất
🧪 Công cụ test hiện đại hơn, trực quan hơn
🧪 Server Side Rendering (SSR) dễ triển khai hơn
Tổng kết:
Angular hiện đại đã đơn giản hơn – mạnh mẽ hơn – hiệu quả hơn
👉 Nếu bạn là frontend developer, hãy thử lại Angular với phiên bản mới và chia sẻ quan điểm của bạn nhé!
🚀 Tương lai phát triển web: Reactive + Standalone + Signals 🔥
![[🌟 Everyday English🌟] English Phrasal Verbs P1 - People and Things 🍀 pack into: nhồi nhét, chen chúc vào (nhiều người ch...](https://img4.engineering10.com/486/477/122109080024864775.jpg)
