Your SlideShare is downloading. ×
  • Like
Advanced AngularJS Concepts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Advanced AngularJS Concepts

  • 1,747 views
Published

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

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

Published in Software , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,747
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
96
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. @kylehodgson www.kylehodgson.com
  • 2. +
  • 3. AngularJS Architectural Advice
  • 4. Big Ball of Mud
  • 5. Avoid binding to functions
  • 6. DOM Manipulation
  • 7. Isolate Scope Directives
  • 8. Isolate scope
  • 9. Isolate scope
  • 10. Isolate scope ←fail
  • 11. Isolate scope ← amaze
  • 12. Isolate scope: Attributes Directives
  • 13. Isolate scope
  • 14. Isolate scope: attributes ← attribute attribute
  • 15. Isolate scope: attributes attribute
  • 16. Isolate scope: attributes
  • 17. Bindings Isolate scope
  • 18. @:  attribute =:  binding &:  expression
  • 19. Expressions Isolate scope
  • 20. Isolate scope: expressions ← expression
  • 21. Isolate scope: expressions ← expression
  • 22. Isolate scope: expressions expression
  • 23. Isolate scope: expressions
  • 24. Isolate scope: expressions
  • 25. Accessibility AngularJS & the ADA
  • 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. ADA & AngularJS Consider not making an SPA
  • 28. ADA & AngularJS Bake it in from the start
  • 29. ADA & AngularJS Keep things simple
  • 30. Use ARIA Effectively ADA & AngularJS
  • 31. Detection & Affordance ADA & AngularJS
  • 32. ADA & AngularJS
  • 33. SEO Issues & solutions
  • 34. SEO & AngularJS
  • 35. SEO & AngularJS
  • 36. Duck Angular Angular Integration Testing
  • 37. Duck Angular Run it in Karma Get it with Bower bower install duck-angular
  • 38. Duck Angular & Karma
  • 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. App.js
  • 41. Duck Angular: Bindings
  • 42. Duck Angular: Interactions
  • 43. Duck Angular: Directives
  • 44. Duck Angular: Bindings
  • 45. Anatomy of a Duck Angular spec Duck Angular
  • 46. End to End Testing AngularJS
  • 47. E2E http://docs.angularjs.org/guide/e2e-testing sic: ‘depricated’ is misspelled on angularjs.org
  • 48. Selenium • Mature • Well understood • “Enterprise strength” • Terrible “SPA” support
  • 49. Protractor Functional Testing for AngularJS https://github.com/angular/protractor
  • 50. Protractor Not good (with) Karma.
  • 51. searches for elements by matching binding names, either from ng-bind or {{}} notation in the template by.binding
  • 52. by.model by.model searches for elements by input ng-model
  • 53. by.repeater by.repeater searches for ng-repeat elements.
  • 54. Putting it all together
  • 55. Web server Selenium Java Protractor pre-reqs
  • 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