Advanced AngularJS Concepts
-
Upload
kyle-hodgson -
Category
Software
-
view
789 -
download
3
description
Transcript of 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