@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 ten
percent text ten percent
loaded”
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
worth my time,
So that I can avoid doing them.
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.angularjs.org
www.yearofmoo.com
www.egghead.io
www.pluralsight.com
github.com/asengupta/duck-angular
github.com/kylehodgson/angular-toy

Advanced AngularJS Concepts