fddfggfdgfd

1. Tìm hiểu về Angular
22110066 - Phạm Võ Trường Quân
22110053 - Nguyễn Hà My
22110026 - Lê Huy Hoàng
Nhóm 1

2. Phụ lục
Giới thiệu Angular và Kiến trúc
Component và Template
Module và Dependency Injection
Service và HTTP Client
Routing và Navigation
Forms (Template-driven & Reactive)
Lợi ích và hệ sinh thái Angular
Quản lý trạng thái (NgRx)

4. LỊCH SỬ
PHÁT TRIỂN
AngularJS (1.x): Là phiên bản ban đầu của Angular, phát
hành năm 2010. Nó cung cấp một cách tiếp cận khác biệt
đối với việc xây dựng ứng dụng web so với các thư viện
JavaScript khác, bằng cách sử dụng các khái niệm như
data binding hai chiều và directives. Sử dụng kiến trúc
MVC ( Model-View-Controller ).
Angular 2+: Được phát hành vào năm 2016, Angular 2 đã
đem lại một cải tiến lớn so với AngularJS. Angular 2+ được
thiết kế để tối ưu hóa hiệu suất và độ tin cậy của ứng
dụng, sử dụng kiến trúc Component-based.

5. Angular v20 (phát hành tháng 5/2025) đánh dấu bước ngoặc lớn trong quá
trình hiện đại hóa Framework, tập trung vào hiệu năng, cú pháp và trải
nghiệm lập trình hiện đại :
Signals API - Chính thức ổn định
Zoneless Mode →Developer Preview giúp hiệu suất, bundle, debug
Incremental Hydration - Tăng tốc độ tải trang
Structural directives →Control Flow Syntax

6. Các khái niệm cơ
bản trong Angular Component được tạo ra để hiện thực 1 chức năng
nào đó trong ứng dụng của bạn. Ví dụ component
Liên hệ, component giới thiệu, bình luận, đăng ký,
giỏ hàng, chi tiết sản phẩm…
Mỗi component gồm 3 phần:
Phần template (file .html, .css)
– là nơi code HTML thể hiện dữ
liệu và CSS mô tả kiểu dáng.
Phần code chính (file .ts) – là
nơi viết code typescript để tính
toán, xử lý trong component.
Phần metadata là nơi khai báo
các thông tin bổ sung cho
component.
Component

7. Các khái niệm cơ
bản trong Angular
Data binding là cơ chế cho phép bạn đồng bộ hóa dữ liệu
giữa các thành phần của Angular: component, directive
và template. Nó giúp hiển thị dữ liệu từ component ra
template và cập nhật dữ liệu trong component dựa trên
sự tương tác của người dùng trên template.
One-Way Data Binding: Dữ liệu chuyển từ
component đến template hoặc ngược lại,
nhưng không cả hai chiều.
Data binding

8. Các khái niệm cơ
bản trong Angular
Data binding là cơ chế cho phép bạn đồng bộ hóa dữ liệu
giữa các thành phần của Angular: component, directive
và template. Nó giúp hiển thị dữ liệu từ component ra
template và cập nhật dữ liệu trong component dựa trên
sự tương tác của người dùng trên template.
Data binding
Two-Way Data Binding: Dữ liệu được
đồng bộ hóa cả hai chiều giữa
component và template.

9. Các khái niệm cơ
bản trong Angular
Module là một phần quan trọng của ứng dụng.
Mỗi ứng dụng Angular chia thành các module để
tổ chức mã và chức năng. Module giúp tách biệt
các phần của ứng dụng và quản lý các phụ thuộc
(dependencies) của chúng.
1.App Module (Root Module): AppModule
là module gốc của ứng dụng Angular. Nó
được khai báo trong file app.module.ts.
AppModule được khởi chạy đầu tiên khi
ứng dụng bắt đầu chạy.
2.Feature Module: Feature Module là các
module con được tạo ra để tổ chức chức
năng cụ thể của ứng dụng. Nó giúp tách
biệt và tái sử dụng mã, cũng như giúp làm
cho ứng dụng dễ bảo trì và mở rộng.
Module

10. Injector: là một object có chứa các
API để chúng ta có thể lấy về các
instances đã tạo hoặc tạo các
instances của các phụ thuộc.
Provider: giống như một công thức
để Injector có thể biết làm thế nào để
tạo một instance của một phụ thuộc.
Dependency: là một object (có thể là
function, một value thông thường) của
một kiểu dữ liệu cần phải khởi tạo.
Các khái niệm cơ
bản trong Angular
Dependency injection (DI) là một kỹ thuật thiết kế phần
mềm, một biến thể của Inversion of Control (IoC), trong đó
một hoặc nhiều phụ thuộc (hoặc "dịch vụ") của một đối
tượng (hoặc "client") được cung cấp từ bên ngoài, thay vì
đối tượng tự tạo ra chúng
Dependency Injection
Trong Angular, DI bao gồm ba thành phần sau:

11. Các khái niệm cơ
bản trong Angular
Service là các đoạn code được tạo ra để
phục vụ một chức năng nào đó. Chẳng hạn
như tính toán, lấy dữ liệu từ server, validate
dữ liệu…Service được sử dụng trong
component thông qua dependency
injection.
Service

12. Các khái niệm cơ
bản trong Angular
HTTP Client là công cụ giúp ứng dụng
Angular tải lên hoặc tải xuống dữ liệu từ
máy chủ qua các giao thức HTTP (ví dụ:
RESTful API)
HTTP Client

13. Các khái niệm cơ
bản trong Angular
Routing
Angular Routing là hệ thống cho phép xây
dựng các ứng dụng một trang (SPA), trong
đó giao diện người dùng thay đổi dựa trên
URL của trình duyệt mà không cần tải lại
toàn bộ trang. Nó là việc lên kế hoạch và
thiết lập bản đồ cho ứng dụng.

14. Các khái niệm cơ
bản trong Angular
Navigation
Angular Navigation là quá trình (hành động) thay đổi trạng thái của
ứng dụng (và URL của trình duyệt) để chuyển từ một Component
sang một Component khác thông qua các tuyến đường đã được thiết
lập (Routing). Đây là việc đi lại trên các con đường đã được vẽ.

15. Các Phương pháp Điều hướng
1. Điều hướng Khai báo (Declarative Navigation)
Mục đích: Tạo các liên kết điều hướng đơn giản, trực quan trong template HTML.
Công cụ: Sử dụng chỉ thị routerLink trên thẻ <a>.
Ví dụ: <a **routerLink**="/products/list">Danh sách Sản phẩm</a>
2. Điều hướng Lập trình (Programmatic Navigation)
Mục đích: Điều hướng có điều kiện, sau khi thực hiện một hành động (như gửi form, đăng nhập
thành công) hoặc cần truyền tham số phức tạp.
Công cụ: Sử dụng dịch vụ Router đã được Inject và phương thức Maps().
Ví dụ: Sau khi lưu dữ liệu, gọi this.**router.navigate**(['/products', savedId]);

16. Forms: Template-
driven & Reactive
Mục tiêu cuối cùng của cả hai đều là quản
lý dữ liệu người dùng nhập, nhưng chúng
khác nhau về cách thức hoạt động cơ bản
và khi nào nên sử dụng từng loại.

17. Template-driven Forms là phương pháp:
Lấy logic từ HTML Template: Điều khiển và xác thực được đặt
trong HTML qua các directive (như ngModel).
Tốt nhất cho biểu mẫu đơn giản: Phù hợp cho các trường hợp sử
dụng cơ bản, ít thay đổi.
Sử dụng Ràng buộc Hai chiều ([(ngModel)]): Tự động đồng bộ dữ
liệu giữa input và component.
Mã Component gọn gàng: Logic biểu mẫu được "ẩn" trong
template.
Cần import FormsModule.

18. Reactive Forms là phương pháp:
Lấy logic từ Component Class: Cấu trúc form được tạo ra trong
TypeScript bằng các lớp như FormGroup và FormControl.
Tốt nhất cho biểu mẫu phức tạp/động: Cung cấp linh hoạt và
kiểm soát cao cho các kịch bản phức tạp, tùy chỉnh.
Dùng Observable (RxJS): Xử lý thay đổi dữ liệu và trạng thái form
theo lập trình phản ứng.
Dễ kiểm thử (Testing): Logic nằm trong code component, tách
biệt với template, giúp việc unit test dễ dàng hơn.
Cần import ReactiveFormsModule.

19. Quản lí trạng
thái (NgRx)
Phương pháp lưu trữ dữ liệu lớn
Nhờ có NgRx các component cập
nhật và chia sẽ dữ liệu một cách
dễ dàng nhất

20. Khái niệm
NgRx là một thư viện phản ứng (reactive) và tập trung để quản lý State (Trạng thái) của
ứng dụng Angular.
Nó được xây dựng dựa trên các nguyên tắc của kiến trúc Redux, nhằm cung cấp một cách
thức dễ dự đoán và có thể truy vết để quản lý dữ liệu ứng dụng.
Mục tiêu chính: Giải quyết vấn đề dữ liệu phức tạp, phân tán trong các ứng dụng lớn
bằng cách tạo ra một Nguồn Chân Lý Duy Nhất (Single Source of Truth).
Cơ chế hoạt động: NgRx áp dụng một Luồng Dữ liệu Đơn Hướng (Unidirectional Data
Flow) nghiêm ngặt. Điều này có nghĩa là State chỉ có thể được thay đổi thông qua một
quy trình rõ ràng (Action →Reducer →New State), giúp việc gỡ lỗi và kiểm soát ứng
dụng trở nên đơn giản hơn rất nhiều.

21. Khái niệm
NgRx bao gồm 5 thành phần cốt lõi hoạt động cùng nhau trong luồng dữ liệu đơn hướng:
1. Store (Kho Lưu Trữ)
Vai trò: Là nguồn chân lý duy nhất lưu trữ toàn bộ State (dữ liệu) của ứng dụng dưới
dạng một đối tượng JavaScript.
Tính chất: State trong Store là bất biến (immutable). Khi có thay đổi, NgRx sẽ tạo ra một
State mới thay vì chỉnh sửa State cũ.
Tương tác: Component dispatch (gửi) Actions để yêu cầu thay đổi State và select (truy
vấn) dữ liệu từ Store để hiển thị.

22. Khái niệm
2. Actions (Hành động)
Định nghĩa: Là các đối tượng JavaScript đơn giản mô tả sự kiện độc nhất đã xảy ra
trong ứng dụng (ví dụ: người dùng nhấp vào nút, API trả về dữ liệu thành công).
Chức năng: Là cách duy nhất để khởi tạo thay đổi State.
Cú pháp: Thường được tạo bằng hàm createAction.

23. Khái niệm
3. Reducers (Bộ Giảm Thiểu)
Định nghĩa: Là hàm thuần túy (Pure Functions).
Đầu vào: Nhận State hiện tại và Action vừa được gửi.
Đầu ra: Trả về một State mới hoàn toàn (đảm bảo tính bất biến).
Quy tắc: Reducers không được phép thực hiện bất kỳ tác vụ bất đồng bộ nào (ví dụ: gọi
API). Chúng chỉ định nghĩa cách thức State thay đổi theo từng Action.

24. Khái niệm
4. Effects (Tác Dụng)
Định nghĩa: Các services được sử dụng để quản lý Tác vụ phụ (Side Effects).
Vai trò: Xử lý các hoạt động bất đồng bộ hoặc bên ngoài Store như gọi API (HTTP
requests), tương tác với Local Storage, hoặc xử lý các lỗi.
Cơ chế: Effect lắng nghe các Action đầu vào, thực hiện tác vụ bất đồng bộ, và sau khi
hoàn thành, chúng gửi đi một Action mới (ví dụ: loadSuccess hoặc loadFailure) để
Reducer cập nhật State.

25. Khái niệm
5. Selectors (Bộ Chọn)
Định nghĩa: Các hàm dùng để truy vấn, trích xuất (select) và tính toán các phần tử dữ
liệu cụ thể từ Store.
Lợi ích: Tăng hiệu suất nhờ memoization (bộ nhớ đệm), đảm bảo rằng phép tính chỉ
được thực hiện lại khi dữ liệu đầu vào thực sự thay đổi.
Tương tác: Component sử dụng Selectors để lấy dữ liệu dưới dạng Observable và hiển
thị trên giao diện.

26. Angular được thiết kế cho các ứng dụng phức tạp với cấu trúc mô-đun hóa và hệ thống
quản lý phụ thuộc mạnh mẽ.
Nhờ Dependency Injection và TypeScript, Angular giúp giảm thiểu lỗi runtime, dễ dàng
bảo trì và mở rộng.
Kiến trúc component-based tách biệt logic, giao diện và dữ liệu, giúp các nhóm phát
triển lớn có thể làm việc song song hiệu quả.
Hệ thống routing, form, HTTP client và state management tích hợp sẵn cũng giúp
Angular trở thành lựa chọn tối ưu cho các sản phẩm doanh nghiệp, SPA quy mô lớn
hoặc các dự án dài hạn.
Lợi ích khi sử dụng Angular cho ứng
dụng quy mô lớn

27. Angular sở hữu một hệ sinh thái phong phú bao gồm nhiều công cụ và thư viện hỗ trợ:
- Angular CLI (Command Line Interface) giúp tạo, build, test, deploy và scaffold project
dễ dàng chỉ với vài lệnh như ng new, ng serve, ng generate.
- RxJS cung cấp cơ chế lập trình phản ứng bất đồng bộ mạnh mẽ.
- NgRx hỗ trợ quản lý state cho ứng dụng lớn theo mô hình Redux.
- Angular Material cung cấp thư viện UI hiện đại, trực quan và tuân thủ Material Design.
- Firebase tích hợp thuận tiện cho backend, hosting và authentication.
Sự kết hợp giữa CLI và hệ sinh thái mở rộng giúp Angular trở thành nền tảng toàn diện,
tối ưu cho quy trình phát triển ứng dụng quy mô lớn từ khâu khởi tạo đến triển khai.
Hệ sinh thái và công cụ CLI của
Angular

28. Cài đặt môi trường và tạo project Angular

29. Cài đặt nodejs
Vào https://nodejs.org tải bản nodejs phù hợp với hệ điều hành mà bạn sử
dụng, sau đó cài đặt vào máy
Khi cài nodejs, chương trình npm cũng được cài luôn cùng. NPM là chương
trình giúp bạn cài đặt và quản lý các gói thư viện cho project của bạn.

30. Cài đặt Angular CLI
Angular CLI là gói thư viện giúp cài đặt và thực hiện nhiều tác vụ quản lý project
Angular. Như tạo project, build project, deploy, test, tạo component, service, module…
Để cài đặt Angular CLI bạn mở command line rồi gõ lệnh: npm install -g @angular/cli
Các câu lệnh CLI cơ bản:
ng g c login: tạo component
ng g m auth : tạo module
ng g s authService: Tạo service

31. Tạo project Angular
Để tạo project Angular, chạy lệnh sau trong command line: ng new <tênfolder>
Chạy project
Trong command line, chuyển vào folder project và chạy lệnh: ng serve -o
Nếu thành công sẽ mở trình duyệt với địa chỉ http://localhost:4200/

32. src: chứa source code project
angular.json : nơi cấu hình Angular CLI
karma.config.js : cấu hình chạy các testing (kiểm thử)
package.json: chứa thông tin các thư viện cần trong project
src/app : chứa code chính của project.
src/app/app.component.html: file view chứa code html và dữ liệu
show cho người dùng.
src/app/app.component.ts: file component chính, chứa các hàm và
các biến của bạn
src/app/app.component.css: chứa định dạng css cho
app.component.html
src/app/app.module.ts : nơi nhúng các module dùng trong project.
src/app/app-routing.module.ts : nơi định nghĩa các route trong
project
Cấu trúc file và folder trong
project Angular
node_modules: chứa cácmodules củaAngular

33. Kết Luận
Angular là một công nghệ quan trọng trong việc xây dựng các ứng dụng web hiện đại. Với
cấu trúc cơ bản và các tính năng mạnh mẽ, Angular giúp cho việc phát triển ứng dụng trở
nên dễ dàng, linh hoạt và bảo trì. Sự phát triển liên tục và sự hỗ trợ từ cộng đồng đảm bảo
rằng Angular sẽ tiếp tục là một trong những lựa chọn hàng đầu cho các nhà phát triển
web trong tương lai.

34. Thanks You