@kylehodgson
www.kylehodgson.com
+
AngularJS
Architectural Advice
Big Ball of Mud
Avoid binding
to functions
DOM
Manipulation
Isolate Scope
Directives
Isolate scope
Isolate scope
Isolate scope
←fail
Isolate scope
← amaze
Isolate scope: Attributes
Directives
Isolate scope
Isolate scope: attributes
← attribute
attribute
Isolate scope: attributes
attribute
Isolate scope: attributes
Bindings
Isolate scope
@:	
  attribute
=:	
  binding
&:	
  expression
Expressions
Isolate scope
Isolate scope: expressions
← expression
Isolate scope: expressions
← expression
Isolate scope: expressions
expression
Isolate scope: expressions
Isolate scope: expressions
Accessibility
AngularJS & the ADA
ADA & AngularJS
“double you double you
double you dot yahoo dot
com slash is not available h t
m l content search search t...
ADA & AngularJS
Consider not
making an SPA
ADA & AngularJS
Bake it in from
the start
ADA & AngularJS
Keep things
simple
Use ARIA Effectively
ADA & AngularJS
Detection &
Affordance
ADA & AngularJS
ADA & AngularJS
SEO
Issues & solutions
SEO & AngularJS
SEO & AngularJS
Duck Angular
Angular Integration Testing
Duck Angular
Run it in Karma
Get it with Bower
bower install duck-angular
Duck Angular & Karma
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
...
App.js
Duck Angular: Bindings
Duck Angular: Interactions
Duck Angular: Directives
Duck Angular: Bindings
Anatomy of a Duck Angular spec
Duck Angular
End to End Testing
AngularJS
E2E
http://docs.angularjs.org/guide/e2e-testing
sic: ‘depricated’ is misspelled on angularjs.org
Selenium
• Mature
• Well understood
• “Enterprise strength”
• Terrible “SPA” support
Protractor
Functional Testing for AngularJS
https://github.com/angular/protractor
Protractor
Not good (with) Karma.
searches for elements by matching
binding names, either from ng-bind
or {{}} notation in the template
by.binding
by.model
by.model searches for elements by
input ng-model
by.repeater
by.repeater searches for ng-repeat
elements.
Putting it all together
Web server
Selenium
Java
Protractor pre-reqs
Questions?
Kyle Hodgson
www.kylehodgson.com @kylehodgson
Avishek “Mojo” Sen Gupta
www.avishek.net
@avisheksengupta
www.ang...
Advanced AngularJS Concepts
Advanced AngularJS Concepts
Advanced AngularJS Concepts
Advanced AngularJS Concepts
Advanced AngularJS Concepts
Advanced AngularJS Concepts
Advanced AngularJS Concepts
Upcoming SlideShare
Loading in...5
×

Advanced AngularJS Concepts

2,845

Published on

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

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

No Downloads
Views
Total Views
2,845
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
169
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×