This document discusses AngularJS architectural advice and testing strategies. It recommends using isolate scope directives to avoid binding to functions directly and manipulating the DOM. It also covers accessibility, SEO, integration testing with Karma and Duck Angular, end-to-end testing with Protractor, and putting together a full testing stack with a web server, Selenium, Java, and Protractor prerequisites.

1. @kylehodgson
www.kylehodgson.com

3. +

4. AngularJS
Architectural Advice

5. Big Ball of Mud

6. Avoid binding
to functions

7. DOM
Manipulation

8. Isolate Scope
Directives

9. Isolate scope

10. Isolate scope

11. Isolate scope
←fail

12. Isolate scope
← amaze

13. Isolate scope: Attributes
Directives

14. Isolate scope

15. Isolate scope: attributes
← attribute
attribute

16. Isolate scope: attributes
attribute

17. Isolate scope: attributes

18. Bindings
Isolate scope

19. @:
attribute
=:
binding
&:
expression

20. Expressions
Isolate scope

21. Isolate scope: expressions
← expression

22. Isolate scope: expressions
← expression

23. Isolate scope: expressions
expression

24. Isolate scope: expressions

25. Isolate scope: expressions

26. Accessibility
AngularJS & the ADA

27. 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”

28. ADA & AngularJS
Consider not
making an SPA

29. ADA & AngularJS
Bake it in from
the start

30. ADA & AngularJS
Keep things
simple

31. Use ARIA Effectively
ADA & AngularJS

32. Detection &
Affordance
ADA & AngularJS

33. ADA & AngularJS

34. SEO
Issues & solutions

35. SEO & AngularJS

36. SEO & AngularJS

37. Duck Angular
Angular Integration Testing

39. Duck Angular
Run it in Karma
Get it with Bower
bower install duck-angular

40. Duck Angular & Karma

41. 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.

43. App.js

45. Duck Angular: Bindings

46. Duck Angular: Interactions

47. Duck Angular: Directives

48. Duck Angular: Bindings

49. Anatomy of a Duck Angular spec
Duck Angular

51. End to End Testing
AngularJS

52. E2E
http://docs.angularjs.org/guide/e2e-testing
sic: ‘depricated’ is misspelled on angularjs.org

53. Selenium
• Mature
• Well understood
• “Enterprise strength”
• Terrible “SPA” support

54. Protractor
Functional Testing for AngularJS
https://github.com/angular/protractor

55. Protractor
Not good (with) Karma.

56. searches for elements by matching
binding names, either from ng-bind
or {{}} notation in the template
by.binding

57. by.model
by.model searches for elements by
input ng-model

59. by.repeater
by.repeater searches for ng-repeat
elements.

61. Putting it all together

62. Web server
Selenium
Java
Protractor pre-reqs

63. 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