TÌM HIỂU ANGULARJS VÀ ÁP DỤNG XÂY DỰNG WEBSITE SINGLE PAGE APPLICATION BÁN ĐIỆN THOẠI DI ĐỘNG - Full 10 điểm

O9 TRƯỜNG ĐẠI HỌC QUẢNG NAM

KHOA CÔNG NGHỆ THÔNG TIN

----------

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

TÌM HIỂU ANGULARJS VÀ ÁP DỤNG XÂY DỰNG WEBSITE
SINGLE PAGE APPLICATION BÁN ĐIỆN THOẠI DI ĐỘNG

Sinh viên thực hiện
NGUYỄN VĂN HẢO

MSSV: 2112011004
CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

KHÓA 2012 – 2016

Giảng viên hướng dẫn
ThS. DƯƠNG PHƯƠNG HÙNG

Quảng Nam, tháng 4 năm 2016

LỜI CẢM ƠN

Được sự phân công của Khoa Công nghệ thông tin - Trường Đại học Quảng
Nam, và sự đồng ý của Thầy giáo hướng dẫn ThS. Dương Phương Hùng em đã
thực hiện đề tài “Tìm hiểu AngularJS và áp dụng xây dựng website single page
application bán điện thoại di động”.

Để hồn thành khóa luận này, em xin chân thành cảm ơn các thầy cơ giáo đã
tận tình hướng dẫn, giảng dạy trong suốt quá trình học tập, nghiên cứu và rèn
luyện ở Trường Đại học Quảng Nam.

Xin chân thành cảm ơn Thầy giáo hướng dẫn ThS. Dương Phương Hùng đã
tận tình, chu đáo hướng dẫn tơi thực hiện khóa luận này.

Mặc dù đã có nhiều cố gắng để thực hiện đề tài này một cách hoàn chỉnh
nhất. Song do buổi đầu mới làm quen với công tác nghiên cứu khoa học cũng như
vẫn còn nhiều hạn chế về kiến thức và kinh nghiệm nên không tránh khỏi những
thiếu sót nhất định mà bản thân chưa thấy được. Em rất mong được sự góp ý của
q Thầy, Cơ giáo và các bạn đồng nghiệp để khóa luận được hoàn chỉnh hơn.

Em xin chân thành cảm ơn!
Quảng Nam, ngày 10 tháng 4 năm 2016
Sinh viên
Nguyễn Văn Hảo

MỤC LỤC

DANH MỤC TỪ VIẾT TẮT........................................................................ v

DANH MỤC HÌNH VẼ............................................................................... vi

NỘI DUNG ĐỀ TÀI ..................................................................................... 1

Phần 1. MỞ ĐẦU.......................................................................................... 1
1. Lý do chọn đề tài................................................................................. 1
2. Mục đích nghiên cứu........................................................................... 1
3. Đối tượng và phạm vi nghiên cứu....................................................... 1

4. Phương pháp nghiên cứu..................................................................... 2
5. Lịch sử nghiên cứu.............................................................................. 2
6. Đóng góp của đề tài ............................................................................ 2
7. Cấu trúc của khóa luận........................................................................ 2

Phần 2. NỘI DUNG NGHIÊN CỨU ............................................................ 4

Chương 1: TỔNG QUAN VỀ ANGULARJS FRAMEWORK ................... 4
1.1. Ngôn ngữ lập trình web JavaScript.................................................. 4
1.1.1. Lịch sử phát triển ......................................................................... 4
1.1.2. JavaScript là gì? ........................................................................... 4
1.1.3. JavaScript có thể làm những gì? .................................................. 4
1.2. Tổng quan về AngularJS.................................................................. 4
1.2.1. Lịch sử phát triển ......................................................................... 4
1.2.2. AngularJS là gì? ........................................................................... 6
1.2.3. Các tính năng chính ..................................................................... 6
1.2.4. Đặc trưng...................................................................................... 9

i

1.2.5. Mơ hình MVC .............................................................................. 9
1.2.6. Single Page Application – SPA ................................................. 10
1.2.7. Tổng kết chương 1 ..................................................................... 11

Chương 2: ANGULARJS FRAMEWORK ................................................ 12
2.1. Tại sao phải sử dụng AngularJS?................................................... 12

2.2. AngularJS được lập trình như thế nào? ......................................... 12
2.2.1. Cài đặt AngularJS....................................................................... 12

2.2.2. Chương trình đầu tiên ................................................................. 13
2.3. Các thành phần của AngularJS ...................................................... 14
2.3.1 Angular Template........................................................................ 14
2.3.2. Modules ...................................................................................... 16
2.3.3. Scope .......................................................................................... 19
2.3.4. Model.......................................................................................... 20
2.3.5. Controller.................................................................................... 20
2.3.6. Expression (Biểu thức)............................................................... 21
2.3.7. Filters (Bộ lọc) ........................................................................... 22
2.3.8. Directives.................................................................................... 23
2.3.9. Services ...................................................................................... 25
2.3.10. Multiple View and Routing...................................................... 27
2.3.11. Form validation ........................................................................ 29

2.4. Tổng kết chương 2 ......................................................................... 31

Chương 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG BÁN ĐIỆN THOẠI
DI ĐỘNG .................................................................................................... 32

3.1. Khảo sát hệ thống hiện tại.............................................................. 32
3.1.1. Tổng quan về tổ chức ................................................................. 32
3.1.2. Chức năng và nhiệm vụ của tổ chức .......................................... 32

ii

3.1.3. Mục tiêu của tổ chức .................................................................. 32
3.1.4. Cơ cấu tổ chức............................................................................ 32

3.2. Các yêu cầu của hệ thống............................................................... 32
3.2.1. Yêu cầu của khách hàng............................................................. 32

3.2.2. Yêu cầu của quản lý và chủ cửa hàng ........................................ 33

3.3. Biểu đồ ca sử dụng (Use case) của hệ thống ................................. 33
3.3.1. Tác nhân của hệ thống................................................................ 33
3.3.2. Ca sử dụng của hệ thống ............................................................ 33
3.3.3. Biểu đồ ca sử dụng của hệ thống ............................................... 34

3.4. Mơ hình cấu trúc của hệ thống....................................................... 34
3.4.1. Các lớp thực thể ......................................................................... 34
3.4.2. Biểu đồ lớp thực thể của hệ thống.............................................. 36
3.4.3. Các lớp biên của hệ thống .......................................................... 37
3.4.4. Các lớp điều khiển...................................................................... 38
3.5. Mơ hình hành vi của hệ thống........................................................ 38
3.5.1. Biểu đồ tuần tự ........................................................................... 38
3.5.2. Biểu đồ hoạt động ...................................................................... 40
3.6. Cơ sở dữ liệu của hệ thống............................................................. 43
3.6.1. Lớp thực thể và các phương thức ............................................... 43
3.6.2. Mơ hình quan hệ......................................................................... 44

3.7. Biểu đồ định hướng giao diện người dùng .................................... 44
3.8. Tổng kết chương 3 ......................................................................... 46

Chương 4: ÁP DỤNG CÔNG NGHỆ ANGULAR JS ĐỂ XÂY DỰNG
WEBSITE BÁN ĐIỆN THOẠI DI ĐỘNG ................................................ 47

4.1. Một số chức năng cơ bản ............................................................... 47
4.2. Giao diện trang web ....................................................................... 47

iii

4.3. Kết luận chương 4: ......................................................................... 50
Phần 3. KẾT LUẬN .................................................................................... 51
Phần 4. TÀI LIỆU THAM KHẢO.............................................................. 52

iv

DANH MỤC TỪ VIẾT TẮT

Tên viết tắt Tên đầy đủ

API Application Programming Interface
CSS Cascading Style Sheets
DOM Document Object Model
HTML HyperText Markup Language
UNIX Uniplexed Information and Computing System
WWW World Wide Web

v

DANH MỤC HÌNH VẼ
Hình 1.1: JavaScript: The goog parts và JavaScript: The definitive guide.. 5
Hình 1.2: Các thành phần quan trọng của AngularJS .................................. 8
Hình 1.3: Sự khác biệt giữa one-way databinding và two-way databinding
của AngularJS ............................................................................................... 9
Hình 1.4: Mơ hình MVC .............................................................................. 9
Hình 1.5: Mơ hình MVC và MVW của AngularJS ................................... 10
Hình 1.6: Mơ hình website Single Page Application................................. 11
Hình 2.1: Module trong AngularJS ............................................................ 16
Hình 2.2: $rootScope.................................................................................. 20
Hình 2.3: Một số các Directives quan trọng trong ứng dụng AngularJS... 23

Hình 2.4: Ví dụ về Form validation ........................................................... 30
Hình 3.1: Biểu đồ Use Case của hệ thống.................................................. 34
Hình 3.2: Biểu đồ lớp thực thể của hệ thống ............................................. 36
Hình 3.3: Biểu đồ tuần tự cho ca sử dụng Đăng nhập ............................... 38
Hình 3.4: Biểu đồ tuần tự cho ca sử dụng Mua hàng................................. 39
Hình 3.5: Biểu đồ tuần tự cho ca sử dụng Tìm kiếm sản phẩm................. 39
Hình 3.6: Biểu đồ tuần tự cho ca sử dụng Thêm/Sửa sản phẩm................ 40
Hình 3.7: Biểu đồ hoạt động của phương thức dangKyKhachHang ......... 40

vi

Hình 3.8: Biểu đồ hoạt động của phương thức suaThongTinKhachHang. 41
Hình 3.9: Biểu đồ hoạt động của phương thức muaSanPham ................... 41
Hình 3.10: Biểu đồ hoạt động của phương thức suaThongTinSanPham... 42
Hình 3.11: Lớp thực thể và các phương thức của hệ thống ....................... 43
Hình 3.12: Mơ hình quan hệ của hệ thống ................................................. 44
Hình 3.13: Biểu đồ định hướng người dùng cho ca sử dụng Mua Hàng ... 45
Hình 3.14: Biểu đồ định hướng người dùng cho ca sử dụng Quản lý kho 45
Hình 3.15: Biểu đồ định hướng người dùng cho ca sử dụng Cập Nhập Sản
Phẩm ............................................................................................................ 46
Hình 4.1: Trang chủ của trang web ............................................................ 47
Hình 4.2: Trang Đăng nhập........................................................................ 48
Hình 4.3: Trang giỏ hàng ........................................................................... 48
Hình 4.4: Trang thanh tốn ........................................................................ 49
Hình 4.5: Trang cập nhập sản phẩm........................................................... 49

vii

Phần 1. MỞ ĐẦU
1. Lý do chọn đề tài

Sự phát triển của công nghệ thông tin và việc ứng dụng công nghệ
thông tin trong các lĩnh vực của đời sống, kinh tế, xã hội trong nhiều năm qua
đặc biệt là trong thương mại đã thôi thúc các doanh nghiệp có sự đầu tư lớn
vào trong lĩnh vực thương mại điện tử. Sự tiện ích ln đặt lên hàng đầu nên
giao diện và nội dung của trang web phải thật nổi bật có thể thu hút được
khách hàng. Bên cạnh đó dung lượng cũng là một vấn đề đối với khách hàng
trực tuyến.

Một số trang web truyền thông hiện nay chủ yếu sử dụng nhiều trang
web dưới dạng mã HTML, hầu như chúng khơng có liên kết nào giữa hai u
cầu khác nhau, do đó việc xử lý hay load trang sẽ lâu hơn. Trong khi đó đối
với Single Page Application chỉ với lần yêu cầu đầu tiên thì hệ thống sẽ trả về
tất cả code xử lý cũng như code hiển thị của toàn bộ trang web, và người dùng
chỉ cần yêu cầu những phần mình cần, giúp rút ngắn việc tải trang, trải
nghiệm các hiệu ứng của trang web, q trình thao tác dữ liệu khơng khác gì
với ứng dụng desktop.

Chính vì những lý do trên, tơi đã chọn đề tài “Tìm hiểu AngularJS và
áp dụng Angular JS xây dựng website single page application bán điện
thoại di động” để làm luận văn tốt nghiệp.
2. Mục đích nghiên cứu

- Nắm vững những kiến thức cơ bản về AngularJS.
- Áp dụng AngularJS vào xây dựng một trang website single page
application bán điện thoại di động.
- Cách đưa một trang web lên server để được sử dụng.
3. Đối tượng và phạm vi nghiên cứu
- Các kỹ thuật Single Page Application.
- Sử dụng AngularJS trong xây dựng Website Single Page Application.

1

4. Phương pháp nghiên cứu
- Tìm đọc tài liệu, giáo trình, luận văn, bài báo, thông tin trên mạng.
- Phân tích, tổng hợp tài liệu.

5. Lịch sử nghiên cứu
Với vấn đề về AngularJS thì cũng đã được nhiều tác giả phân tích,

nghiên cứu theo nhiều hướng khác nhau.
6. Đóng góp của đề tài

Đề tài được nghiên cứu nhằm trình bày những kiến thức cơ bản và tổng
quan về công nghệ AngularJS.

Xây dựng website bán điện thoại di động bằng cách áp dụng
AngularJS.
7. Cấu trúc của khóa luận

Lời cảm ơn
Mục lục
Danh mục các ký hiệu, các chữ viết tắt
Danh mục các hình vẽ, đồ thị
MỞ ĐẦU

1. Lý do chọn đề tài
2. Mục đích nghiên cứu
3. Đối tượng và phạm vi nghiên cứu
4. Phương pháp nghiên cứu

5. Lịch sử nghiên cứu
6. Đóng góp của đề tài
NỘI DUNG NGHIÊN CỨU
Chương 1: Tổng quan về AngularJS Framework
Chương 2: AngularJS Framework
Chương 3: Phân tích và thiết kế hệ thống bán điện thoại di động
Chương 4: Áp dụng công nghệ AngularJS để xây dựng website bán
điện thoại di động

2

KẾT LUẬN
TÀI LIỆU THAM KHẢO

3

Phần 2. NỘI DUNG NGHIÊN CỨU

Chương 1: TỔNG QUAN VỀ ANGULARJS FRAMEWORK

1.1. Ngơn ngữ lập trình web JavaScript
1.1.1. Lịch sử phát triển

JavaScript được phát triển bởi Brendan Eich tại Hãng truyền thông
Netscape với cái tên đầu tiên là Mocha, rồi sau đó đổi tên thành LiveScript,
và cuối cùng thành JavaScript.

JavaScript được bổ sung vào trình duyệt Netscape v2.0b3 phát hành
tháng 12 năm 1995. JavaScript được bổ sung vào trình duyệt Internet
Explorer v3.0 vào tháng 8 năm 1996.

1.1.2. JavaScript là gì?
JavaScript là một ngơn ngữ lập trình kịch bản dựa trên đối tượng được
phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được sử dụng rộng rãi
cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng
các đối tượng nằm sẵn trong ứng dụng.

1.1.3. JavaScript có thể làm những gì?
Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang
web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được
dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như
kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh ...
Bên ngồi trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF
của Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều
hành Mac OS X v10.4 cũng có sử dụng JavaScript.
1.2. Tổng quan về AngularJS

1.2.1. Lịch sử phát triển
AngularJS là một dự án mã nguồn mở được phát triển đầu tiên của bởi
Misko Hevery, một nhân viên của Google vào năm 2009 khi đã rút ngắn số

4

dòng code front-end từ 17000 dòng còn khoảng 1500. Với sự thành cơng đó
thì Google quyết định phát triển AngularJS theo hướng mã nguồn mở và
phiên bản 1.0 được cho ra mắt năm 2012.

Công nghệ HTML hỗ trợ tốt cho các trang web tĩnh, kiểu như trước năm
2000 vậy. Khi xây dựng 1 trang web bằng PHP, Node/Express hay Ruby thì
nó cũng chỉ là một trang web tĩnh với nội dung được thay đổi khi bạn gửi

request về máy chủ, máy chủ sẽ render 1 trang với nội dung tương ứng. Tuy
nhiên mọi thứ đã thay đổi với sự xuất hiện của HTML5, nhất là có sự hỗ trợ
từ các ơng lớn như Google, Yahoo và tập hợp đông đảo của cộng đồng mã
nguồn mở.

Douglas Crockford, người được biết đến nhiều qua JSON và JSLint đã
dùng sự chênh lệch về độ dày giữa 2 cuốn sách “JavaScript: The definitive
guide” và “JavaScript: The goog parts” để châm biếm 1 cách hài hước về
JavaScript.

Hình 1.1: JavaScript: The goog parts và JavaScript: The definitive guide
Tuy nhiên, sự thành công của jQuery đã khiến JavaScript được nhiều

người u thích vì tính đơn giản và dễ sử dụng. Việc phát triển một website
sử dụng AJAX thì khơng khó, bạn có thể sử dụng jQuery để làm việc này với
$.ajax tuy nhiên làm thế nào để xây dựng một phần mềm có thể mở rộng, đã
test, nâng cấp và bảo trì thì khơng hề đơn giản chút nào vì bản thân JavaScript
khơng được thiết kế ngay từ đầu để làm những việc này. Do đó sự ra đời của
những Framework hỗ trợ lập trình viên xây dựng ứng dụng web một cách có

5

hệ thống đã ra đời như Sencha, Ember, Knockuot, Backbone, và đặc biệt là
AngularJS.

1.2.2. AngularJS là gì?
AngularJS là framework JavaScript mã nguồn mở và hồn tồn miễn phí.
Angular tăng cường HTML cho các ứng dụng web. Nó có chức năng giảm
bớt q trình phát triển web. Từ nhiều năm trước, khi HTML mới bắt đầu, nó
được dự định để xây dựng trang web hoặc có thể nói đó là một cách để hiển

thị tài liệu tĩnh, khơng có xây dựng một ứng dụng web động. Bây giờ, hãy
tưởng tượng HTML lần đầu tiên được sử dụng để xây dựng các ứng dụng web
động, đó là Angular. Angular là những gì HTML sẽ có được nếu nó được
thiết kế để xây dựng các ứng dụng web.

1.2.3. Các tính năng chính
Hai cách liên kết dữ liệu trong AngularJS là khả năng thay đổi giá trị
thuộc tính của đối tượng, đồng thời giao diện người dùng đưa ra sự thay đổi
đó ngay tại thời điểm đó, và ngược lại. Ví dụ, nếu bạn có thuộc tính của một
đối tượng gọi là “Page.Title”, mỗi lần thay đổi giá trị “Page.Title”, giao diện
người dùng tự động cập nhật và hiển thị giá trị mới của “Page.Title”. Và nếu
bạn nhập vào trong giao diện ứng dụng người dùng của bạn, nó có thể cập
nhât giao diện người dùng và cũng cập nhật thuộc tính của đối tượng. Tất cả
đều được xử lý bởi AngularJS do đó khơng cần phải viết giống như trong một
số framework JavaScript khác. Những gì cần làm đơn giản là xác định model
của chúng ta, và bây giờ bất cứ khi nào một model được thay đổi, nó sẽ thay
đổi bất cứ nơi nào nó được đặt, có thể là trong đối tượng cụ thể hoặc trong các
lớp đại diện. Model trong Angular chỉ là cấu trúc JavaScript cũ rõ ràng, khơng
có gì là lạ mắt nhưng nó lại rất hữu ích.

Tính năng mới thực sự là đặc điểm tạo nên một khoảng cách khác nhau
lớn giữa Angular và bất kỳ framework javascript khác. Directives là đề cập
đến mợt tính năng để mở rợng nghĩa của từ HTML, đồng thời cũng có thể
được xem như là mợt cách để chỉ cho trình duyệt mẹo mới của bạn. Chúng ta

6

biết về header trong HTML5, đó là đại diện cho mợt tiêu đề nhưng nó chỉ là
phần tử tĩnh. Mặc dù HTML có thể có nhiều thẻ, nhưng nó khơng đủ mạnh để
tạo ra một́ ưng dụng web đẹp. Với đặc điểm chỉ dẫn, chúng ta có thể tạo ra từ

vựng HTML mới để trình duyệt hiểu nó có nghĩa là gı̀ và nó nên làm gı̀. Ví dụ
với Angular chúng ta có thể tạo ra thẻ như sau <draggable> drag me
</draggable >. Các văn bản bên trong tag draggable bây giờ sẽ trở thành
draggable trong trình duyệt, sau đó chỉ cần viết một định nghĩa chỉ dẫn
draggable tronǵ ưng dụng Angular của chúng ta là xong. Đây là một ví dụ
đơn giản của Angular, nó có thể làm rất nhiều th́ư hữu ích hơn. Và nó khơng
chỉ giới hạn mợt phần tử html mà có sẵn để thực thi các tḥc tính, các lớp
hoặc các chú thích html. Directives trong Angular khác với directtives tạo bởi
html ở chỗ chúng có thể thực hiện nhiều hành vi đợng hơn.

Nhiều framework cần có template nhưng Angular template chỉ là
HTML.

Dependency injection làm chó ưng dụng Angular dễ dàng hơn để phát
triển, chúng ta có thể sắp xếp mã (code) thành các module. Bằng cách này,
chúng ta có thể tạo ra các thành phần tái sử dụng mà có thể được gọi về sau,
bất ćư khi nào cần thiết. Ý tưởng này là đặc biệt tốt là khí ưng dụng mở rộng
lớn hơn và cần phải được mở rộng, dễ dàng bảo trì và kiểm ch́ưng.
Dependency injection là mợt cách để ghép các đoạn mã code với nhau, điều
này đòi hỏi phải phân chia mã code theo các ch́ưc năng riêng biệt như service,
controller, hoặc provider nhưng không giới hạn chúng.
Sau đây là các tính năng cố lõi quan trọng trong AngularJS:

 Data-binding: (Liên kết dữ liệu) Tự động đồng bộ dữ liệu giữa model
view.

 Scope: (Phạm vi) Đây là những hàm đối tượng kết nối giữa Controller
và View.

 Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều

khiển Scope.

7

 Service: AngularJS sử dụng các API được xây dựng từ các web service
(PHP, ASP) để thao tác với Database.

 Filters: Bộ lọc lọc ra các thành phần của một mảng và trả về mảng
mới.

 Directives: Đánh dấu các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ
HTML tùy chỉnh.

 Templates: Hiển thị thông tin từ Controller, đây là một thành phần của
views.

 Routing: Chuyển đổi giữa các Action trong Controller.
 MVC: Mơ hình chia thành phần riêng biệt thành Model, View,

Controller. Đây là một mơ hình khá hay nhưng trong Angular thì nó
được chế biến lại một chút gần giống với MVVM (Model View View
Model).
 Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng
dụng trong các URL để nó có thể đánh dấu được với cơng cụ tìm kiếm.
 Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng
dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng.

Hình 1.2: Các thành phần quan trọng của AngularJS

8

1.2.4. Đặc trưng
Một số các đặc trưng của AngularJS: Kiến trúc MVC, Two-way
binding, Dynamic templates, Expressions, Modules, Scopes, Dependency
injection, Directives, Routing, Services, Filters, Form validation, Testing in
mind.

Hình 1.3: Sự khác biệt giữa one-way databinding và two-way databinding
của AngularJS

1.2.5. Mơ hình MVC

Hình 1.4: Mơ hình MVC
Mơ hình MVC (Model-View-Controller) là một kiến trúc phần mềm hay
mơ hình thiết kế được sử dụng trong kỹ thuật phần mềm. Nó giúp cho các
developer tách ứng dụng của họ thành 3 thành phần khác nhau là Model (Xử

9

lý, truy xuất dữ liệu), View (Giao diện), Controller (Điều hướng yêu cầu
người dùng).

MVC thể hiện tính chun nghiệp trong lập trình, phân tích thiết kế. Do
được chia thành các phần độc lập nên giúp phát triển web rất nhanh, đơn
giản, dễ nâng cấp, bảo trì.

Trong Angular thì View sẽ là DOM, Controller là các lớp JavaScript, còn
Model sẽ là dữ liệu được lưu ở thuộc tính của các đối tượng trong JS.

Sau khi chứng kiến nhiều sự tranh luận về MV*, một tác giả của

AngularJS đã tuyên bố AngularJS là một MVW framework (Model-View-
Whatever, trong đó Whatever là viết tắt của whatever works for you).

Hình 1.5: Mơ hình MVC và MVW của AngularJS
1.2.6. Single Page Application – SPA
Một single page application hay còn gọi là single page interface, là một
web app hay website hiển thị vừa vặn trên một mặt của trang web với mục
đích giúp người dùng có trải nghiệm giống như đang dùng ứng dụng trên
desktop.
Là ứng dụng chạy bên trong trình duyệt, khơng yêu cầu phải tải lại trang
web mỗi lần sử dụng.

10

Hình 1.6: Mơ hình website Single Page Application
1.2.7. Tổng kết chương 1
AngularJS vẫn còn khá mới đối với các lập trình viên ở Việt Nam. Qua
chương 1, tôi đã giới thiệu đôi nét tổng quan về AngularJS. Biết về lịch sử,
các tính chất đặc trưng cơ bản của Angular. Và để hiểu rõ hơn về AngularJS,
tôi sẽ trình bày ở chương 2 một cách cụ thể.

11