Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Promises And Chaining In AngularJS - Into Callback Hell And Back Again

6,121 views

Published on

If you have worked with Javascript before you might have been there already - callback hell! But there is an easy & elegant way out to get back control over your code - Promises and promise chaining! This talk will give an introduction to promises and chaining in AngularJS.

This talk was held by Hans-Gunther Schmidt at the Berlin AngularJS Meetup on Oct. 8th 2014 (http://www.meetup.com/AngularJS-Meetup-Berlin/events/182646022/).

Published in: Software
  • Be the first to comment

Promises And Chaining In AngularJS - Into Callback Hell And Back Again

  1. 1. Promises and chaining Into callback hell … back again
  2. 2. About Hans @otype hans@otype.de
  3. 3. Intro: sync, async, callbacks
  4. 4. Humans are multi-threaded!
  5. 5. Javascript is single-threaded & synchronous. Browsers provide asynchrony*.
  6. 6. finish start a() b() c() a() b() c()
  7. 7. finish start a() b() c() a() b() c() b() a() c() c() b() a() c(),a() b()…
  8. 8. sync async
  9. 9. Why async?
  10. 10. Synchronous flow, here? Bad idea!
  11. 11. “Callbacks to the rescue!”
  12. 12. “Call me back!”
  13. 13. Use a callback! Way better!
  14. 14. Got it!
  15. 15. a() b() c() d() e() f() Callbacks in order?
  16. 16. “Pyramid of doom!”
  17. 17. “I am NOT going to debug that!”
  18. 18. “Free ticket into callback hell!”
  19. 19. Core: Promises to the rescue
  20. 20. “I hereby give you a promise that I will answer your question some time in the future … but not right now!” My definition of a promise
  21. 21. Promise fulfilled rejected pending settled
  22. 22. Still experimental kriskowal/q cujojs/when tildeio/rsvp.js WinJS.Promise
  23. 23. $q.defer()
  24. 24. .then()
  25. 25. .resolve() .reject()
  26. 26. .then() in .then() in .then() …
  27. 27. “I’ve seen that *$#%$* before …”
  28. 28. Chaining
  29. 29. “Wicked, Hans!”
  30. 30. “And what about collecting results from multiple promises?”
  31. 31. Combined results $q.all()
  32. 32. “OK! Enough theory!”
  33. 33. Get fancy: Demo Time!
  34. 34. Outro: Questions?
  35. 35. http://ejohn.org/blog/how-javascript-timers-work/ http://www.html5rocks.com/en/tutorials/async/deferred/ https://docs.angularjs.org/api/ng/service/$q https://github.com/kriskowal/q https://developer.mozilla.org/en-US/docs/Web/JavaScript/ Reference/Global_Objects/Promise https://www.promisejs.org/ https://github.com/promises-aplus/promises-spec
  36. 36. “Thank you! Over & out!”

×