advanced angularjs concepts

@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