Advanced AngularJS Concepts

4,953 views
4,555 views

Published on

Slides from my Advanced AngularJS Concepts talk at Prairie Developer Conference 2014

Published in: Software, Technology, Education
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,953
On SlideShare
0
From Embeds
0
Number of Embeds
154
Actions
Shares
0
Downloads
213
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Advanced AngularJS Concepts

  1. 1. @kylehodgson www.kylehodgson.com
  2. 2. +
  3. 3. AngularJS Architectural Advice
  4. 4. Big Ball of Mud
  5. 5. Avoid binding to functions
  6. 6. DOM Manipulation
  7. 7. Isolate Scope Directives
  8. 8. Isolate scope
  9. 9. Isolate scope
  10. 10. Isolate scope ←fail
  11. 11. Isolate scope ← amaze
  12. 12. Isolate scope: Attributes Directives
  13. 13. Isolate scope
  14. 14. Isolate scope: attributes ← attribute attribute
  15. 15. Isolate scope: attributes attribute
  16. 16. Isolate scope: attributes
  17. 17. Bindings Isolate scope
  18. 18. @:  attribute =:  binding &:  expression
  19. 19. Expressions Isolate scope
  20. 20. Isolate scope: expressions ← expression
  21. 21. Isolate scope: expressions ← expression
  22. 22. Isolate scope: expressions expression
  23. 23. Isolate scope: expressions
  24. 24. Isolate scope: expressions
  25. 25. Accessibility AngularJS & the ADA
  26. 26. ADA & AngularJS “double you double you double you dot yahoo dot com slash is not available h t m l content search search ten percent text ten percent loaded”
  27. 27. ADA & AngularJS Consider not making an SPA
  28. 28. ADA & AngularJS Bake it in from the start
  29. 29. ADA & AngularJS Keep things simple
  30. 30. Use ARIA Effectively ADA & AngularJS
  31. 31. Detection & Affordance ADA & AngularJS
  32. 32. ADA & AngularJS
  33. 33. SEO Issues & solutions
  34. 34. SEO & AngularJS
  35. 35. SEO & AngularJS
  36. 36. Duck Angular Angular Integration Testing
  37. 37. Duck Angular Run it in Karma Get it with Bower bower install duck-angular
  38. 38. Duck Angular & Karma
  39. 39. Toy App: ToDontList Story Epic As a busy executive with too much to do, I would like to see a list of things that are not worth my time, So that I can avoid doing them.
  40. 40. App.js
  41. 41. Duck Angular: Bindings
  42. 42. Duck Angular: Interactions
  43. 43. Duck Angular: Directives
  44. 44. Duck Angular: Bindings
  45. 45. Anatomy of a Duck Angular spec Duck Angular
  46. 46. End to End Testing AngularJS
  47. 47. E2E http://docs.angularjs.org/guide/e2e-testing sic: ‘depricated’ is misspelled on angularjs.org
  48. 48. Selenium • Mature • Well understood • “Enterprise strength” • Terrible “SPA” support
  49. 49. Protractor Functional Testing for AngularJS https://github.com/angular/protractor
  50. 50. Protractor Not good (with) Karma.
  51. 51. searches for elements by matching binding names, either from ng-bind or {{}} notation in the template by.binding
  52. 52. by.model by.model searches for elements by input ng-model
  53. 53. by.repeater by.repeater searches for ng-repeat elements.
  54. 54. Putting it all together
  55. 55. Web server Selenium Java Protractor pre-reqs
  56. 56. Questions? Kyle Hodgson www.kylehodgson.com @kylehodgson Avishek “Mojo” Sen Gupta www.avishek.net @avisheksengupta www.angularjs.org www.yearofmoo.com www.egghead.io www.pluralsight.com github.com/asengupta/duck-angular github.com/kylehodgson/angular-toy

×