Presentation about AngularJS Promises

1. AngularJS Promises
Present about AngularJS
Promises

2. Promises
❖Thế nào là promises?
❖Những tính năng, đặc điểm nào mà AngularJS promises có
❖Mục đích sử dụng AngularJS promises
❖Demo sử dụng promises cho việc load images

3. Code và Demo
❖Basic Promises
❖Multiple Promises
❖Image Preloading Service

4. AngularJS Promises
Làm cái kia trước rồi làm cái
này..

5. Thế nào là promise?
❖Là 1 phương thức dùng để quán lý các hành động không đồng bộ khác
nhau được thực hiện ở trong app.
❖Khi hành động nào đó được thực hiện xong, thì bạn có thể xý lý được kết
quả.
❖Bạn có hiểu là: Khi bạn làm xong việc này thì bạn có thể làm việc khác.

6. Promise = $.ajax?
❖Chúng ta đã quen với khái niệm của Ajax callback, đó là:
➢ $ajax(url).done(function(response) {});
❖$.ajax sẽ trả về môt jQuery promise, cái mà giống với promise nhưng nó
khác so với AngularJS promises.
❖Hệ thống AngularJS promise đã được mở rộng hơn so với promise jQuery
Ajax.

7. Tính năng đặc điểm của AngularJS Promise
❖ Nó không bị giới hạn chỉ để dùng gọi APIs.
❖ Bạn có thể sử dụng nó để quản lý các tiến trình của hệ thống logic trong code.
❖ Bạn có thể thực hiện chuỗi các hành động sau khi một promise hoàn thành. "Khi bạn thực hiện
xong cái kia thì làm cái này, cái đó ..."
❖ Bạn có thể xử lý một cách riêng biệt khi thành công, lỗi, tiến trình.
❖ Bạn có thể nhóm nhiều promises khác nhau vào chung một promise. "Khi bạn thực hiện xong
8 hành động này thì bạn thực hiện hành động kia"
❖ Khi bạn có một promise nhưng nó đã được xử lý và kết thúc thì bạn không phải chờ để thực
hiện hành động khác.

8. Promise System
❖Hệ thống Promise thì chạy trên AngularJS, nó sử dụng $q service để hoạt
động
❖Nó bao gồm:
- Deferred API
- Promise API

9. Deferred API
 Khởi tạo đối tượng deferred bằng function $q.defer()
 resolve(value)
 reject(reason)
 notify(value)
 thuộc tính promise

10. Promise API
 Đối tượng Promise là một thuộc tính của deferred
 then(successCallback, errorCallback, notifyCallback)
 catch(errorCallback)
 finally(callback)

11. Angular $q
 defer() – khởi tạo đối tượng deferred
 reject(reason) – giống như throw ở JS
 when(value) – bọc lấy đối tượng khác giống như một promise
 all(promiseArray) – khởi tạo một promise mới từ nhiều các promises khác
nhau

12. Simple Promise Demo
 Ở đây chúng ta sẽ sử dụng promise để preload một bức ảnh.
 Code ở đây:
- Khởi tạo đối tượng deferred
- Sử dụng 1 tiền trình dài, đó là load ảnh
- Lưu promise và thêm then() để điều khiển những gì tiếp theo khi load hoàn tất
 Plunker Simple Promise Demo

13. Promise Use Cases
 API calls
- Khi API call thành công và hoàn tất thì ta thu được data, từ đó sẽ sử
data đó trong hệ thống.
- Bạn có sử dụng $http? $http.get() sẽ trả về một promise, từ đó ta sử
sử dụng .then() của Promise API để sử lý tiến trình. $resource cũng
có cách hoạt động tương tự, nó cũng sử dụng $http.

14. Thanks