ĐỀ CƯƠNG THỰC HIỆN ĐỒ ÁN · Web viewLời cảm ơn đầu tiên em xin gửi đến quý thầy cô khoa Công Nghệ Thông Tin trường đại học Đà Lạt. Đã

TRƯỜNG ĐẠI HỌC ĐÀ LẠT

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO MÔN ĐỒ ÁN CƠ SỞ

ĐỀ TÀI

TÌM HIỂU VỀ ANGULAR.JS

Giảng viên hướng dẫn: Tạ Hoàng Thắng

Sinh viên thực hiện: Nguyễn Như Thùy Duyên

MSSV: 1512864

Lớp: CTK39

Đà Lạt 11/2018

Trường Đại học Đà Lạt

Khoa Công nghệ Thông tin

ĐỀ CƯƠNG THỰC HIỆN ĐỒ ÁN

Tên đề tài: Tìm hiểu về Angular.js

Sinh viên thực hiện:

Nguyễn Như Thùy Duyên

MSSV: 1512864

Lớp: CTK39

Email: [email protected]

Khóa: 39

Giáo viên hướng dẫn: Tạ Hoàng Thắng

1. Mục tiêu đề tài

Đề tài giúp sinh viên tìm hiểu về Angular.js. Cài đặt và sử dụng được Angular.

Thông qua đề tài, sinh viên nâng cao được các kỹ năng tìm kiếm, tổng hợp tài liệu;

nghiên cứu các công nghệ, kỹ thuật mới; trau dồi và nâng cao khả năng trình bày,

viết báo cáo, đọc hiểu tài liệu tiếng Anh.

2. Nội dung đề tài

Chương 1: Tổng quan về đề tài

1. Giới thiệu đề tài

2. Lý do chọn đề tài

3. Khảo sát về tình hình sử dụng và phát triển Angular.js

Chương 2: Cấu trúc mã nguồn Angular.js

1. Những thành phần chính cấu thành nên Angular.js

Thùy Duyên CTK39 3

2. Cài đặt Angular.js

Chương 3: Modules và các chỉ thị trong Angular.js

1. Module và cách xây dựng Module (Modules)

2. Chỉ thị và cách sử dụng chỉ thị (Directives)

Chương 4: Ràng buộc dữ liệu, bộ lọc và bộ điều khiển trong Angular.js

1. Ràng buộc dữ liệu trong Angular.js (Data Binding)

2. Bộ lọc trong Angular.js (Filters)

3. Điều khiển trong Angular.js (Controllers)

Chương 5: Sự kiện và Form trong Angular.js (Event and Form)

1. Sự kiện trong Angular.js (Events)

2. Form trong Angular.js (Forms)

Chương 6: Xây dựng một ứng dụng Angular.js

Chương này chứa các ví dụ demo bằng cách sử dụng Angular.js

Chương 7: Tổng kết đề tài

1. Hướng phát triển

2. Kết luận

3. Phần mềm và công cụ sử dụng

Công cụ soạn thảo mã nguồn: Visual Studio .NET, Visual Studio Code và

Sublime Text.

Gói cài đặt XAMPP (chứa server MySQL)

Thư viện Angular.js.

4. Dự kiến kết quả đạt được


Nắm vững các kiến thức cơ bản về Angular.js

Hoàn thành bài báo cáo đồ án

5. Tài liệu tham khảo chính

[1] Website W3school: https://www.w3schools.com

[2] Website Github: https://github.com

[3] Website chính của Angular: https://angularjs.org/

[4] Website Dammio: http://www.dammio.com/category/thiet-ke-web/angularjs

Đà Lạt, ngày 27 tháng 11 năm 2018

Giáo viên hướng dẫn SV Thực hiện

(Ký tên) (Ký tên)

BCN Khoa Tổ trưởng Bộ môn

(Ký tên) (Ký tên)


Mục lụcĐỀ CƯƠNG THỰC HIỆN ĐỒ ÁN..........................................................................3

1. Mục tiêu đề tài.............................................................................................3

2. Nội dung đề tài............................................................................................3

3. Phần mềm và công cụ sử dụng...................................................................4

4. Dự kiến kết quả đạt được...........................................................................5

5. Tài liệu tham khảo chính............................................................................5

Phụ lục hình ảnh........................................................................................................8

Nhận xét của giáo viên..............................................................................................9

LỜI CẢM ƠN..........................................................................................................10

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI...............................................................11

1.1. Giới thiệu đề tài: Tìm hiểu về Angular.js...............................................11

1.2. Lý do chọn đề tài.......................................................................................12

1.3. Khảo sát về tình hình sử dụng và phát triển Angular.js.......................13

CHƯƠNG 2: CẤU TRÚC MÃ NGUỒN ANGULAR.JS......................................20

2.1. Những thành phần chính cấu thành nên Angular.js.............................20

2.2. Cài đặt Angular.js.....................................................................................22

CHƯƠNG 3: MODULES VÀ CÁC CHỈ THỊ TRONG ANGULAR.JS................25

3.1. Module và cách xây dựng Module...........................................................25

3.2. Chỉ thị và cách sử dụng chỉ thị (Directives)............................................29

CHƯƠNG 4: RÀNG BUỘC DỮ LIỆU, BỘ LỌC VÀ BỘ ĐIỀU KHIỂN TRONG

ANGULAR.JS.........................................................................................................35


4.1. Ràng buộc dữ liệu trong Angular.js (Data Binding).............................35

4.2. Bộ lọc trong Angular.js (Filters)..............................................................38

4.3. Điều khiển trong Angular.js (Controllers).............................................46

CHƯƠNG 5: SỰ KIỆN VÀ FORM TRONG ANGULAR.JS................................50

5.1. Sự kiện trong Angular.js (Events)...........................................................50

5.2. Form trong Angular.js (Form)................................................................54

CHƯƠNG 6: XÂY DỰNG TRÒ CHƠI PUZZLE BẰNG ANGULAR.JS............62

6.1. Xác định yêu cầu.......................................................................................62

6.2. Phân tích yêu cầu......................................................................................62

6.3. Lập trình ứng dụng...................................................................................62

6.4. Cấu trúc mã nguồn...................................................................................66

CHƯƠNG 7: TỔNG KẾT ĐỀ TÀI.........................................................................68

1. Kết luận......................................................................................................68

2. Hướng phát triển.......................................................................................68


Phụ lục hình ảnh

Hình 1. Biểu đồ sử dụng Angular.js.......................................................................13

Hình 2. Trang chủ website photo.com....................................................................14

Hình 3. Giao diện website photo.com....................................................................15

Hình 4. Giao diện website Google Maps (vệ tinh).................................................15

Hình 5. Giao diện Google Maps (bản đồ)..............................................................16

Hình 6. Giao diện website sanuk.com....................................................................16

Hình 7. Giao diện trang chủ website amazon.fr.....................................................17

Hình 8. Giao diện sản phẩm của amazon.fr...........................................................17

Hình 9. Giao diện trang chủ website Foody.vn......................................................18

Hình 10. Giao diện sản phẩm của Foody.vn..........................................................18

Hình 11. Các framework........................................................................................19

Hình 12.Tỷ lệ sử dụng các framework....................................................................19

Hình 13. Các thành phần của Angular.js...............................................................20

Hình 14. Trang download Angular.js.....................................................................22

Hình 15. Download Angular.js..............................................................................23

Hình 16. Lưu Angular.js.........................................................................................23

Hình 17. Lưu Angular.js vào máy..........................................................................24

Hình 18. Two-way data binding.............................................................................36

Hình 19.Giao diện bắt đầu của ứng dụng..............................................................63

Hình 20. Giao diện trò chơi Sliding Puzzle............................................................64

Hình 21. Giao diện chế độ Word Search Puzzle....................................................65

Hình 22. Word Search Puzzle: Rê chuột theo nhiều chiều.....................................66

Hình 23. Cấu trúc mã nguồn..................................................................................66


Nhận xét của giáo viên

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….

……………………………………………………………………………………….



LỜI CẢM ƠN

Lời cảm ơn đầu tiên em xin gửi đến quý thầy cô khoa Công Nghệ Thông Tin trường đại học Đà Lạt. Đã chỉ dạy cho em những kiến thức quý báu trong thời gian qua để em có thể hoàn thành nghiên cứu và thực hiện đề tài đồ án này. Và hơn hết em xin chân thành cảm ơn thầy Tạ Hoàng Thắng, người đã giành nhiều thời gian và tận tình hướng dẫn em trong suốt quá trình thực hiện đồ án.

Khi thực hiện đồ án này, em đã có cơ hội tiếp cận với những công nghệ mới, thực hiện những dự án thực tế giúp em có thêm kinh nghiệm, nền tảng cho bản thân để tiếp tục phát triển thêm trong ngành Công Nghệ Thông Tin.

Dưới đây là kết quả của quá trình tìm hiểu và nghiêng cứu mà em đã đạt được trong thời gian vừa qua. Trong quá trình thực hiện môn học “Đồ án cơ sở”, em không thể tránh khỏi những thiếu sót nhất định, lời văn chưa được súc tích, trình bày chưa được rõ ràng kính mong quý thầy cô thông cảm.

Em xin trân thành cảm ơn!


CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1. Giới thiệu đề tài: Tìm hiểu về Angular.js

Angular.js (hay còn gọi tắt là Angular) là một framework có cấu trúc cho các ứng

dụng web động. Cho phép sử dụng HTML như là ngôn ngữ mẫu và cho phép mở

rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng một các rõ ràng và

súc tích.

Phiên bản đầu tiên của Angular.js version 1.0 được phát hành vào năm 2012 bởi

Miško Hevery là một nhân viên của Google bắt đầu làm việc năm 2009. Lúc này

Misko tham gia vào một nhóm dự án của Google tên là Google Feedback. Với

Angular.js, Misko đã tối ưu số dòng code front-end từ 17000 dòng còn chỉ khoảng

1500 dòng. Với sự thành công đó, đội ngũ của dự án Google Feedback đã quyết

định phát triển Angular.js theo hướng mã nguồn mở.

Từ năm 2012 đến nay, Angular.js phát triển mạnh mẽ và được hỗ trợ chính thức từ

Google. Năm 2017 Angular.js ra đời phiên bản 1.6.5.

Angular.js được thêm vào HTML thông qua thẻ <script>:

Các đặc trưng cơ bản của Angular.js:

Phát triển dựa trên JavaScript

Tạo các ứng dụng client-side theo mô hình MVC.

Khả năng tương thích cao, tự động xử lý mã javascript để phù hợp với

mỗi trình duyệt.

Mã nguồn mở, miễn phí hoàn toàn và được sử dụng rộng rãi.

Các thành phần chính của Angular.js:


ng-app: định nghĩa và liên kết một ứng dụng Angular.js tới HTML.

ng-model: gắn kết giá trị của dữ liệu ứng dụng Angular.js đến các điều

khiển đầu vào HTML.

ng-bind: gắn kết dữ liệu ứng dụng Angular.js đến các thẻ HTML.

Các ưu điểm của Angular.js:

Cung cấp khả năng tạo ra các Single Page Application cách dễ dàng.

Cung cấp khả năng data binding tới HTML, khiến cho người dùng cảm

giác linh hoạt, thân thiện.

Dễ dàng Unit test.

Dễ dàng tái sử dụng component.

Giúp lập trình viên viết code ít hơn với nhiều chức năng hơn.

Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile.

Nhược điểm của Angular.js:

Không an toàn: được phát triển từ JavaScript cho nên ứng dụng được biết

bởi Angular.js không an toàn. Nên có sự bảo mật và xác thực phía server

sẽ giúp ứng dụng trở nên an toàn hơn.

Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ nhìn

thấy trang cơ bản.

1.2. Lý do chọn đề tài

Hiện nay, Angular.js là một phương tiện lập trình rất phổ biến, hữu ích và giúp cho

lập trình viên tiết kiệm được thời gian lập trình mà vẫn đảm bảo được chất lượng.

Angular.js còn được phát triển bởi Google, một nơi phát xuất được sự được tín

nhiệm và sự tin tưởng tuyệt đối. Vì vậy, tìm hiểu về Angular.js giúp ích rất nhiều

cho việc tìm hiểu về lập trình, nâng cao các kỹ năng, đọc hiểu và tìm hiểu các công

nghệ tiên tiến và có thể giúp ích cho con đường tiếp theo của em sau này.


1.3. Khảo sát về tình hình sử dụng và phát triển Angular.js

Angular.js là một trong các framework được xem là đứng Top trong các bình chọn của lập trình viên. Angular.js là một trong 5 xu hướng mới nhất của JavaScript framework.

Theo thống kê của trang BuiltWith, có 3,248,871 website sử dụng Angular.js và hiện tại có 2,857,822 trang web vẫn đang còn hoạt động.

Dưới đây là biểu đồ sử dụng Angular.js qua các năm gần đây, đã được BuiltWith thống kê.

Hình 1. Biểu đồ sử dụng Angular.js

Ở Việt Nam, hiện đang có 1,261 website sử dụng Angular.js. Cao nhất, phải kể đến Mĩ với con số 738,465 website, nước Anh với 44,898 website và những nước khác


cùng với những con số ấn tượng như Đức (30,938), Nga (30,773), Brazil (28,201), Pháp (21,295),…

Các website sử dụng Angular.js:

https://www.photo.net

Photo.net (United State) là nền tảng giáo dục đồng đẳng mạnh mẽ, hợp tác dành

cho các nhiếp ảnh gia từ những người có sở thích đến các chuyên gia, tạo ra một

cộng đồng trực tuyến mang đến cho mọi người các cuộc thi ảnh cạnh tranh, thông

tin về thiết bị mới nhất, hoặc cũng có thể đăng tải những hình ảnh của mình, nơi

đây có nhiều chuyên gia về nhiếp ảnh họ sẽ nhận xét và giúp chỉnh sửa ảnh để

ngày càng tốt hơn.

Hình 2. Trang chủ website photo.com


https://www.photo.net/

Hình 3. Giao diện website photo.com

https://www.google.fr

Google Maps (United States) được xem là dịch vụ bản đồ số được google phát

triển với mục đích thay thế cho các loại bản đồ giấy thông thường.

Hình 4. Giao diện website Google Maps (vệ tinh)


https://www.google.fr/

Hình 5. Giao diện Google Maps (bản đồ)

https://www.sanuk.com

Sanuk (United Kingdom) là một trang web bán hàng online. Người dùng có thể xem và đặt hàng online qua trang web. Website cũng hỗ trợ tìm cửa hàng gần nhất dựa trên địa chỉ của người sử dụng.

Hình 6. Giao diện website sanuk.com


https://www.sanuk.com/

https://www.amazon.fr

Amazon.fr (France) là một trang web bán hàng online. Các sản phẩm đa dạng, có nhiều loại mặt hàng như đồ gia dụng, quần áo,đồ chơi trẻ em, sản phẩm công nghệ…

Hình 7. Giao diện trang chủ website amazon.fr

Hình 8. Giao diện sản phẩm của amazon.fr


https://www.amazon.fr/

https://www.foody.vn

Foody.vn (Việt Nam) là cộng đồngtin cậy cho mọi người có thể tìm kiếm, đánh giá, bình luận các địa điểm ăn uống: nhà hàng, quán ăn, cafe, bar, tiệm bánh, khu du lịch… tại Việt Nam từ website hoặc ứng dụng di động. Tất cả thành viên từ Bắc đến Nam, Foody kết ối những thực khách đến với các địa điểm ăn uống lớn nhỏ cả nước. Foody với hàng trăm ngàn địa điểm và bình luận, hình ảnh tại Việt Nam, pử hầu hết các tỉnh thành. Foody là cách dễ nhất để có thể tìm kiếm và lựa chọn địa điểm tốt nhất cho mình và bạn bè.

Hình 9. Giao diện trang chủ website Foody.vn

Hình 10. Giao diện sản phẩm của Foody.vn


https://www.foody.vn/

Tuy Angular.js là một framework được nhiều lập trình viên lựa chọn và đang trên đà phát triển mạnh mẽ nhưng bên cạnh đó cũng có nhiều framework khác cũng song song tồn tại và phát triển mạnh mẽ không kém như là ReactJS, Vue.JS, Ember.JS, NodeJS, Meteor.JS,…

Hình 11. Các framework

Tuy nhiên, tỉ lệ sử dụng Angular.js vẫn đang đứng ở vị trí mà framework nào cũng có thể đạt được (hình sau dựa trên website https://medium.com)

Hình 12.Tỷ lệ sử dụng các framework


https://medium.com/

CHƯƠNG 2: CẤU TRÚC MÃ NGUỒN ANGULAR.JS

2.1. Những thành phần chính cấu thành nên Angular.js

Hình 13. Các thành phần của Angular.js

Data Binding

Data Binding là sự đồng bộ hóa dữ liệu giữa Model và View. Điều đặc biệt là kết

quả data nhập sẽ được cập nhật ngay chứ không cần chờ reload page.

Nó bao gồm các directive sau:

ng-bind: tìm và thay thế nội dung trong thẻ HTML bằng với giá trị mà có

cùng tên định nghĩa trong ng-bind.

ng-bind-html: mặc định nội dung nhập vào input là html chứ không phải

dạng text.

ng-bind-template: xác định nội dung cần replace thông qua biểu thức

trong angular {{result}}. Khác với ng-bind là nó có thể chứa nhiều biểu

thức.


ng-model: dùng để liên kết dữ liệu với client.

ng-non-bindable: giúp hiển thiện đoạn mã code trong HTML không bị

compile bởi Angular.js.

Modules: Là nơi chứa các điều khiển(controllers) của một ứng dụng.

Scope: Là phần ràng buộc giữa HTML (view) và JavaScript (controller).

Model: Chỉ thị ng-model trói giá trị của các điều khiển HTML (input, select,

textarea) với dữ liệu ứng dụng.

Controller: kiểm soát dữ liệu của các ứng dụng Angular.js. Bộ điều khiển

Angular.js là các đối tượng JavaScript thông thường.

Expression: Angular.js liên kết dữ liệu tới HTML bằng cách sử dụng các

expression.

Filters: Bộ lọc được thêm vào Angular.js để chuyển đổi dữ liệu. Angular.js cung

cấp một số bộ lọc để chuyển đổi dữ liệu: currency, date, filter, json, limitTo,

lowercase, uppercase, number, orderby.

Directives: Angular.js cho phép mở rộng HTML với những thuộc tính mới gọi là

Directives (các chỉ thị). Angular.js chứa tập các chỉ thị được tích hợp sẵn cho phép

thực hiện các chức năng với các ứng dụng. Nó cũng cho phép tự định nghĩa các chỉ

thị của riêng mình.

Services: Trong Angular.js có thể tự tạo các dịch vụ cho riêng hoặc sử dụng các

dịch vụ được tích hợp sẵn.

Multiple Views and Routing: Đôi khi trong một trang, nhiều khi chỉ muốn hiển

thị một phần HTML ứng với mỗi chức năng cụ thể mà không cần chuyển đổi trang,

Angular là một full – stack framework hiệu quả có thể làm được việc này nhanh

chóng và dễ dàng. Route là bộ điều hướng các yêu cầu từ phía người dùng tới các

controller tương ứng để xử lý dựa theo các đối số truyền trên thanh url. Route

trong Angular.js là thành phần quan trọng giúp Angular.js tạo được ứng dụng SPA

(sigle page application), chuyển trang mà không cần tải lại trình duyệt.


Form validation: Angular.js điều khiển trạng thái form và các trường input, cho

phép thông báo người dùng về trạng thái hiện tại của các trường input.

2.2. Cài đặt Angular.js

Truy cập vào trang web chủ của Angular.js: https://angular.io , hoặc

https://angularjs.org hoặc https://github.com/angular/angular.js và tải về bản

Angular.js mới nhất.

Dưới đây là từng bước cài đặt Angular.js:

Bước 1: Vào các trang web của Angular.js hoặc các trang web đã liệt kê phía trên

để tải Angular về máy.

Trong ví dụ, sẽ truy cập trang https://angularjs.org, sau đó click vào Download

Angular.js:

Hình 14. Trang download Angular.js

Bước 2: Khi click vào Download, một hộp thoại sẽ được mở ra, click vào

Download:


https://angularjs.org/

https://github.com/angular/angular.js

https://angularjs.org/

https://angular.io/

Hình 15. Download Angular.js

Bước 3: Để tải Angular.js về máy, nhấn chuột phải -> chọn lưu thành… Hoặc có

thể nhấn tổ hợp Ctrl + S:

Hình 16. Lưu Angular.js

Bước 4: Chọn nơi cần lưu Angular.js, và như vậy là đã tải thành công Angular.


Hình 17. Lưu Angular.js vào máy

Để sử dụng Angular trong HTML, sử dụng thẻ <script>:

Hoặc có thể tham khảo video hướng dẫn dưới đây (Tải Angular phiên bản

Angular4): https://www.youtube.com/watch?v=ZLLh-TsknQA&t=384s.


https://www.youtube.com/watch?v=ZLLh-TsknQA&t=384s

CHƯƠNG 3: MODULES VÀ CÁC CHỈ THỊ TRONG ANGULAR.JS

3.1. Module và cách xây dựng Module

3.1.1. Khái niệm Module

Một module trong Angular.js định nghĩa một ứng dụng, nó là một vùng chứa cho

các thành phần khác nhau của ứng dụng và là một vừng chứa cho các điều khiển

của ứng dụng, các điều khiển luôn phụ thuộc vào một Module.

3.1.2. Cách xây dựng Module

Tạo một Module (Creating a Module)

Để tạo một Module trong Angular, sử dụng hàm angular.module

ng-app: cho biết phạm vi hoạt động của Angular.js. Chỉ thị này cho biết vị trí bắt

đầu để sử dụng các phần tử của Angular.js.

myApp: chỉ rõ phần tử HTML của ứng dụng sẽ được thực thi.

Thêm một điều khiển (Adding a Controller)

Thêm một điều khiển vào trong ứng dụng, sử dụng chỉ thị ng-controller (sẽ tìm

hiểu rõ hơn về điều khiển (controller) ở các chương sau):


Điều khiển được thêm tên là “myCtrl”, áp dụng controller này có thể khởi tạo 1

hàm với biến $scope có chứa thuộc tinh firstName và lastName và gán giá trị cho 2

thuộc tính này.

diễn giải này dùng để xuất nội dung 2 thuộc tính này

trên giao diện.

Kết quả chạy chương trình:

Thêm một chỉ thị (Adding a Directive)

Angular.js đã xây dựng sẵn một tập các chỉ thị có thể dùng để thêm các chức năng

vào ứng dụng.

Xem ví dụ sau để biết cách tạo mới 1 chỉ thị:

Lưu ý: chỉ thị trong thẻ <div>, thêm một chỉ thị có tên “elizabeth-test-directive”

mỗi từ cách nhau bằng dấu “-” (gạch ngang), các kí tự viết thường, nhưng trong thẻ


<script> tên chỉ thị sẽ viết lại bằng cách bỏ các dấu gạch ngang “-”, và các kí tự

đầu tiên mỗi từ phải viết hoa, trừ từ đầu tiên của chỉ thị.

Kết quả của chương trình:

3.1.3. Lưu trữ Module và điều khiển trong file (Module and Controller in file)

Đối với Angular.js, thông thường lưu Module và các Controller thành file

JavaScript. Khi muốn sử dụng những file này, chỉ cần nhúng các file này vào ứng

dụng.

Trong ví dụ dưới đây, tạo 2 file *.js để chứa Module và Controller. Tạo 1 file có

tên myApp.js để chứa các module, và một file có tên myCtrl.js để chứa các

Controller.

Nội dung file myApp.js

Tham số [] trong định nghĩa Module có thể dùng để định nghĩa các Module phụ

thuộc. Nếu không có tham số [], sẽ không thể tạo 1 Module mới mà vẫn đang truy

vấn một Module đã tồn tại.


Nội dung file myCtrl.js

Nhúng các file vào ứng dụng:

3.1.4. Các hàm có thể gây ảnh hưởng không gian toàn cục

Trong JavaScript, các hàm toàn cục có thể dễ dàng bị ghi đè hoặc bị phá hủy bởi

các script khác, chính vì vậy, cần hạn chế hoặc là nên tránh sử dụng các hàm toàn

cục để hạn chế các vấn đề xảy ra.

Nhưng đối với Angular.js vấn đề này sẽ được Angular.js giải quyết bằng cách giữ

các hàm cục bộ bên trong các Module.

3.1.5. Khi nào thì nên tải Angular.js

Thông thường, trong ứng dụng HTML thường đặt các script ở cuối thẻ <body>,

nhưng đối với thư viện Angular.js nó sẽ được đặt ở thẻ <head> hoặc ở đầu thẻ

<body>.

Lệnh angular.module chỉ có thể được biên dịch sau khi thư viện đã được tải.


3.2. Chỉ thị và cách sử dụng chỉ thị (Directives)

Khái niệm chỉ thị

Đây là một hướng dẫn để Angular biết cách thao tác và xử lý với thành phần trong

HTML và DOM (Document Object Model) để thay đổi các hành vi và cách thể

hiện trên trang web như hiển thị một đoạn thông báo, ẩn văn bản, thêm vào các

class…

Angular.js cung cấp những chỉ thị được tích hợp sẵn, hoặc có thể tự tạo các chỉ thị

cho riêng mình.

Các chỉ thị Angular.js được mở rộng bằng các thuộc tính HTML với tiền tố ng- ,

ba chỉ thị đầu tiên phải kể đến đó là:

Chỉ thị ng-app dùng để khởi tạo 1 ứng dụng Angular.js

Chỉ thị ng-init dùng để khởi tạo 1 dữ liệu ứng dụng

Chỉ thị ng-model trói giá trị của các điều khiển HTML (input, select, textarea) với

dữ liệu ứng dụng.


3.2.1. Chỉ thị trong Angular.js

Dưới đây là một ví dụ về việc sử dụng các chỉ thị đơn giản và phổ biến trong

Angular.js.

Kết quả đoạn code sẽ lấy giá trị của textbox xuất ra giao diện.

3.2.2. Chỉ thị ng-repeat

Chức năng của chỉ thị ng-repeat là cho phép lặp lại một phần tử HTML hoặc có thể

nói, chỉ thị ng-repeat nhân bản các phẩn tử HTML cho mỗi phần tử trong danh

sách.

Dưới đây là một ví dụ cho việc sử dụng chỉ thị, ví dụ sau lặp từng phần tử trong

danh sách countries.


Kết quả sẽ được hiển thị như sau:

Chỉ thị ng-repeat sử dụng trên mảng các đối tượng. Ví dụ sau sẽ chỉ rõ hơn về việc

sử dụng trên mảng.

Kết quả xuất ra giao diện:


3.2.3. Chỉ thị ng-app

Chỉ thị ng-app định nghĩa phần tử gốc của 1 ứng dụng Angular.js. Chỉ thị ng-app

sẽ tự động khởi tạo ứng dụng khi trang web được tải lên.

3.2.4. Chỉ thị ng-init

Chỉ thị này định nghĩa các giá trị khởi tạo cho ứng dụng. Thông thường sẽ không

dùng ng-init mà dùng 1 điều khiển hoặc 1 module.

3.2.5. Chỉ thị ng-model

Chỉ thị ng-model trói giá trị của các điều khiển HTML (input, select, textarea) vào

dữ liệu ứng dụng. Chỉ thị ng-model có thể:

Cung cấp dạng chứng thực dữ liệu (number, email, required)

Cung cấp trạng thái dữ liệu (invalid, dirty, touched, error)

Cung cấp các lớp CSS cho các phần tử HTML

Liên kết các phẩn tử HTML vào các form HTML.

3.2.6. Trói dữ liệu (Data binding)

Trói dữ liệu trong Angular.js được dùng để gắn các diễn giải với dữ liệu.

Kết quả chương trình


Trong ví dụ trên, diễn giải {{color}} được gắn với ng-model= “color”.

Xét thêm một ví dụ nữa để thấy rõ vấn đề này.

Trong ví dụ trên, 2 trường văn bản được liên kết với nhau bằng 2 chỉ thị ng-model

là: quantity và price

3.2.7. Cách tạo một chỉ thị mới

Việc dùng chỉ thị (directive) sẽ giảm thiểu được số lượng thẻ HTML, code HTML

nhìn sẽ gọn gang và sang sủa hơn.

Angular.js cung cấp 3 loại directive đó là:

Directive dạng element (1 thẻ HTML) viết tắt là E.

Directive dạng attribute (thuộc tính của 1 thẻ HTML) viết tắt là A, dạng này

là mặc định.

Directive dạng class (class CSS) viết tắt C.

Directive dạng comment, viết tắt M.


Lưu ý: Tên directive phải khai báo dạng camelCase còn khi gọi thì có thể dùng

dấu – để ngăn cách giữa các từ hoặc để nguyên như khi khai báo.

3.2.8. Hạn chế cho directive

Có thể thêm thuộc tính giới hạn dành cho một số phương thức bằng cách thêm 1

thuộc tính giới hạn với giá trị “A”, chỉ thị chỉ có thể được gọi bởi các thuộc tính.

Một số giá trị giới hạn hợp lệ là:

E là tên thẻ

A là tên thuộc tính

C là lớp

M là chú thích

Mặc định giá trị là EA, nghĩa là cả tên thẻ và tên thuộc tính có thể gọi chỉ thị.

Ngoài những chỉ thị trên, Angular.js còn cung cấp nhiều chỉ thị khác như là: ng-

bind, ng-model, ng-click, ng-controller…


CHƯƠNG 4: RÀNG BUỘC DỮ LIỆU, BỘ LỌC VÀ BỘ ĐIỀU KHIỂN

TRONG ANGULAR.JS

4.1. Ràng buộc dữ liệu trong Angular.js (Data Binding)

Ràng buộc dữ liệu trong Angular.js là sự đồng bộ giữa mô hình (Model) và giao

diện (View).

4.1.1. Data Model

Ứng dụng Angular.js luôn có 1 mô hình dữ liệu, mô hình này là một tập dữ liệu

được tích hợp sẵn dành cho ứng dụng.

4.1.2. HTML View

Ứng dụng Angular.js được hiển thị ở view (giao diện). View chứa truy cập đến mô

hình, và có vài cách hiển thị dữ liệu mô hình ở view. Có thể sử dụng chỉ thị ng-

bind để trói thuộc tính innerHTML của phần tử với thuộc tính mô hình cụ thể.

Ví dụ sau dùng ng-bind để hiển thị giá trị thuộc tính firstname từ mô hình.


4.1.3. Chỉ thị ng-model

Chỉ thị ng-model dùng để trói dữ liệu từ mô hình với view trên các điều khiển

HTML (input, select, textarea). Chỉ thị ng-model cung cấp cách ràng buộc (trói)

dữ liệu 2 chiều giữa mô hình và view.

4.1.4. Ràng buộc hai chiều

Hình 18. Two-way data binding

Khi dữ liệu ở mô hình thay đổi, view sẽ phản ánh sự thay đổi đó, và khi dữ liệu ở

view thay đổi, mô hình cũng được cập nhật. Điều nay xảy ra ngay lập tức và tự

động, để đảm bảo mô hình và view được cập nhật mọi lúc.


Trong ví dụ sau, người dùng nhập vào dữ liệu cho trường firstname, sau đó mô

hình sẽ được cập nhật giá trị này.

Kết quả chương trình:

4.1.5. Điều khiển Angular.js

Các ứng dụng ở Angular.js được kiểm soát bởi các điều khiển. Bởi vì có sự đồng

bộ tức thời giữa mô hình và view, các điều khiển có thể hoàn toàn riêng biệt với

view, và đơn giản là tập trung vào dữ liệu mô hình. Với ràng buộc dữ liệu ở

Angular.js, view có thể phẩn ánh bất cứ thay đổi nào ở điều khiển.


4.2. Bộ lọc trong Angular.js (Filters)

Bộ lọc được thêm vào Angular.js để format dữ liệu hoặc để chuyển đổi kiểu dữ

liệu.

Angular.js cung cấp nhiều bộ lọc để chuyển đổi các kiểu dữ liệu như là:

currency: định dạng tiền tệ date: định dạng ngày tháng filter: chọn tập con các phần tử từ 1 mảng json: định dạng 1 đối tượng thành kiểu chuỗi json limitTo: giới hạn 1 chuỗi/mảng thành theo số ký tự/phẩn tử cụ thể lowercase: định dạng chữ thường uppercase: định dạng chữ hoa number: định dạng số orderBy: sắp xếp 1 mảng theo thứ tự

4.2.1. Thêm các bộ lọc vào các diễn giải

Các bộ lọc có thể được thêm vào các diễn giải bằng cách dùng ký tự gạch đứng |,

theo sau là 1 bộ lọc. Bộ lọc chữ thường định dạng các chuỗi thành chuỗi có ký tự

viết hoa và viết thường.


Kết quả chương trình trên:

Thêm bộ lọc vào các chỉ thị (directives)

Các bộ lọc được thêm vào các chỉ thị (ví dụ như ng-repeat) cũng bằng cách dùng

ký tự gạch đứng |, theo sau là 1 bộ lọc. Ví dụ sau sắp xếp 1 mảng theo bộ lọc

orderBy.


Kết quả của chương trình trên sẽ xuất ra giao diện như sau:

4.2.2. Bộ lọc tiền tệ (Currency)

Bộ lọc tiền tệ định dạng 1 số thành kiểu tiền tệ. Mặc định là định dạng theo đơn vị

USD. Ví dụ 20 -> $20.00


Kết quả khi nhập vào một số bất kỳ ở dạng USD thì kết quả chuyển về một số

tương ứng với dạng VNĐ.

4.2.3. Bộ lọc filter

Bộ lọc filter chọn 1 tập con của 1 mảng. Bộ lọc này chỉ sử dụng được cho mảng, và

kết quả trả về là 1 mảng chứa các phần tử hợp lệ với bộ lọc.

Ví dụ sau trả về tên của 1 mảng chứa ký tự “n”, không phân biệt hoa thường.


Kết quả trả về là tên có chứa kí tự n bất kể hoa hay thường

Lọc 1 mảng dựa trên trường dữ liệu nhập vào

Bằng cách thiết lập chỉ thị ng-model trên trường nhập liệu, dùng giá trị trường

nhập liệu như 1 diễn giải ở bộ lọc. Ví dụ sau mô tả cách nhập dữ liệu vào 1 trường

dữ liệu và danh sách cho ra các kết quả khớp với dữ liệu đầu vào.


Khi nhập vào một ký tự (bất kể hoa hay thường) kết quả sẽ trả về những tên có

chứa kí tự đó.

Sắp xếp 1 mảng dựa trên trường nhập liệu đầu vào

Bằng cách thêm vào chỉ thị ng-click ở đầu vào bảng, có thể chạy 1 hàm cho phép

thay đổi thứ tự sắp xếp trên 1 mảng. Ví dụ sau có mảng names với 2 thuộc tính

name và country. Khi hiển thị ở giao diện HTML, dùng chỉ thị ng-click để mô tả

biến cần sắp xếp.


Kết quả đầu tiên khi chạy chương trình, kết quả sẽ thấy 2 trường Name và Country

sẽ sắp xếp như trong chương trình:


Sau khi click vào trường Name kết quả sẽ trả về trường Name đã được sắp xếp

theo thứ tự A -> Z:

Sau khi click vào trường Country thì các phần tử của trường này sẽ được sắp xếp

theo thứ tự A -> Z:

4.2.4. Tự tạo bộ lọc

Angular.js cho phép tự tạo bộ lọc riêng bằng cách thêm 1 hàm lọc trong module

của ứng dụng.

Ví dụ sau mô tả 1 bộ lọc gọi là “myFormat” để viết hoa các kí tự “a” và “h” trong

một chuỗi.


Kết quả trả về là các chuỗi với các kí tự “a” và “h” sẽ ở dạng chữ in hoa.

4.3. Điều khiển trong Angular.js (Controllers)

Các điều khiển Angular.js là các đối tượng JavaScript, kiểm soát dữ liệu của các

ứng dụng.


4.3.1. Các điều khiển Angular.js

Chỉ thị ng-controller định nghĩa bộ điều khiển ứng dụng.

Bộ điều khiển là một đối tượng JavaScript, được tạo bởi 1 hàm tạo đối tượng

JavaScript chuẩn.

Giải thích code:

Ứng dụng trên được định nghĩa bởi ng-app= “myApp” và ứng dụng chạy bên trong

thẻ <div>.

Thuộc tính ng-controller= “myCtrl” là 1 chỉ thị định nghĩa cho 1 controller. Hàm

myCtrl là 1 hàm JavaScript.

Angular.js sẽ gọi điều khiển với 1 đối tượng $scope. Trong Angular.js, $scope là 1

đối tượng ứng dụng (sở hữu các biến và hàm của ứng dụng). Điều khiển tạo 2

thuộc tính trong $scope (firstName và lastName).

Chỉ thị ng-model trói các trường đầu vào (input) với các thuộc tính controller

(firstName và lastName).


4.3.2. Các phương thức điều khiển

Ví dụ trên mô tả 1 đối tượng điều khiển với 2 thuộc tính: firstName và lastName.

Một điều khiển cũng có các phương thức (các biến như hàm).

4.3.3. Các điều khiển trong tập tin ngoài

Trong các ứng dụng lớn, việc lưu trữ các điều khiển ở các tập tin ngoài là rất phổ

biến. Để thực hiện, chỉ cần sao chép đoạn mã giữa thẻ <script> vào 1 tập tin nào

đó đặt tên là myController.js, sau đó nhúng vào ứng dụng như ví dụ sau:

Nội dung của trang “myController.js” như sau:



CHƯƠNG 5: SỰ KIỆN VÀ FORM TRONG ANGULAR.JS

5.1. Sự kiện trong Angular.js (Events)Angular.js có các chỉ thị sự kiện HTML riêng. Có thể thêm các sự kiện listeners

vào các phần tử HTML bằng cách dùng 1 trong các chỉ thị sau:

ng-blur ng-change ng-click ng-copy ng-cut ng-dblclick ng-focus ng-keydown ng-keypress ng-keyup ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-mouseup ng-paste

Các chỉ thị sự kiện cho phép chạy các hàm Angular.js ở các sự kiện người dùng

nhất định. Một sự kiện Angular.js sẽ không ghi đè một sự kiện HTML mà là cả hai

cùng thực thi.

Sự kiện chuột

Các sự kiện chuột xảy ra khi cong chuột di chuyển lên 1 phần tử theo thứ tư như

sau:

ng-mouseenter ng-mouseover


ng-mousemove ng-mouseleave

Hoặc khi nút chuột được nhấn trên 1 phần tử, theo thứ tự:

ng-mousedown ng-mouseup ng-click

Có thể thêm sự kiện chuột ở bất kỳ phần tử HTML nào.

Ví dụ sau đếm số lần di chuyển chuột lên dòng chữ trong thẻ h1 với sự kiện ng-

mousemove.

Chỉ thị ng-click

Chỉ thị này định nghĩa mã Angular.js được thực thi khi phần tử được nhấn.

Ví dụ sau tạo 1 nút nhấn khi người dùng nhấn lên nút này thì giá trị đếm (count) sẽ

tăng 1 đơn vị và xuất ra màn hình.


Ngoài cách trên, còn có thể viết 1 hàm để thực hiện việc đếm số lần click chuột.

Kết quả xuất ra vẫn giống nhau.

Toggle, True / False

Nếu muốn hiển thị 1 phần mã HTML khi nhấn chuột, và ẩn khi nút được nhấn trở

lại, giống 1 menu dropdown, hãy tạo 1 nút có hành vi như 1 toggle như ví dụ sau.


Kết quả chạy chương trình:

Sau khi nhấn chuột vào nút button:


Biến showMe bắt đầu với giá trị false. Hàm myFunc thiết lập biến showMe có 2

giái trị qua lại true và false với toán tử ! (phủ định).

Đối tượng $event

Có thể đẩy đối tượng $event như là 1 đối khi gọi hàm. Dựa vào đối tượng $event

có thể lấy giá trị từ trình duyệt khi phát sinh có sự kiện.

Ví dụ sử dụng đối tượng $event để lấy tọa độ chuột.

Kết quả khi rê chuột trên văn bản, sẽ xuất ra tọa độ của chuột ở thời điểm hiện tại.

5.2. Form trong Angular.js (Form)Các form trong Angular.js cung cấp việc trói dữ liệu (hay liên kết dữ liệu – data

binding) và chứng thực các điều khiển đầu vào.


5.2.1. Điều khiển đầu vào

Các điều khiển đầu vào các phẩn tử input HTML như sau:

Các phẩn tử input Các phần tử select Các phần tử button Các phần tử textarea

5.2.2. Trói dữ liệu (Data binding)

Các điều khiển đầu vào cung cấp tính năng trói dữ liệu bằng cách dùng chỉ thị ng-

model.

Ứng dụng bây giờ đã có 1 thuộc tính có tên firstname. Thuộc tính firstname có thể

được truy xuất ở 1 controller như ví dụ dưới đây:

Ngoài ra, thuộc tính firstname cũng có thể được truy xuất ở một vị trí khác trong

chương trình:


Kết quả xuất ra, khi thay đổi giá trị trong ô input thì giá trị bên dưới cũng sẽ bị

thay đổi.

Check box

Một checkbox có giá trị true hoặc false. Áp dụng chỉ thị ng-model vào 1 checkbox,

và dùng giá trị của nó trong ứng dụng như ví dụ sau.

Ví dụ này sẽ hiển thị giá trị trong thẻ h1 khi checkbox có giá trị bằng true (đã nhấn

chọn checkbox).


5.2.3. Radio button

Cũng giống như checkbox, nút radio cũng liên kết với ứng dụng thông qua chỉ thị

ng-model. Các nút radio với cùng 1 ng-model có thể có giá trị khác nhau, nhưng

chỉ có duy nhất 1 nút radio được chọn trong 1 thời điểm.

Ví dụ sau hiển thị dòng chữ, dựa theo giá trị của nút radio được chọn.


Giá trị của biến myVar có thể sẽ là Truyện Cổ Tích, Truyện Trinh Thám, Truyện

Ngôn Tình, Truyện Cười hoặc Truyện Ngắn. Tuy nhiên tại một thời điểm sẽ chỉ

được chọn một radio button để hiển thị.

5.2.4. Select Box

Các select Box cũng dùng chỉ thị ng-show để liên kết với ứng dụng. Thuộc tính

được định nghĩa trong thuộc tính ng-model sẽ có giá trị của tùy chọn được chọn

trong select box.

Ví dụ hiển thị văn bản, dựa trên giá trị của tùy chọn được chọn:


Khi chọn một chủ đề trong selectBox thì kết quả sẽ hiển thị ra nội dung của

selectbox đó.


5.2.5. Một ví dụ cụ thể về Form trong Angular.js

Giải thích ví dụ trên:

Chỉ thị ng-app định nghĩa ứng dụng Angular.js Chỉ thị ng-controller định nghĩa điều khiển ứng dụng Chỉ thị ng-model trói 2 phần tử input với đối tượng người dùng trong model Điều khiển formCtrl thiết lập các giá trị ban đầu cho đối tượng master và

định nghĩa phương thức reset().


Phương thức reset() thiết lập đối tượng user giống như đối tượng master Chỉ thị ng-click gọi phương thức reset(), chỉ khi nút được nhấn. Thuộc tính novalidate không cần có ứng dụng này, nhưng thường sẽ dùng

nó trong các form Angular.js, để ghi đè lên các validation chuẩn của HTML5.


CHƯƠNG 6: XÂY DỰNG TRÒ CHƠI PUZZLE BẰNG ANGULAR.JS

6.1. Xác định yêu cầu

Xây dựng ứng dụng game Puzzle.

6.2. Phân tích yêu cầu

Xây dựng một ứng dụng game đảm bảo các yêu cầu:

Chế độ xếp hình:

Cho phép di chuyển các ô vuông hình đã được cắt nhỏ về vị trí đúng để được

hình mẫu ban đầu.

Cho phép chơi ở nhiều mức độ (level).

Cho phép chơi trong thời gian đã được quy định trước của hệ thống.

Đếm và hiển thị số lần di chuyển các ô trong thời gian chơi.

Cho phép hiển thị trạng thái hình đúng khi người dùng nhấn nút Solve.

Chế độ tìm kiếm từ vựng tiếng Anh:

Cho phép rê chuột để tìm các tử vựng như đã cho trước. Hiển thị toàn bộ đáp án khi không tìm được hoặc khi nhấn Solve.

6.3. Lập trình ứng dụng

Chương trình trò chơi Puzzle gồm hai chế độ: chế độ xếp hình (Sliding Puzzle) và

chế độ tìm kiếm từ vựng tiếng Anh (Word Search Puzzle).

Dưới đây là một số hình ảnh của ứng dụng Game Puzzle:

Khi chạy chương trình lên, sẽ hiển thị màn hình đầu tiên với trò chơi Sliding

puzzle. Với Level đầu tiên sẽ là Level 1.


Hình 19.Giao diện bắt đầu của ứng dụng

Để bắt đầu chơi trò chơi Sliding puzzle, người chơi nhấn vào Button Start, chương

trình sẽ cho người chơi 3 phút để hoàn thành trò chơi. Người chơi có thể bấm nút

Stop để dừng chơi.

Người chơi sẽ di chuyển các hình con để tìm được hình đúng ban đầu bằng cách

click chuột vào các hình nhỏ bất kỳ lân cận ô trống.

Người chơi có thể tùy chọn số hình theo ý thích, bằng cách điền vào ô input rows

và cols, mặc định ban đầu Level 1 với ma trận (3x3) gồm 9 hình con.

Chương trình cung cấp cho người chơi Button Shuffle để xáo trộn hình, Button

Solve để có thể hiển thị kết quả hình đúng cho người chơi bất cứ lúc nào.

Khi người chơi hoàn thành (thắng) Level nào thì có thể chơi tiếp bằng cách nhấn

Button Next để chuyển qua Level mới với mức độ khó hơn.

Hình ảnh sẽ được random ngẫu nhiên quả các Level. Dựa vào hàm random.


Hình 20. Giao diện trò chơi Sliding Puzzle

Ngoài ra người chơi cũng có thể chuyển sang chế độ Word Search Puzzle (tìm

kiếm từ vựng tiếng Anh).


Hình 21. Giao diện chế độ Word Search Puzzle

Người chơi sẽ dựa vào những từ vựng cho sẵn ở cột bên trái, rê chuột vào ma trận

kí tự cho sẵn bên phải để tìm được những từ vựng đúng của trò chơi.

Người dùng có thể rê chuột theo những kí tự sẵn có trong ma trận, có thể rê theo

chiều ngang, chiều dọc hoặc cũng có thể theo hàng xéo.


Hình 22. Word Search Puzzle: Rê chuột theo nhiều chiều

6.4. Cấu trúc mã nguồn

Hình 23. Cấu trúc mã nguồn


Thư mực css để chứa style của ứng dụng.

Thư mục img để chứa các hình ảnh cần cho ứng dụng.

Thư mục js chứa các file JavaScipt của ứng dụng, như: các hàm tạo ma trận, random hình ảnh, tính thời gian, ....


CHƯƠNG 7: TỔNG KẾT ĐỀ TÀI

7.1. Kết luận

7.1.1. Kết quả sau khi thực hiện đồ án

Hiện tại, đề tài đã thực hiện được phần lớn ứng dụng trò chơi.

Đã bắt được sự kiện tính thời gian cho trò chơi, các sự kiện click, move... trong

quá trình chơi. Linh động được hình ảnh cho từng level.

Ứng dụng đã hoàn thành những phần hiển thị hình ảnh, ô chữ, giao diện tương

thích với người chơi.

7.1.2. Tự đánh giá sau khi thực hiện đồ án

Sau khi hoàn thành đồ án cơ sở “Tìm hiểu về Angular.js” thì em đã học thêm rất

nhiều kiến thức về Angular.js, về cách sử dụng và cách thức hoạt động của

Angular.js và tận dụng lại những kiến thức đã học về HTML, CSS, JavaScript.

Em có thể một phần nào đó hiểu về Angular.js để sau này có thể tìm hiểu kỹ hơn

và áp dụng vào sau này. Vì theo như đã nghiên cứu thì em biết được Angular đang

là một trong những Framework được sử dụng rất nhiều hiện nay.

Ngoài ra, em còn học được kỹ năng chọn lọc tài liệu, đọc tài liệu bằng tiếng Anh.

Biết thêm nhiều trang Web sử dụng Angular và nhiều trang web hữu ích khác.

7.2. Hướng phát triển

Trong tương lai, để ứng dụng có thể hoạt động tốt hơn cần phải phát triển:

Tính điểm cho người chơi. Xếp hạng cho người chơi. Tích hợp thêm nhiều tính năng mới như có thể chơi lại Level vừa chơi bằng

Button Replay, chèn thêm nhạc nền, hỗ trợ tốt hơn phần giao diện... Có thể thêm nhiều bảng từ vựng hơn.


Khi sắp hết giờ, còn khoảng 5 giây thì đồng hồ chuyển màu khác để nhắc nhở người chơi.

Khi các từ vựng được chọn thì sẽ được phân biệt bởi những màu khác nhau. Có lưu lại kết quả của lần chơi. Random được các ô chữ trong chế độ Tìm từ vựng – Word Search Puzzle. Khi người chơi thắng thì dừng đồng hồ tính thời gian và thông báo người

chơi thắng, và có thể chọn chơi lại hoặc chơi Level tiếp theo.


Documents

ĐỀ CƯƠNG THỰC HIỆN ĐỒ ÁN · Web viewLời cảm ơn đầu tiên em xin gửi đến quý thầy cô khoa Công Nghệ Thông Tin trường đại học Đà Lạt. Đã