Slide AngularJS

Danh Sách Thành Viên
• Đỗ Văn Chương _ 1611061303


Nội Dung
WHAT

WHY

HOW


AngularJS là gì?
What???


1

Angularjs là gì?

❖“ Dự án AngularJS được bắt đầu từ năm 2009, do lập
trình viên Misko Hevery tại Google viết ra như là một
dự án kiểu “viết cho vui”. Misko và nhóm lúc này đang
tham gia vào 1 dự án của Google tên là Google
Feedback. Với AngularJS, Misko đã rút ngắn số dòng
code front-end từ 17000 dòng còn chỉ khoảng 1500. Vớ
sự thành công đó, đội ngũ của dự án Google Feedback
quyết định phát triển AngularJS theo hướng mã nguồn
mở.”

1

AngularJS là gì?

❖AngularJS là một bộ Javascript
Framework rất mạnh và
thường được sử dụng để xây
dựng project Single Page
Application (SPA). AngularJS
cho phép xây dựng ngay trong
trình duyệt mà không cần phải
thông qua server, sử dụng mô
hình MVC.



1

Single Page Application là gì?

• Để có thể giải thích thật dễ hiểu, bạn hãy nhìn vào từ viết tắt
của tên gọi này, là SPA. Đọc đến đây, hẳn ai cũng có thể biết
được SPA là gì đúng không? Chính xác, SPA chính là việc làm
giảm stress cho cơ thể, lưu thông tuần hoàn. Tất cả những thao
tác của một nhân viên SPA chỉ tập trung trên một người, nhằm
giúp người sử dụng dịch vụ này thoải mái nhất. Single-page
Application cũng vậy, đó là một trang web hay một ứng dụng
web, mà tất cả những thao tác xử lý của trang web đều được
diễn ra trên một trang duy nhất. Với mục đích chính là nâng cao

trải nghiệm người dùng tốt hơn, hiệu quả hơn, thoải mái hơn.


1

Mô hình MVC

❖Model - Là thành phần
thấp nhất của mô hình
có nhiệm vụ duy trì dữ
liệu.
❖View - Có nhiệm vụ
hiển thị các phần dữ
liệu đến người sử
dụng.
❖Controller - Là phần
Code điều khiển sự
tương tác giữa Model
và View


1

Mô Hình MVC trong AngularJS


Tại sao nên sử dụng
AngularJS ?
Why?

1

Tại sao nên sử dụng AngularJS?

AngularJS

AngularJS được
phát triển bởi
Google và là mã
nguồn mở
viết theo mô hình
MVC.

AngularJS cho phép
tạo ra các ứng dụng
một cách đơn
giản, code sạch, dễ
dàng hơn trong việc
kiểm thử.


❖Tương thích với hầu hết các trình duyệt trên các điện thoại
thông minh (iOS, Android).
❖AngularJS sử dụng cơ chế data-binding tức là khi model
thay đổi thì view cũng thay đổi theo và ngược lại.
❖Được tích cực phát triển bởi cộng đồng mã nguồn mở
(on GitHub).

❖ Extendable: khả năng mở rộng, có nghĩa là có thể dễ dàng thêm những
features mới cho người dùng.
❖ Maintainable: ứng dụng viết bằng angularJS rất dễ debug và fix, điều này
có ý nghĩa khi làm việc với một project lớn.
❖ Testable: AngularJS hỗ trợ unit, end-to-end testing, điều đó thuận lợi cho
việc fix và debug trước khi đến tay ngườidùng.
❖ Standardized: angularJS được xây dựng dựa trên khả năng sẵn có của
trình duyệt nên cho phép tận dụng đặt tính mới nhất ( như HTML API…) và
cá công cụ phổ biến khác.


Sử dụng AngularJs như
thế nào?
How ?



AngularJS Expression

• AngularJS expression
có
thể được viết trong dấu
ngoặc kép:
{{expression}}.
• AngularJS sẽ giải quyết
các expression, và trả về
kết quả chính xác nơi
biểu thức được viết.

Data Binding

Data Binding trong AngularJs
là cách thức tự động đồng bộ
(synchronization) dữ liệu giữa
Model và View.


AngularJS Directives

AngularJS có một tập hợp
các chỉ thị xây dựng sẵn,
trong đó cung cấp các
chức năng cho các ứng
dụng gọi là directives.
Có thể tự định nghĩa một
directive.
Cú pháp: ng-something


Module và controller

AngularJS Module được
định nghĩa như một
application.
Modules là 1 bộ phận chứa
các controllers cho ứng
dụng.
AngularJS Controller kiểm
soát dữ liệu của các ứng

dụng AngularJS.
Controller được chứa trong
module.


Scope

Phạm vi là một phần ràng buộc giữa HTML (View) và
JavaScript (Controller).
Scope chứa thông tin là các dữ liệu model.
Trong controller, dữ liệu model có thể được truy
cập qua đối tượng $scope.


AngulerJS Services

Service là các hàm
JavaScript và có nhiệm
vụ trên những task nhất
định. Nó làm cho chúng
thành những thực thể
riêng rẽ dễ dàng trong
việc bảo trì và kiểm thử.
Controller có thể gọi
chúng một cách đơn
giản