Báo cáo thực tập chuyên ngành

BỘ CÔNG THƯƠNG
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
----------

BÁO CÁO THỰC NGHIỆM
MÔN: TTCN KỸ THUẬT PHẦN MỀM
Đề tài: Tìm hiểu Angular và phát triển ứng dụng
Giáo viên :

Ths Hồng Quang Huy

Nhóm số :

13

Lớp

20212IT6041004

:

Hà Nội, 2022


BỘ CÔNG THƯƠNG
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
----------

BÁO CÁO THỰC NGHIỆM

MÔN: TTCN KỸ THUẬT PHẦN MỀM
Đề tài: Tìm hiểu Angular và phát triển ứng dụng
Giáo viên :

Ths Hồng Quang Huy

Nhóm số :

13

Lớp

20212IT6041004

:

Thành viên:
1.

Đặng Thành An – 2019605444

2.

Nguyễn Thái Bảo – 2019604082

Hà Nội, 2022


MỤC LỤC
MỞ ĐẦU..............................................................................................................1

1. Lý do chọn đề tài........................................................................................1
2. Bố cục đề tài................................................................................................2
CHƯƠNG 1: TỔNG QUAN VỀ ANGULAR...................................................3
1. Khái niệm....................................................................................................3
2. Kiến trúc Angular (Angular Architecture)..............................................3
3. Các tính năng của Angular........................................................................4
4. Angular CLI...............................................................................................4
5. Ưu điểm và nhược điểm của Angular.......................................................5
6. Một số trang web phổ sử dụng Angular...................................................6
CHƯƠNG 2: LÀM VIỆC VỚI ANGULAR......................................................7
1. Làm việc với Angular.................................................................................7
2. Các thành phần (Components).................................................................7
3. Các mẫu (Templates).................................................................................8
3.1.

Nội suy văn bản (text interpolation)...............................................8

3.2.

Câu lệnh mẫu (statements)..............................................................8

3.3.

Liên kết (Binding).............................................................................9

3.4.

Pipes.................................................................................................10

4. Chỉ thị (Directive).....................................................................................11

4.1.

Các chỉ thị thuộc tính tích hợp......................................................11

4.2.

Chỉ thị cấu trúc tích hợp................................................................12

5. Dependency injection...............................................................................14
6. Hướng dẫn dành cho nhà phát triển Angular.......................................15
6.1.

Định tuyến Angular........................................................................15

6.2.

Biểu mẫu..........................................................................................17

6.3.

HTTP Client....................................................................................17

CHƯƠNG 3: ỨNG DỤNG PHÁT TRIỂN......................................................19
1. Khảo sát bài toán.....................................................................................19
2. Phân tích và thiết kế................................................................................20


2.1.

Biểu đồ use case của hệ thống........................................................20

2.2.

Biểu đồ lớp của hệ thống................................................................21

3. Cài đặt chương trình...............................................................................21
PHỤ LỤC...........................................................................................................29
1.

Điều kiện tiên quyết...........................................................................29

2.

Thiết lập môi trường.........................................................................29

3.

Cài đặt Angular CLI..........................................................................30

4.

Tạo không gian làm việc và ứng dụng đầu tiên..............................30

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN...........................................................32
1. Kết luận:...................................................................................................32
1.1.

Kết quả đạt được:...........................................................................32

1.2.

Chức năng phát triển:....................................................................32

2. Hướng phát triển:....................................................................................32
LỜI CẢM ƠN.....................................................................................................33


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

MỞ ĐẦU
1.

Lý do chọn đề tài
Ngày nay, các doanh nghiệp đang phấn đấu cho sự hiện diện trực tuyến cực

kỳ hiệu quả. Do đó, nhu cầu về một khung (framework) phát triển web mạnh mẽ
với các tính năng tiên tiến đang ở mức rất cao.
Angular là một khung phát triển web (web development framework) rất
phổ biến cung cấp trải nghiệm người dùng phong phú, khả năng phản hồi nhanh
(fast responsiveness) và khả năng bảo trì mã (code maintainability). Đây là
framework được sử dụng nhiều thứ tư theo Khảo sát của Stack Overflow năm
2021.
Công cụ này được tạo ra vào năm 2009 bởi Google để hỗ trợ phát triển
web. Nó là một trong những JavaScript framework được tìm kiếm nhiều nhất và
nhằm mục đích làm cho việc phát triển front-end trở nên đơn giản và dễ tiếp cận
hơn nhiều.
Nhiều tổ chức đã nhận ra rằng đối với sự phát triển kinh doanh của họ, việc
xây dựng các ứng dụng web và ứng dụng di động bằng cách sử dụng Angular sẽ
giúp họ cung cấp trải nghiệm người dùng phong phú, dễ truy cập, tốc độ và năng
suất. Vì vậy, Angular (JavaScript framework) với kiến trúc MVVM rất được ưu

tiên để phát triển các ứng dụng web và thiết bị di động tương tác có giao diện
người dùng khai báo, mã nhất quán, cấu trúc mô-đun để hỗ trợ ứng dụng trang
đơn (SPA) và hơn thế nữa.
Nhận thức được sự quan trọng và cũng như sự tiện lợi khi sử dụng Angular
trong việc xây dựng web và ứng dụng trang đơn (SPA), chúng em xin được tìm
hiểu và trình bày những kiến thức liên quan đến Angular. Qua đó có thể xây
dựng một sản phẩm dựa trên những kiến thức đã tìm hiểu được.

1


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

2.

Bố cục đề tài

Nội dung chính gồm 3 chương

 Chương 1: Tổng quan về Angular
Giới thiệu về Angular: khái niệm, ưu và nhược điểm, các đặc trưng,…

 Chương 2: Làm việc với Angular
Hướng dẫn cách làm việc với Angular: các thành phần, các lệnh và cách
hoạt động của các lệnh

 Chương 3: Ứng dụng phát triển
Xây dựng ứng dụng demo có sử dụng Angular
Ngồi nội dung chính ra, phần Phụ lục sẽ hướng dẫn cách cài đặt IDE, môi
trường cần thiết để viết mã Angular.

2


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

CHƯƠNG 1: TỔNG QUAN VỀ ANGULAR
1.

Khái niệm
Angular là một front-end framework mã nguồn mở do Google phát triển để

tạo các ứng dụng web hiện đại sinh động. Nó sử dụng ngơn ngữ lập trình
TypeScript dựa trên JavaScript để loại bỏ mã khơng cần thiết và đảm bảo các
ứng dụng nhẹ hơn và nhanh hơn.
Angular giúp xây dựng các ứng dụng trang đơn (SPA – Single Page
Application) tương tác và động thông qua các tính năng hấp dẫn của nó bao gồm
tạo khn mẫu, ràng buộc hai chiều, mơ-đun hóa, xử lý API RESTful,
dependency injection và xử lý AJAX.
2.

Kiến trúc Angular (Angular Architecture)
Angular tuân theo kiến trúc MVC, sơ đồ của MVC framework như hình

dưới đây:

Hình 1.1. Sơ đồ kiến trúc Angular
Chú thích:

3

NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

- Controller: Bộ điều khiển đại diện cho lớp có logic nghiệp vụ.
- View: Chế độ xem được sử dụng để đại diện cho lớp bản trình bày được
cung cấp cho người dùng cuối
- Model: Mơ hình được sử dụng để đại diện cho dữ liệu
3.

Các tính năng của Angular
Angular có các tính năng chính:
 MVC (Model-View-Controller): Mẫu này dựa trên việc tách lớp logic
nghiệp vụ, lớp dữ liệu và lớp trình bày thành các phần riêng biệt. Việc
phân chia thành các phần khác nhau để mỗi phần có thể được quản lý dễ
dàng hơn.
 Liên kết mơ hình dữ liệu (Data Model Binding): không cần phải viết
mã đặc biệt để liên kết dữ liệu với các điều khiển HTML. Điều này có
thể được thực hiện bởi Angular chỉ bằng cách thêm một vài đoạn mã.
 Viết mã ít hơn (Writing less code): khi thực hiện thao tác DOM
(Document Object Model – Mô hình Các Đối tượng Tài liệu - được
dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML
hay XML bằng các ngơn ngữ lập trình thơng dụng như Javascript, PHP),
sử dụng Angular thì số lượng mã cần viết sẽ ít hơn so với sử dụng
Javascript.
 Kiểm thử đơn vị (Unit Testing): framework kiểm thử “Karma” giúp
thiết kế các kiểm thử đơn vị cho các ứng dụng Angular

4.

Angular CLI

Angular CLI (command line interface) là cách nhanh nhất, đơn giản và được
khuyến nghị để phát triển các ứng dụng Angular. Angular CLI giúp một số tác
vụ không gặp sự cố. Dưới đây là một số ví dụ:
Command

Details

4


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

ng build

Biên dịch một ứng dụng Angular vào một

ng serve

thư mục đầu ra.
Xây dựng và phục vụ ứng dụng, xây dựng

ng generate
ng test

lại khi thay đổi tệp.
Tạo hoặc sửa đổi tệp dựa trên giản đồ.
Chạy các bài kiểm thử đơn vị trên một dự

ng e2e

án nhất định.
Xây dựng và cung cấp ứng dụng Angular,
sau đó chạy các bài kiểm tra từ đầu đến
cuối.

5.

Ưu điểm và nhược điểm của Angular.

-

Ưu điểm : là một giải pháp hữu hiệu dành cho các Single Page Application
làm việc.


Liên kết hai chiều(Two-way binding): Angular giữ cho lớp dữ liệu và
bản trình bày được đồng bộ hóa, chỉ cần chỉ định điều khiển nào bị
ràng buộc với phần nào của mơ hình

Hình 1.2. Ưu điểm của Angular


Có thể tái sử dụng thành phần (component) tiện ích.



Angular hỗ trợ kiểm thử, hỗ trợ cả Kiểm thử đơn vị (Unit Testing) và
Kiểm thử tích hợp (Integration Testing).



Định tuyến (Routing): Angular có thể đảm nhận việc định tuyến có
nghĩa là chuyển từ chế độ xem này sang chế độ xem khác.

5


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN



Hỗ trợ cho các lập trình viên có thể viết code được ít hơn với nhiều
chức năng hơn.



Chạy Angular linh hoạt trên nhiều loại trình duyệt khác nhau: cả PC
và mobile.

-

Nhược điểm:


Bản chất của Angular là một trong các Front End mà front end này
thường vốn không thể bảo mật bằng Back End. Vì thế, các vấn đề phát
sinh về dữ liệu thường khơng an tồn. Nếu có sử dụng, bạn cần thiết
lập một hệ thống kiểm tra dữ liệu sao cho việc trả về được tốt nhất.



Với một số trình duyệt sở hữu tính năng Disable Javascript nên có
nghĩa là website sẽ khơng hồn tồn có thể sử dụng được dựa trên
những trình duyệt đó nữa.

6.

Một số trang web phổ sử dụng Angular


Các ứng dụng stream video trực tiếp như Youtube trên Playstation 3



Các ứng dụng thương mại điện tử như T-Mobile



Trang tìm việc làm freelancer.com



Trang xem phim Netflix.com

6


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

CHƯƠNG 2: LÀM VIỆC VỚI ANGULAR
1.

Làm việc với Angular

Những điều cần biết khi làm việc của Angular Framework
 Components
 Templates
 Directives
 Dependency injection
2.

Các thành phần (Components)

Các thành phần (components) là khối xây dựng chính cho các ứng dụng
Angular. Mỗi thành phần bao gồm:
 Mẫu HTML khai báo những gì hiển thị trên trang
 Một lớp TypeScript xác định hành vi
 Bộ chọn CSS xác định cách thành phần được sử dụng trong mẫu
 Tùy chọn, các kiểu CSS được áp dụng cho mẫu
Sử dụng Angular CLI để tạo một thành phần. Từ cửa sổ dòng lệnh, điều hướng
đến thư mục chứa ứng dụng.
Chạy lệnh: ng create component <component-name>
trong đó <component-name> là tên của thành phần mới.

7


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

Hình 2.1. Tạo mới một thành phần
3.

Các mẫu (Templates)

Trong Angular, một mẫu là một bản thiết kế cho một phần của giao diện người
dùng (UI). Các mẫu được viết bằng HTML và cú pháp đặc biệt có thể được sử
dụng trong một mẫu để xây dựng dựa trên nhiều tính năng của Angular.
 Text interpolation
 Template statements
 Binding
 Pipes
3.1. Nội suy văn bản (text interpolation)
Nội suy (text interpolation) đề cập đến việc nhúng các biểu thức vào văn bản
được đánh dấu. Theo mặc định, phép nội suy sử dụng dấu ngoặc nhọn kép “{{”
và “}}” làm dấu phân cách.
Ví dụ minh họa cách hoạt động của nội suy: một thành phần Angular có chứa
biến currentCustomer:

8


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

Sử dụng phép nội suy để hiển thị giá trị của biến này trong mẫu thành phần
tương ứng:

3.2. Câu lệnh mẫu (statements)
Câu lệnh mẫu (template statements) là các phương thức hoặc thuộc tính được sử

dụng trong HTML để phản hồi các sự kiện của người dùng. Với các câu lệnh
mẫu, ứng dụng có thể thu hút người dùng thông qua các hành động như hiển thị
nội dung động hoặc gửi biểu mẫu.
Ví dụ, câu lệnh mẫu deleteHero () xuất hiện trong dấu ngoặc kép ở bên phải
của ký tự bằng dấu “=” như trong (event) = "câu lệnh".
Khi người dùng nhấp vào nút “Delete hero”, Angular sẽ gọi phương thức
deleteHero () trong lớp thành phần.

Hình 2.2. Câu lệnh mẫu
3.3. Liên kết (Binding)
Trong một khuôn mẫu Angular, một liên kết (Binding) tạo ra một kết nối trực
tiếp giữa một phần của giao diện người dùng được tạo từ một khuôn mẫu (một
phần tử DOM, chỉ thị hoặc thành phần) và mơ hình (bản sao thành phần mà
khn mẫu đó thuộc về).

9


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

Kết nối này có thể được sử dụng để đồng bộ hóa chế độ xem (View) với mơ
hình (Model), để thơng báo cho mơ hình khi một sự kiện hoặc hành động của
người dùng diễn ra trong chế độ xem hoặc cả hai.
Thuật toán Phát hiện Thay đổi (Change Detection algorithm) của Angular chịu
trách nhiệm giữ cho chế độ xem và mơ hình được đồng bộ.


Property binding



Event binding



Two-way binding

Liên kết (binding) ln có hai phần
-

mục tiêu sẽ nhận giá trị liên kết

-

biểu thức mẫu tạo ra giá trị từ mơ hình.

1) Liên kết các thuộc tính
Liên kết thuộc tính (Property binding) trong Angular giúp đặt giá trị cho
các thuộc tính của các phần tử hoặc chỉ thị HTML. Sử dụng liên kết thuộc
tính để thực hiện những việc như chuyển đổi chức năng của nút, đặt
đường dẫn theo chương trình và chia sẻ giá trị giữa các thành phần.
Để liên kết với thuộc tính của một phần tử, hãy đặt nó trong dấu ngoặc
vng, [], xác định thuộc tính là thuộc tính đích.

Hình 2.3. Liên kết

10


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

2) Liên kết với các sự kiện
Để liên kết với một sự kiện (Event binding) cần sử dụng cú pháp liên kết
sự kiện Angular. Cú pháp này bao gồm: tên sự kiện đích trong dấu ngoặc
đơn ở bên trái dấu bằng và câu lệnh mẫu được trích dẫn ở bên phải.
Ví dụ: tạo sự kiện click khi nhấn vào nút

Hình 2.4.. Liên kết sự kiện
3) Liên kết hai chiều
Liên kết hai chiều(Two way binding) cung cấp cho các thành phần trong
ứng dụng để chia sẻ dữ liệu. Sử dụng ràng buộc hai chiều để lắng nghe
các sự kiện và cập nhật giá trị đồng thời giữa các thành phần cha và con.
Cú pháp liên kết hai chiều của Angular là sự kết hợp của dấu ngoặc vuông
và dấu ngoặc đơn, [()]. Cú pháp [()] kết hợp dấu ngoặc của ràng buộc
thuộc tính, [], với dấu ngoặc của ràng buộc sự kiện, (), như sau.

Hình 2.5. Liên kết hai chiều

11


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

3.4. Pipes
Pipes là các hàm đơn giản để sử dụng trong các biểu thức mẫu để chấp nhận một
giá trị đầu vào và trả về một giá trị đã chuyển đổi. Pipes rất hữu ích vì nó có thể
được sử dụng trong tồn bộ ứng dụng, trong khi chỉ khai báo mỗi pipe một lần.
Ví dụ: Sử dụng pipe để hiển thị ngày là ngày 15 tháng 4 năm 1988 thay vì định
dạng chuỗi thơ.
Angular cung cấp các pipes tích hợp cho các phép biến đổi dữ liệu điển hình,

bao gồm các phép biến đổi để quốc tế hóa (i18n), sử dụng thơng tin ngôn ngữ để
định dạng dữ liệu.
Dưới đây là các pipes tích hợp thường được sử dụng để định dạng dữ liệu:





DatePipe: Định dạng giá trị ngày theo quy tắc ngôn ngữ.
UpperCasePipe: Chuyển văn bản thành tất cả các chữ hoa.
LowerCasePipe: Chuyển văn bản thành tất cả các chữ thường.
CurrencyPipe: Chuyển đổi một số thành chuỗi tiền tệ, được định dạng

theo quy tắc ngôn ngữ.
 DecimalPipe: Chuyển một số thành một chuỗi có dấu thập phân, được
định dạng theo quy tắc ngôn ngữ.
 PercentPipe: Chuyển một số thành chuỗi phần trăm, được định dạng theo
quy tắc ngôn ngữ.
4.

Chỉ thị (Directive)

Chỉ thị (Directives) là các lớp bổ sung hành vi bổ sung cho các phần tử trong các
ứng dụng Angular. Sử dụng các chỉ thị có sẵn của Angular để quản lý biểu mẫu,
danh sách, kiểu và những gì người dùng nhìn thấy.
Dưới đây là các loại chỉ thị Angular khác nhau:
 Các thành phần(Components): Được sử dụng với một mẫu. Loại chỉ thị
này là loại chỉ thị phổ biến nhất.
 Các chỉ thị thuộc tính(Attribute directives): Thay đổi giao diện hoặc hành
vi của một phần tử, thành phần hoặc một chỉ thị khác.

12


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

 Chỉ thị cấu trúc(Structural directives) Thay đổi bố cục DOM bằng cách
thêm và xóa các phần tử DOM.
4.1. Các chỉ thị thuộc tính tích hợp
Các chỉ thị thuộc tính lắng nghe và sửa đổi hành vi của các phần tử, thuộc tính,
thuộc tính và thành phần HTML khác.
 ngClass: Thêm và xóa một tập hợp các lớp CSS.
 ngStyle: Thêm và xóa một tập hợp các kiểu HTML.
 ngModel: Thêm liên kết dữ liệu hai chiều vào một phần tử biểu mẫu
HTML.
1) Sử dụng ngClass với một biểu thức

Hình 2.6. sử dụng ngClass
2) Đặt kiểu nội tuyến với ngStyle
Sử dụng NgStyle để đặt nhiều kiểu nội tuyến đồng thời, dựa trên trạng thái
của thành phần.

Hình 2.7. sử dụng ngStyle
3) Hiển thị và cập nhật các thuộc tính với ngModel

13


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

Sử dụng lệnh NgModel để hiển thị thuộc tính dữ liệu và cập nhật thuộc tính
đó khi người dùng thực hiện thay đổi.

Hình 2.8. sử dụng ngModel
4.2. Chỉ thị cấu trúc tích hợp
Các chỉ thị cấu trúc chịu trách nhiệm về bố cục HTML. Chúng định hình hoặc
định hình lại cấu trúc của DOM, thường bằng cách thêm, xóa và thao tác các
phần tử máy chủ mà chúng được gắn vào. Các chỉ thị cấu trúc phổ biến như:
 ngIf: tạo hoặc loại bỏ có điều kiện các lượt xem phụ từ mẫu.
 ngFor: Lặp lại một nút cho mỗi mục trong danh sách.
 ngSwitch: Một tập hợp các lệnh chuyển đổi giữa các chế độ xem thay thế.
1) Sử dụng ngIf
Khi ngIf là false, Angular sẽ xóa một phần tử và các phần tử con của nó khỏi
DOM. Angular sau đó loại bỏ các thành phần của chúng, giúp giải phóng bộ
nhớ và tài nguyên.

14


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

Hình 2.9. sử dụng ngIf
2) Sử dụng ngFor để hiển thị danh sách

Hình 2.10. sử dụng ngFor
3) Sử dụng ngSwitch
NgSwitch hiển thị một phần tử trong số một số phần tử có thể có, dựa trên
điều kiện chuyển đổi.

15

NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

Hình 2.11. sử dụng ngSwitch
5.

Dependency injection
Chèn phụ thuộc(Dependency injection) là các dịch vụ hoặc đối tượng mà

một lớp cần để thực hiện chức năng của nó. Dependency injection, hay DI, là
một mẫu thiết kế trong đó một lớp yêu cầu các phụ thuộc từ các nguồn bên
ngồi thay vì tạo chúng.
Khung DI của Angular cung cấp các phụ thuộc vào một lớp khi khởi tạo.
Sử dụng Angular DI để tăng tính linh hoạt và tính mơ-đun trong các ứng dụng
của bạn.
Để đưa một phụ thuộc vào hàm tạo của một thành phần (), hãy cung cấp
một đối số của hàm tạo với kiểu phụ thuộc. Ví dụ sau chỉ định HeroService

16


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

trong phương thức khởi tạo HeroListComponent. Loại heroService là
HeroService.

Hình 2.12. Chèn phụ thuộc
6.

Hướng dẫn dành cho nhà phát triển Angular
Hướng dẫn dành cho nhà phát triển Angular(Angular Developer Guides) là

một khung ứng dụng, Angular bao gồm một bộ sưu tập các thư viện được tích
hợp tốt bao gồm nhiều tính năng khác nhau.
Các thư viện Angular bao gồm định tuyến, quản lý biểu mẫu, giao tiếp máy
khách-máy chủ và hơn thế nữa.
Chủ đề này liệt kê các hướng dẫn dành cho nhà phát triển khác nhau để hiểu
thêm về các tính năng Angular này và giúp xác định cách sử dụng chính xác
từng tính năng trong ứng dụng.
 Routing and Navigation
 Form
 HTTP Client
6.1. Định tuyến Angular
Định tuyến Angular(Routing and Navigation), trong ứng dụng một trang,
việc thay đổi những gì người dùng nhìn thấy bằng cách hiển thị hoặc ẩn các
phần của màn hình tương ứng với các thành phần cụ thể, thay vì đi ra ngồi máy

17


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

chủ để lấy một trang mới. Khi người dùng thực hiện các tác vụ ứng dụng, họ cần
di chuyển giữa các dạng xem khác nhau đã xác định.
Để xử lý điều hướng từ chế độ xem này sang chế độ xem tiếp theo, nên sử
dụng Bộ định tuyến Angular. Bộ định tuyến cho phép điều hướng bằng cách
diễn giải URL của trình duyệt như một chỉ dẫn để thay đổi chế độ xem.
Khám phá một ứng dụng mẫu có các tính năng chính của bộ định tuyến bằng
ví dụ sau.

- Nhập các thành phần mới.
- Để sử dụng các thành phần mới, hãy nhập chúng vào AppRoutingModule
ở đầu tệp, như sau:

Hình 2.13. Định tuyến Angular
- Sau đó xác định các tuyến đường trong mảng Tuyến đường.
- Mỗi tuyến đường trong mảng này là một đối tượng JavaScript chứa hai
thuộc tính. Thuộc tính đầu tiên, đường dẫn, xác định đường dẫn URL cho
tuyến đường. Thuộc tính thứ hai, thành phần, xác định thành phần mà
Angular sẽ sử dụng cho đường dẫn tương ứng.

18


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

Hình 2.14. Đường dẫn
- Sau khi đã xác định các tuyến đường, hãy thêm chúng vào ứng dụng. Đầu
tiên, thêm liên kết vào hai thành phần. Gán thẻ liên kết muốn thêm vào
thuộc tính routerLink. Đặt giá trị của thuộc tính cho thành phần để hiển
thị khi người dùng nhấp vào từng liên kết. Tiếp theo, cập nhật mẫu thành
phần bao gồm <router-outlet>. Phần tử này thông báo cho Angular cập
nhật chế độ xem ứng dụng với thành phần cho tuyến đường đã chọn.

Hình 2.15. Sử dụng định tuyến
6.2. Biểu mẫu
Xử lý đầu vào của người dùng với các biểu mẫu (Form) là nền tảng của
nhiều ứng dụng phổ biến. Các ứng dụng sử dụng biểu mẫu để cho phép người
dùng đăng nhập, cập nhật hồ sơ, nhập thông tin nhạy cảm và thực hiện nhiều tác
vụ nhập dữ liệu khác.

Angular cung cấp hai cách tiếp cận khác nhau để xử lý đầu vào của người
dùng thông qua các biểu mẫu: theo hướng phản ứng và theo mẫu. Cả hai đều
nắm bắt các sự kiện đầu vào của người dùng từ dạng xem, xác thực thông tin

19


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

nhập của người dùng, tạo mơ hình biểu mẫu và mơ hình dữ liệu để cập nhật và
cung cấp cách theo dõi các thay đổi.
Cả hai biểu mẫu theo hướng phản ứng và hướng mẫu đều được xây dựng trên
các lớp cơ sở:
 formControl: Theo dõi giá trị và trạng thái xác thực của một điều khiển
biểu mẫu riêng lẻ.
 formGroup: Theo dõi các giá trị và trạng thái giống nhau cho một tập hợp
các điều khiển biểu mẫu.
 formArray: Theo dõi các giá trị và trạng thái giống nhau cho một mảng
điều khiển biểu mẫu.
 controlValueAccessor: Tạo cầu nối giữa các thể hiện Angular
FormControl và các phần tử DOM tích hợp sẵn.
6.3. HTTP Client
Giao tiếp với các dịch vụ phụ trợ bằng HTTP
Hầu hết các ứng dụng front-end cần giao tiếp với máy chủ qua giao thức HTTP
để tải xuống hoặc tải lên dữ liệu và truy cập các dịch vụ back-end khác. Angular
cung cấp một ứng dụng khách HTTP API cho các ứng dụng Angular, lớp dịch vụ
HttpClient trong @ angle / common / http.
Dịch vụ máy khách HTTP cung cấp các tính năng chính:.
 Khả năng yêu cầu các đối tượng phản hồi đã nhập
 Xử lý lỗi được sắp xếp hợp lý

 Tính năng kiểm tra

20


NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN

 Yêu cầu và đánh chặn phản hồi
Để sử dụng dịch vụ máy khách http cần:
- Thiết lập giao tiếp máy chủ, trước khi sử dụng HttpClient, cần nhập
Angular HttpClientModule. Hầu hết các ứng dụng đều làm như vậy trong
AppModule gốc.

Hình 2.16. Thêm dịch vụ máy khách
- Sau đó, đưa dịch vụ HttpClient vào như một phần phụ thuộc của một lớp
ứng dụng, như được hiển thị trong ví dụ ConfigService sau đây.

21