Giới thiệu AngularJS

1. HTML Enhanced For Web App!

2. hallenge

3. hallenge
WHAT
WHY HOW

4. hallenge
AngularJs là gì ?
What???

5. hallenge
“ 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ới
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ở.”

6. hallenge
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.

7. hallenge

8. hallenge
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

9. hallenge
Mô hình MVC trong AngulaJS

10. hallenge
Tại sao chúng ta nên sử
dụng AngularJS ?
Why???

11. hallenge
 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ử.

12. hallenge
 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).

13. hallenge
 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.

14. hallenge
 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ười
dù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.

15. hallenge

16. hallenge

17. hallenge
Sử dụng AngularJS như
thế nào ?
How???

18. hallenge
Sử dụng AngularJS
Phiên bản mới nhất của Angular hiện nay là 2.0.0-beta.15.
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-
beta.15/Rx.min.js"></script>
Link download: https://angularjs.org/
<script type="text/javascript" src=" path to angular
file"></script>

19. hallenge

20. hallenge
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.

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

22. hallenge

23. hallenge
 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

24. hallenge
 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.
Module and Controller

25. hallenge
 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.
Scope

26. hallenge
Module
Controller
Scope
Directives

27. hallenge
AngularJS 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

28. hallenge

29. hallenge
AngularJs Filter
AngularJs cung cấp các Filter(bộ lọc) để chuyển đổi dữ liệu

30. hallenge
Dependency Injection
 Dependency Injection là kỹ thuật
nổi bật của AngularJS, nó là
design pattern.
 Điều này làm cho cách thành phần
phụ thuộc nhau trong phần cấu
hình.
 Kỹ thuật này giúp tái sử dụng
thành phần, bảo trì và kiểm thử.

31. hallenge
Dependency Injection

32. hallenge
AngularJS BackboneJS EmberJS
Template
Filter
Data binding
Routing
API
Model
Controller
Event Handles
Animation
SQL
Service

33. hallenge
W3C School:
http://www.w3schools.com/angular/default.asp
AngularJS.Org:
https://docs.angularjs.org/tutorial
TutorialPoint:
http://www.tutorialspoint.com//angularjs/index.htm
Tài liệu tham khảo

34. hallenge
DEMO

35. hallenge
Q&A

36. hallenge
Thank You!