Nền tảng Angular

Angular không chỉ là cách viết giao diện. Để học hiệu quả, hãy hiểu trước framework này giải quyết vấn đề gì, các khối của ứng dụng phối hợp ra sao, rồi mới đi sâu vào component, routing hay dữ liệu từ API.

Mục lụcCopy Anchor Link

• Bắt đầu từ đâu?
• Lộ trình tự học
  • Chặng 1: Định vị Angular
  • Chặng 2: Bổ sung TypeScript
  • Chặng 3: Ghép các khối của ứng dụng
  • Chặng 4: Hiểu đường đi đến giao diện
  • Chặng 5: Nắm mô hình phản ứng
• Cách học để nhớ lâu
• Sau nhóm này, học gì tiếp?
• Đi tới bài học

Bắt đầu từ đâu?Copy Anchor Link

Mục tiêu của nhóm Nền tảng Angular là tạo một mô hình tinh thần đúng: dữ liệu thay đổi ở đâu, Angular cập nhật giao diện như thế nào và mã nguồn nên được chia thành những phần nào. Đây là nền để các phần sau không trở thành việc ghi nhớ cú pháp rời rạc.

Bạn nên hoàn thành các bài theo đúng thứ tự. Mỗi bài trả lời một câu hỏi, rồi tạo tiền đề trực tiếp cho bài tiếp theo:

direction: right

n0: "Angular để làm gì?" {
  width: 168
  height: 58
}

n1: "TypeScript nào cần\nbiết?" {
  width: 168
  height: 58
}

n2: "Các khối Angular\ntổ chức ra sao?" {
  width: 152
  height: 58
}

n3: "Template → DOM\nnhư thế nào?" {
  width: 136
  height: 58
}

n0 -> n1
n1 -> n2
n2 -> n3

direction: right

n3: "Template → DOM\nnhư thế nào?" {
  width: 136
  height: 58
}

n4: "Khi state đổi\nphần nào cập nhật?" {
  width: 168
  height: 58
}

n3 -> n4

Lộ trình tự họcCopy Anchor Link

Mỗi chặng nên được học trong một phiên ngắn. Đọc bài, tự diễn giải lại bằng ví dụ của bạn, rồi mới sang chặng kế tiếp.

Chặng 1: Định vị AngularCopy Anchor Link

Bắt đầu với Angular là gì? để biết Angular phù hợp với loại sản phẩm nào, điểm mạnh của framework và các đánh đổi đi kèm. Đừng cài công cụ vội; trước hết hãy xác định vì sao bạn chọn Angular thay vì chỉ dùng JavaScript hoặc một thư viện giao diện khác.

Hoàn thành khi: bạn có thể mô tả Angular là một framework xây dựng ứng dụng web và nêu được một tình huống nên dùng nó.

Chặng 2: Bổ sung TypeScriptCopy Anchor Link

Tiếp tục với TypeScript cần thiết. TypeScript bổ sung kiểu dữ liệu cho JavaScript, giúp IDE phát hiện lỗi và làm rõ dữ liệu mà component nhận hoặc trả về. Chỉ tập trung vào các phần phục vụ Angular, thay vì cố học mọi tính năng của ngôn ngữ trong một lần.

Hoàn thành khi: bạn đọc được kiểu của biến, hàm và object; đồng thời hiểu vì sao một lỗi kiểu có thể được phát hiện trước lúc chạy ứng dụng.

Chặng 3: Ghép các khối của ứng dụngCopy Anchor Link

Đọc Kiến trúc Angular để liên kết những khái niệm rời rạc thành một ứng dụng: component quản lý một phần giao diện, template mô tả phần hiển thị, còn các cơ chế nền tảng giúp Angular khởi tạo và phối hợp chúng.

Hoàn thành khi: bạn nhìn vào một thư mục Angular và có thể chỉ ra nơi phù hợp để đặt giao diện, logic của giao diện và phần dùng chung.

Chặng 4: Hiểu đường đi đến giao diệnCopy Anchor Link

Đến DOM và template. DOM là cấu trúc đối tượng mà trình duyệt dùng để biểu diễn trang; template là phần khai báo Angular dùng để tạo và cập nhật cấu trúc đó. Nắm mối liên hệ này giúp bạn hiểu binding, sự kiện và điều kiện hiển thị ở các nhóm bài tiếp theo.

Hoàn thành khi: bạn giải thích được rằng thay đổi dữ liệu không tự biến thành giao diện; Angular phải đánh giá template rồi cập nhật DOM cần thiết.

Chặng 5: Nắm mô hình phản ứngCopy Anchor Link

Bắt đầu với Signals và Zone.js để hiểu đường đi từ state đến DOM. Sau đó, đọc Zone.js chi tiết nếu bạn muốn hiểu cơ chế patch async API, NgZone hoặc đang bảo trì dự án Angular truyền thống. Signals biểu diễn trạng thái có thể theo dõi trực tiếp; Zone.js hỗ trợ Angular nhận biết nhiều tác vụ bất đồng bộ để kiểm tra giao diện cần cập nhật.

Hoàn thành khi: bạn phân biệt được “dữ liệu thay đổi” với “Angular quyết định cập nhật giao diện”, biết Signals là hướng tiếp cận quan trọng trong Angular hiện đại, và biết lúc nào cần kiểm tra NgZone trong dự án cũ.

Cách học để nhớ lâuCopy Anchor Link

1. Học theo câu hỏi. Trước mỗi bài, đọc câu hỏi mở đầu của chặng và thử trả lời bằng lời của mình.
2. Luôn gắn với một ví dụ nhỏ. Ví dụ, tạo một biến tên người dùng, hiển thị nó trong template, rồi thay đổi giá trị để quan sát giao diện. Ví dụ ngắn giúp khái niệm DOM, template và reactivity có điểm bám cụ thể.
3. Ghi lại quan hệ, không chỉ cú pháp. Một sơ đồ ba mũi tên như state → template → DOM hữu ích hơn việc ghi nhớ một đoạn mã mà chưa hiểu dữ liệu đi qua đâu.
4. Chỉ sang phần kế tiếp khi đạt mốc. Nếu chưa tự giải thích được mốc “Hoàn thành khi” của chặng hiện tại, hãy đọc lại và làm lại ví dụ trước khi mở bài mới.

Sau nhóm này, học gì tiếp?Copy Anchor Link

Sau khi hoàn thành năm chặng, bạn đã sẵn sàng thiết lập môi trường, dùng Angular CLI và tạo ứng dụng đầu tiên. Hãy chuyển sang nhóm Bắt đầu, rồi tiếp tục theo thứ tự của sidebar.

Đi tới bài họcCopy Anchor Link