testing angular 2 applications - html5 denver 2016
TRANSCRIPT
Testing 2 Applications
Photos by McGinity Photo
Matt Raible • @mraible
Blogger on raibledesigns.com
UI Architect and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover
What about YOU?
How long have you been doing web development?
Do you like JavaScript?
What’s your favorite JavaScript framework?
Why are you here?
Quality
“A person who knows how to fix motorcycles—with Quality—is less likely to run short of friends than one who doesn't. And they aren't going to see him as some kind of object either. Quality destroys
objectivity every time.”
— Zen and the Art of Motorcycle Maintenance
Software Testing
With motorcycles, you drive to test them.
With software, you can test it without driving it.
Or rather, you can automate the driving.
If you don’t automate tests, you’re still testing!
Hello World with AngularJS<!doctypehtml><htmlng-app><head><title>HelloWorld</title></head><body><div><label>Name:</label><inputtype="text"ng-model="name"placeholder="Enteranamehere"><hr><h1>Hello{{name}}!</h1></div><scriptsrc="http://code.angularjs.org/1.5.8/angular.min.js"></script></body></html>
Hello World with Angular 2<html><head><title>Angular2QuickStart</title><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="styles.css"><!--1.Loadlibraries--><!--Polyfills,forolderbrowsers--><scriptsrc="node_modules/core-js/client/shim.min.js"></script>
<scriptsrc="node_modules/zone.js/dist/zone.js"></script><scriptsrc="node_modules/reflect-metadata/Reflect.js"></script><scriptsrc="node_modules/systemjs/dist/system.src.js"></script>
</head></html>
Hello World with Angular 2<!--2.ConfigureSystemJS--><script>System.config({packages:{app:{format:'register',defaultExtension:'js'}}});System.import('app/main').then(null,console.error.bind(console));</script></head><!--3.Displaytheapplication--><body><my-app>Loading...</my-app></body></html>
app/main.ts
import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{AppComponent}from'./app.component';
platformBrowserDynamic().bootstrapModule(AppComponent);
app/app.component.ts
import{Component}from'@angular/core';
@Component({selector:'my-app',template:'<h1>MyFirstAngular2App</h1>'})exportclassAppComponent{}
Angular 2 QuickStart
Easiest ways to get startedAngular 2 QuickStart
https://github.com/angular/quickstart
Angular 2 Seed
https://github.com/mgechev/angular2-seed
Angular CLI
https://github.com/angular/angular-cli
Let’s take a look at a few things…Angular CLI
TypeScript
Components and Services
IntelliJ IDEA
Unit Tests
Protractor Tests
Continuous Integration
Angular CLInpm install -g angular-cli
ng new ng2-demo
cd ng2-demo
ng serve
ng test
ng e2e
ng g component
ng g service
ng build
ng --help
TypeScriptnpm install -g typescript
function greeter(person: string) { return "Hello, " + person;} var user = "Jane User"; document.body.innerHTML = greeter(user);
tsc greeter.ts
https://www.typescriptlang.org/docs/tutorial.html
Demo Time!
Learn more about Angular CLI
https://www.youtube.com/watch?v=obbdFFbjLIU
Style Guides
Angular 2 Official Style Guide
https://angular.io/styleguide
John Papa’s AngularJS Style Guide
https://github.com/johnpapa/angular-styleguide
ng-book 2A comprehensive guide to developing with Angular 2
Sample apps: Reddit clone, Chat with RxJS Observables, YouTube search-as-you-type, Spotify Search
How to write components, use forms and APIs
Over 5,500+ lines of code!
ResourcesDemo Code
https://github.com/mraible/ng2-demo
Step-by-step Tutorial
http://gist.asciidoctor.org/?github-mraible%2Fng2-demo%2F%2FREADME.adoc
Contact Me! raibledesigns.com
@mraible
linkedin.com/in/mraible
Presentationsslideshare.net/mraible
Codegithub.com/mraible
Questions?