Xây dựng website hỗ trợ luyện tập và thi olympic tin học

Đóng góp về mặt giáo dục và đào tạo, kinh tế - xã hội, an ninh, quốc phòng và khả năng áp dụng của đề tài: - Một cuốn báo cáo nghiên cứu khoa học có thể dùng làm tài liệu tham khảo cho

THÀNH PHỐ HỒ CHÍ MINH

S 0 9

CÔNG TRÌNH NGHIÊN CỨU KHOA HỌC CỦA SINH VIÊN

XÂY DỰNG WEBSITE HỖ TRỢ LUYỆN TẬP VÀ THI

OLYMPIC TIN HỌC

MÃ SỐ: SV2022-37 CHỦ NHIỆM ĐỀ TÀI: NGUYỄN THÀNH VĂN

S K C 0 0 8 1 3 5

Tp Hồ Chí Minh, tháng 10/2022

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT

BÁO CÁO TỔNG KẾT

ĐỀ TÀI NGHIÊN CỨU KHOA HỌC CỦA SINH VIÊN

XÂY DỰNG WEBSITE HỖ TRỢ LUYỆN TẬP

VÀ THI OLYMPIC TIN HỌC

SV2022 - 37

Thuộc nhóm ngành khoa học: Công nghệ thông tin

SV thực hiện: Nguyễn Thành Văn Nam, Nữ: Nam

Dân tộc: Kinh

Lớp, khoa: 20110B khoa Công nghệ thông tin Năm thứ: 3 /Số năm đào tạo: 4

Ngành học: Công nghệ thông tin

Người hướng dẫn: ThS Trần Công Tú

TP Hồ Chí Minh, 10/2022

1.1 Thực trạng tại Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh 91.2 Tìm hiểu, đánh giá những website trong nước 91.3 Tìm hiểu, đánh giá những website ngoài nước 11

2 Ứng dụng vào trong các kỳ thi của Khoa Công nghệ Thông Tin 332.1 Thi Cuối Kỳ Môn KTLT hệ Đại trà năm học 2021-2022 332.2 Thi Cuối Kỳ Môn KTLT hệ Chất lượng cao năm học 2021-2022 33

IV Kết luận và kiến nghị 35

DANH MỤC HÌNH ẢNH

Hình 1: Website https://oj.vnoi.info/ 9

Hình 2: Website https://lqdoj.edu.vn/ 10

Hình 3: Website http://codeforces.com/ 11

Hình 4: Website https://atcoder.jp/ 12

Hình 5: Công nghệ NET 13

Hình 6: Công nghệ Angular 14

Hình 7: Kỹ thuật Binding trong Angular 15

Hình 8: Xử lý sự kiện trong Angular 15

Hình 9: ngModule trong Angular 16

Hình 10: Service trong Angular 16

Hình 11: Routing trong Angular 17

Hình 12: Lược đồ UseCase 18

Hình 13: Lược đồ cơ sở dữ liệu 19

Hình 14: Sơ đồ class 28

Hình 15: Giao diện quản lý kỳ thi 29

Hình 16: Giao diện tạo mới kỳ thi 29

Hình 17: Giao diện quản lý bài tập 30

Hình 18: Giao diện tạo mới bài tập 30

Hình 19: Giao diện thêm môn học mới 31

Hình 20: Giao diện xem và làm bài 31

Hình 21: Giao diện kết quả kỳ thi 32

Hình 22: Giao diện lịch sử làm bài 33

Hình 23: Kết quả thi Cuối Kỳ KTLT hệ Đại trà năm học 2021 - 2022 33

Hình 24: Kết quả thi Cuối Kỳ KTLT hệ Đại trà năm học 2021 - 2022 34

DANH MỤC BẢNG

Bảng 1: Bảng chi tiết Comment 20

Bảng 2: Bảng chi tiết Compiler 20

Bảng 3: Bảng chi tiết Contest 21

Bảng 4: Bảng chi tiết ContestExercise 21

Bảng 5: Bảng chi tiết ContestResult 21

Bảng 6: Bảng chi tiết ContestUser 21

Bảng 7: Bảng chi tiết Course 22

Bảng 8: Bảng chi tiết CourseCategory 22

Bảng 9: Bảng chi tiết CourseUser 22

Bảng 10: Bảng chi tiết Exercise 23

Bảng 11: Bảng chi tiết ExerciseCompiler 23

Bảng 12: Bảng chi tiết ExerciseCourseCategory 23

Bảng 13: Bảng chi tiết ExerciseResult 23

Bảng 14: Bảng chi tiết ExerciseTag 23

Bảng 15: Bảng chi tiết ExtensionLink 23

Bảng 16: Bảng chi tiết File 24

Bảng 17: Bảng chi tiết Notification 24

Bảng 18: Bảng chi tiết Role 24

Bảng 19: Bảng chi tiết Setting 24

Bảng 20: Bảng chi tiết Slide 24

Bảng 21: Bảng chi tiết Submit 25

Bảng 22: Bảng chi tiết Tag 25

Bảng 23: Bảng chi tiết Testcase 26

Bảng 24: Bảng chi tiết TestcaseResult 26

Bảng 25: Bảng chi tiết UserRole 26

Bảng 26: Bảng chi tiết User 27

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐH SƯ PHẠM KỸ THUẬT TPHCM

THÔNG TIN KẾT QUẢ NGHIÊN CỨU CỦA ĐỀ TÀI

1 Thông tin chung:

- Tên đề tài: Xây dựng website hỗ trợ luyện tập và thi Olympic Tin học

- SV thực hiện: Nguyễn Thành Văn Mã số SV: 20110224

- Lớp: 201101B Khoa: Công nghệ thông tin

- Người hướng dẫn: ThS Trần Công Tú

- Xây dựng được website phù hợp cho các bạn sinh viên trường Đại học Sư phạm

Kỹ thuật Hồ Chí Minh có thể luyện tập và tham gia thi trong các kỳ thi đánh giá môn học của khoa Công nghệ Thông tin

4 Kết quả nghiên cứu:

- Một cuốn báo cáo kết quả nghiên cứu khoa học

- Một website đã được vào sử dụng tại khoa Công nghệ thông tin

5 Đóng góp về mặt giáo dục và đào tạo, kinh tế - xã hội, an ninh, quốc phòng và khả năng áp dụng của đề tài:

- Một cuốn báo cáo nghiên cứu khoa học có thể dùng làm tài liệu tham khảo cho

các sinh viên quan tâm

- Một website cho các bạn luyện tập cho kỹ năng lập trình

6 Công bố khoa học của SV từ kết quả nghiên cứu của đề tài (ghi rõ tên tạp chí nếu

có) hoặc nhận xét, đánh giá của cơ sở đã áp dụng các kết quả nghiên cứu (nếu có):

Ngày tháng năm 2022

SV chịu trách nhiệm chính thực hiện đề tài

(kí, họ và tên)

Nhận xét của người hướng dẫn về những đóng góp khoa học của SV thực hiện đề

tài (phần này do người hướng dẫn ghi):

I Giới thiệu nghiên cứu

1 Lý do chọn đề tài

Trong thời đại hiện nay, việc chấm các bài thi tin học như nhập môn lập trình,

kỹ thuật lập trình nói riêng và chấm thi cho các kỳ thi Olympic Tin học nói chung ngày nay càng khó khăn và trở nên phức tạp Ở các năm trước, khoa Công nghệ Thông tin trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh đã sử dụng các phương pháp như chép bài làm của thí sinh vào USB hoặc tạo ổ đĩa ảo (trên mạng nội bộ) cho thí sinh nộp bài vào đó, cuối cùng đưa vào máy để chấm một lượt Việc làm này đem lại nhiều bất cập như có thể sơ xuất làm mất bài sinh viên, sinh viên tự copy nhầm file do không nghe hướng dẫn kỹ và đặc biệt chấm bài thi bằng máy tính laptop khá lâu (do có khoảng gần 500 sinh viên thi mỗi kỳ)

Thông qua những bất cập trên, chúng em đã có tham khảm việc chấm thi của các kỳ thi olympic tin học toàn quốc, ở các nước khác và quốc tế Chẳng hạn một số trường (các trường THPT Chuyên Tin) đã có một hệ thống website chấm bài riêng ví dụ như trường THPT Chuyên Lê Quý Đôn (lqdoj), và ở nước ngoài cũng có một số website chấm bài riêng của họ như Codeforces (Nga), POJ (Đại học Bắc Kinh – Trung Quốc), UVa Online Judge (Singapore), … Nhưng những hệ thống này chỉ phục vụ cho trường của họ Nhận thấy tầm quan trọng của một hệ thống luyện tập lập trình và hỗ trợ chấm

bài trong các kỳ thi Olympic, nhóm em quyết định chọn đề tài “Xây dựng website hỗ

trợ luyện tập và thi Olympic tin học” Nghiên cứu này nhằm mục đích tìm hiểu và

xây dựng ra một bộ khung hoàn chỉnh về các dạng bài tập trong các chương trình lập trình truyền thống Từ đó giúp các giáo viên có thể đưa ra những dạng bài, dạng toán phù hợp hơn giúp cho sinh viên phát triển một cách hoàn thiện hơn Ngoài ra còn giúp việc chấm thi trực tuyến không còn phức tạp như xưa

2 Mục tiêu nghiên cứu

- Phân tích cách thức hoạt động và làm việc của một trang web chấm bài

- Đề ra giải pháp và xây dụng website hỗ trợ luyện tập lập trình và thi

Olympic Tin học

3 Đối tượng và phạm vi nghiên cứu

- Đối tượng nghiên cứu: hệ thống website chấm bài trực tuyến

- Phạm vi nghiên cứu:

o Về không gian: Các trang web từ trong đến ngoài nước

o Về thời gian: Từ tháng 10 năm 2021 đến tháng 10 năm 2022

4 Phương pháp nghiên cứu của đề tài

- Nghiên cứu sơ bộ: Nghiên cứu này được thiết kế chủ yếu theo dạng nghiên cứu định lượng thông qua việc thu thập thông tin Nghiên cứu này còn kết hợp một phần

của nghiên cứu định tính thông qua việc tham khảo ý kiến của các thầy cô trong khoa Công nghệ Thông tin để có những thiết kế phù hợp với người dùng Ngoài ra, việc áp dụng thử trang web trong kỳ thi cuối học kỳ II – năm học 2021-2022 đã đưa ra được cái nhìn tổng quát cho trang web Từ đó kết quả nghiên cứu sẽ mang tính thuyết phục hơn

và có độ tin cậy cao hơn

II Tổng quan về đề tài nghiên cứu

1 Khảo sát hiện trạng

1.1 Thực trạng tại Đại học Sư phạm Kỹ thuật thành phố Hồ Chí Minh

- Với thời gian trước năm 2021, thông thường các cuộc thi Nhập môn Lập trình và Kỹ thuật lập trình thường được tổ chức thi tập trung trong nhà trường với hình thức thu bài là tập trung Với kiểu thi như này, thời gian thi là 90 phút thì thời gian thu bài của khoảng 60 phút và gây nhiều khó khăn với giám thị cũng như các bạn thí sinh

vì thời gian được kéo dài quá nhiều Một phần do thu bài qua ổ đĩa ảo (trên mạng nội bộ) nên sẽ xuất hiện tình trạng máy tính không kết nối được với ổ đĩa này Xảy ra tình trạng gian lận sau khi thi khi giám thị thu bài, các sinh viên không trung thực khi copy bài cho sinh viên khác, … Và điểm số của sinh viên được công bố từ 1 – 2 ngày sau khi ngày thi kết thúc và tiến hành phúc khảo với nhiều thắc mắc của các bạn sinh viên

1.2 Tìm hiểu, đánh giá những website trong nước

1.2.1 Website https://oj.vnoi.info/

Hình 1: Website https://oj.vnoi.info/

- https://oj.vnoi.info/ là một trang web trực thuộc VNOI (Olympic Tin Học Việt Nam) là cộng đồng của các học sinh, sinh viên đam mê bộ môn tin học Được thành lập từ năm 2008 bởi các cựu học sinh khối chuyên toán tin trên cả nước đã tham gia các

kỳ thi học sinh giỏi quốc gia & quốc tế, VNOI đã nhận được sự tham gia, ủng hộ và đóng góp của đông đảo thế hệ học sinh, sinh viên

- Nhiều sân chơi, kỳ thi trực tuyến đã được tổ chức thông qua nền tảng trong nhiều năm đều do các bạn học sinh sinh viên tình nguyện dành thời gian giúp đỡ, và các thế hệ học sinh đi trước lại tích cực chia sẻ kiến thức kinh nghiệm cho các lớp sau Với

sự trao đổi học tập qua Internet, các học sinh sinh viên ở mọi miền đất nước đều có cơ hội như nhau để tiếp cận với những kiến thức mới nhất trong bộ môn tin học

a Về nguồn bài:

- Do đây là trang web của cộng đồng đam mệ tin học lớn nhất Việt Nam nên nguồn bài của trang web rất nhiều, từ những bài của phong trào nhỏ lẻ đến những bài tập ở những cuộc thi lớn của quốc gia cũng như quốc tế Với số lượng bài tập trên trang web hiện tại là 3000 bài – trang web này xứng đáng là một nơi cho các bạn đam

mê lập trình trên cả nước

b Về thời gian chấm bài

- Thời gian chấm bài của trang web này là khoảng 1s Đây là thời gian tiêu biểu trong các cuộc thi lập trình lớn nên thời gian nhỏ như này không có gì là khó hiểu Thời gian chấm đồng thời cùng một lúc của trang web cũng khá tốt khi thời gian chấm một bài không có quá nhiều thay đổi và có khả năng chấm đống thời 10 bài cùng một lúc

c Về hệ thống máy chấm

- Trang web này được phát triển lên từ hệ thống DMOJ – là một hệ thống

mã nguồn mở cung cấp khả năng chấm bài nhanh và chính xác đến hơn 60 loại ngôn ngữ lập trình và cung cấp khả năng chấm bài đa dạng như ICPC (đúng hết mới tính điểm), IOI (chấm theo tỉ lệ hoàn thành), AtCoder, …

d Ưu, nhược điểm

- Hệ thống máy chấm nhanh hiện đại phù hợp cho các cuộc thi lớn trong khu vực và trên thế giới Khả năng khoá danh sách bài tập trong quá trình diễn ra cuộc thi là một trong những điều mới lạ và đặc biệt của chương trình chấm này

1.2.2 Website https://lqdoj.edu.vn/

Hình 2: Website https://lqdoj.edu.vn/

- https://lqdoj.edu.vn/ là một trang web chấm bài tự động được phát triển

dựa trên nền tảng mã nguồn mở DMOJ Được xây dựng với mục đích ban đầu là tạo ra một môi trường học tập cho học sinh khối chuyên Tin trường THPT chuyên Lê Quý Đôn (TP Đà Nẵng), hiện nay LQDOJ đã cho phép đăng ký tự do để trở thành một sân chơi rộng mở cho toàn bộ cộng đồng học sinh yêu Tin học Trang web cung cấp lượng bài luyện tập đồ sộ từ các kỳ thi HSG Quốc Gia, ACM ICPC, Olympic Duyên Hải Bắc

Bộ, etc cho đến các contest định kỳ để xếp loại khả năng (rating) giúp các bạn có thêm động lực cạnh tranh và khí thế phấn đấu rèn luyện nâng cao trình độ lập trình

a Về nguồn bài:

- Do đây là trang web của các học sinh cấp 3 nên nguồn bài hầu hết là các bài toán về cấu trúc dữ liệu và giải thuật và hầu như không khó như các bài trên đại học

vì vậy đây cũng là một nơi tốt cho các bạn ôn tập nhập môn

b Về thời gian chấm bài

- Do chỉ chú trọng các hình thức chấm bài kiểu IOI (chấm theo phần trăm đúng) và hầu hết các dạng bài cũng theo loại IOI nên thời gian chấm bài rất nhanh < 1s

Và cũng như trang web https://oj.vnoi.info/ , website này có khả năng chấm bài rất mạnh

mẽ cũng như có khả năng nộp nhiều bài cùng một lúc

c Về hệ thống máy chấm

- Trang web này được phát triển lên từ hệ thống DMOJ – là một hệ thống

mã nguồn mở cung cấp khả năng chấm bài nhanh và chính xác đến hơn 60 loại ngôn ngữ lập trình và cung cấp khả năng chấm bài đa dạng như ICPC (đúng hết mới tính điểm), IOI (chấm theo tỉ lệ hoàn thành), AtCoder, …

d Ưu, nhược điểm

- Website do được phát triển từ hệ thống khác do đó khả năng custom rất mạnh Ngoài ra do có nguồn bài đa dạng nên đây là một nơi thích hợp cho các bạn trẻ yêu thích lập trình

1.3 Tìm hiểu, đánh giá những website ngoài nước

1.3.1 Website http://codeforces.com/

Hình 3: Website http://codeforces.com/

- Đây là một website lớn của Nga tổ chức nhiều cuộc thi lớn trên thới giới

và bảng xếp hạng trên website này được sử dụng nhiều trong nhiều cuộc thi lập trình

a Về nguồn bài:

- Do đây là website lớn quy tụ nhiều nhân tài trên khắp thế giới nên nguồn bài gần như là vô hạn Ngoài ra một tuần sẽ diễn ra từ một đến 2 bài thi để đánh giá xếp hạng nên số lượng bài rất nhiều và rất đa dạng được tổng hợp từ nhiều người ra đề trên khắp thế giới

b Về thời gian chấm bài

- Do chỉ chú trọng các hình thức chấm bài kiểu IOI (chấm theo phần trăm đúng) và hầu hết các dạng bài cũng theo loại IOI nên thời gian chấm bài rất nhanh < 1s Ngoài ra trang web này cũng có rất nhiều bài được chấm theo thể loại ACM (khi đúng hết tất cả các testcase mới được tính là Accept một bài)

c Về hệ thống máy chấm

- Trang web này được tự phát triển lên nên thiết kế khá khác nhưng trang web khác Tuy nhiên hệ thống máy chấm rất mãnh mẹ có thể chấm lên tới 100 bài cùng lúc và có thể chọn rất nhiều ngôn ngữ lập trình với những phiên bản khác nhau

d Ưu, nhược điểm

- Đây là một website rất tốt để phát triển thể chất của các bạn sinh viên đặc biệt là những bạn có đam mê với khoa học Tuy nhiên do đặc thù là website của Nga nên đề hầu hết là tiếng nước ngoài nên khó khăn cho các bạn đọc

1.3.2 Website https://atcoder.jp/

Hình 4: Website https://atcoder.jp/

- Đây là một website lớn của Nhật tổ chức nhiều cuộc thi lớn trên thới giới

và bảng xếp hạng về những bài thi lập trình dựa trên toán học đều được lấy từ website này

a Về nguồn bài:

- Do đây chỉ là website trung bình quy tụ nhiều nhân tài trên khắp nước Nhật nên nguồn bài không được đa dạng Ngoài ra một tháng sẽ diễn ra từ một đến 2 bài thi để đánh giá xếp hạng nên số lượng bài không đa dạng về loại nhưng được đánh giá cao về tư duy để giải bài

b Về thời gian chấm bài

- Do chỉ chú trọng các hình thức chấm bài kiểu IOI (chấm theo phần trăm đúng) và hầu hết các dạng bài cũng theo loại IOI nên thời gian chấm bài rất nhanh < 1s Ngoài ra trang web này cũng có rất nhiều bài được chấm theo thể loại ACM (khi đúng hết tất cả các testcase mới được tính là Accept một bài)

c Về hệ thống máy chấm

- Trang web này được tự phát triển lên nên thiết kế khá khác nhưng trang web khác Tuy nhiên hệ thống máy chấm rất mãnh mẹ có thể chấm lên tới 100 bài cùng lúc và có thể chọn rất nhiều ngôn ngữ lập trình với những phiên bản khác nhau

d Ưu, nhược điểm

- Do website chủ yếu dành cho sinh viên và học sinh của Nhật bản nên cấu trúc của trang web khá khó chịu với các bạn sinh viên Việt Nam Tuy nhiên do website tập trung nhiều vào toán học và quy hoạch động nên nguồn bài khá chất lượng so với các website khác trên thế giới về loại bài này

2 Tìm hiểu về công nghệ

2.1 Công nghệ NET

Hình 5: Công nghệ NET 2.1.1 DotNet là gì?

- DotNet là tên đầy đủ của NET Đây là một nền tảng lập trình có mã nguồn

mở cho phép các nhà phát triển tạo các trang web hoặc ứng dụng thuộc hệ điều hành Windows, Linux, và macOS Microsoft đã tạo ra nền tảng này và nền tảng NET chủ yếu được sử dụng với hệ điều hành Windows

- Cấu tạo của NET chính là bộ code được viết sẵn bởi các lập trình viên hàng đầu của Microsoft Những lập trình viên khác thường sử dụng nền tảng này nhằm mục đích phát triển ứng dụng, dịch vụ web một cách nhanh chóng hơn rất

2.1.2 Một số ưu điểm nổi bật của NET

- Như đã nhắc ở phía trên NET là một trong những nền tảng được sử dụng phổ biến để hỗ trợ phát triển ứng dụng và website Vậy những ưu điểm nổi bật của Net

là gì mà được nhiều lập trình viên lựa chọn đến vậy?

 Net có khả năng tương thích với đạt đa số các mã thực hiện cũng như lưu trữ của đối tượng

 Net có thể tạo ra sự nhất quán dành cho mọi trải nghiệm của nhà phát triển với các ứng dụng khác nhau ví dụ như: App web, App windows,

 Net tạo ra được những ứng dụng đơn giản dựa trên Web-based, based dựa trên NET framework

Form- Net có khả năng xây dựng được toàn bộ thông tin liên lạc cũng như các tiêu chuẩn của ngành công nghiệp dựa vào những khả năng tích hợp của hầu hết các mã thuộc nền tảng Net

 Net có thể cung cấp một môi trường thực thi với mục đích giải quyết các rắc rối, xung đột liên quan đến hiệu suất Từ đó, thúc đẩy cho quá trình phát triển và triển khai cho mã an toàn

 Ngoài ra, Net còn sở hữu vô số các điểm cộng khác như: rất đáng tin cậy nhờ có tính bảo mật cao, chi phí sẽ được giảm khi triển khai ứng dụng, ngôn ngữ sử dụng đa nền tảng,

2.1.3 Những thành phần chính của Net Framework gồm những gì?

- Kiến trúc chính của NET Framework với ba thành phần chính:

a Ngôn ngữ: Nền tảng NET Framework có ba ngôn ngữ khác nhau

ASP.NET là ngôn ngữ chính của nền tảng phát triển web WinForms là ngôn ngữ chính

có thể chạy trên máy của người tiêu dùng cuối từ đó cho phép tạo và phát tiển các cứng

dụng Cuối cùng là ADO.NET, các ứng dụng được viết bằng ngôn ngữ này được phát

triển để hoạt động tốt với các cơ sở dụng liệu Oracle hoặc MSSQL

b Thành phần tiếp theo là lớp Thời gian ngôn ngữ chạy chung (Common

Language Runtime) được viết tắt là CLR

c Cuối cùng là Class Library – FCL, Class Library của NET Framework

là một trong những hàm có chứa các phương thức đáp ứng các nhu cầu khác nhau của

người dùng Trong số đó lớp System.* hoặc Microsoft.* được coi là phương thức

cơ bản nhất

2.2 Công nghệ Angular

Hình 6: Công nghệ Angular

2.2.1 Tổng quan về Angular

- Angular là một javascript framework do Google phát triển để xây dựng các Single Page Application (SPA) bằng Javascript, HTML, TypeScript Angular cung cấp các tính năng tích hợp cho animation, http service và có các tính năng tiên tiến như auto-complete, navigation, …

2.2.2 Component trong Angular

- Component là một khối code trong app Angular Nó là sự kết hợp của bộ template HTML và nhúng kém code TypeScript Các component là độc lập với nhau và độc lập với hệ thống Nó có thể được cài vào hoặc tháo ra khỏi hệ thông một cách dễ dàng Một component có thể hiểu như một control trên màn hình hiển thị gồm giao diện HTML và code logic xử lý các điều kiện

2.2.3 Binding trong Angular

Hình 7: Kỹ thuật Binding trong Angular

- Angular có cách code Binding (kết nối giữa HTML và Data) theo kiểu hai chiều, nghĩa là HTML Input thay đổi thì biến ở TypeScript sẽ lập tức nhận được giá trị

và ngược lại Để bind một gia trị ra ngoài màn hình HTML thì rất đơn giản Ta có thể

sử dụng dấu ngoặc nhọn ‘{’ và ‘}’ Ví dụ {{ValueName}}

2.2.4 Xử lý sự kiện

- Để xử lý một sự kiện của control HTML với một hàm JavaScript, ta có

thể viết như hình dưới

Hình 8: Xử lý sự kiện trong Angular

Khi chúng ta muốn click vào ô button này tức là muốn bind sự kiện click chuột của

người dùng ở control này gọi là goBack()

2.2.5 ngModule

Hình 9: ngModule trong Angular

- Module là một khái niệm rộng nhất của Angular Một module có thể bao gồm chứa các components, directives, pipes, v.v

- Module có thể được biên dịch (compile) dưới dạng ahead-of-time (AoT) Nghĩa là biên dịch ra mã thực thi để hiện ra luôn trên trình duyệt không cần vẽ vời gì từ đầu Hãy tưởng tượng component có HTML và TypeScript viết riêng, khi load trang thì

2 thứ này mới nhào nặn chung để hiển thị HTML + Data lên màn hình AoT là thứ HTML + Data đã nhào sẵn

- Module cũng có thể gọi module con và bắt tay được với các module khác

2.2.6 Service trong Angular

Hình 10: Service trong Angular

- Service phần lớn là phần xử lý chính trong Angular Để tạo ra một service

thì chúng ta cần import và mô tả một class với từ khóa @Injectable lấy từ

@angular/core module Nếu muốn dùng chung service mà không muốn khao báo

nhiều lần,component nào cũng phải tiêm nó vào.Thì lúc này có thể khai báo service ở phần providers của component hoặc module

2.2.7 Router trong Angular

- Mỗi một Router sẽ có một URL để load component Và để biết được là component sẽ render ra chỗ nào thì chúng ta viết đoạn binding vào khung html cần chèn

- Để cài đặt toàn bộ Router cho một ứng dụng Angular thì chúng ta cần tạo

ra một đối tượng JSON chứa các thuộc tính như sau:

a path: Đường dẫn URL của component hiện tại

b component: Ứng với đường dẫn bên trên thì load component nào

c redirectTo: Chuyển hướng đến URL này nếu URL ở path không

trùng Ví dụ, khi người dùng gõ URL linh tinh, chúng ta muốn chuyển hướng và load trang Home hoặc trang báo lỗi 404 thì cần ghi rõ URL trang Home hoặc 404 vào redirectTo

d pathMatch: Cài đặt xem chế độ kiểm tra url là như thế nào khi giá

trị là full thì nghĩa là toàn bộ url từ đầu đến cuối sẽ phải chính xác như trong bộ JSON Router Còn khi giá trị là prefix thì chuỗi đầu tiên của url (dấu sược đầu tiên) sẽ được kiểm tra Mặc định nếu không nói gì thì prefix sẽ được chọn

Hình 11: Routing trong Angular