Testing Angular 2 Applications - HTML5 Denver 2016
-
Upload
matt-raible -
Category
Technology
-
view
469 -
download
0
Transcript of Testing Angular 2 Applications - HTML5 Denver 2016
![Page 1: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/1.jpg)
Testing 2 Applications
Photos by McGinity Photo
Matt Raible • @mraible
![Page 2: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/2.jpg)
Blogger on raibledesigns.com
UI Architect and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover
![Page 3: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/3.jpg)
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?
![Page 4: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/4.jpg)
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
![Page 5: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/5.jpg)
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!
![Page 6: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/6.jpg)
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>
![Page 7: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/7.jpg)
![Page 8: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/8.jpg)
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>
![Page 9: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/9.jpg)
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>
![Page 10: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/10.jpg)
app/main.ts
import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{AppComponent}from'./app.component';
platformBrowserDynamic().bootstrapModule(AppComponent);
![Page 11: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/11.jpg)
app/app.component.ts
import{Component}from'@angular/core';
@Component({selector:'my-app',template:'<h1>MyFirstAngular2App</h1>'})exportclassAppComponent{}
![Page 12: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/12.jpg)
Angular 2 QuickStart
![Page 13: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/13.jpg)
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
![Page 14: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/14.jpg)
![Page 16: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/16.jpg)
![Page 17: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/17.jpg)
Let’s take a look at a few things…Angular CLI
TypeScript
Components and Services
IntelliJ IDEA
Unit Tests
Protractor Tests
Continuous Integration
![Page 18: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/18.jpg)
![Page 19: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/19.jpg)
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
![Page 20: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/20.jpg)
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
![Page 21: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/21.jpg)
Demo Time!
![Page 22: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/22.jpg)
Learn more about Angular CLI
https://www.youtube.com/watch?v=obbdFFbjLIU
![Page 23: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/23.jpg)
Style Guides
Angular 2 Official Style Guide
https://angular.io/styleguide
John Papa’s AngularJS Style Guide
https://github.com/johnpapa/angular-styleguide
![Page 24: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/24.jpg)
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!
![Page 26: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/26.jpg)
ResourcesDemo Code
https://github.com/mraible/ng2-demo
Step-by-step Tutorial
http://gist.asciidoctor.org/?github-mraible%2Fng2-demo%2F%2FREADME.adoc
![Page 27: Testing Angular 2 Applications - HTML5 Denver 2016](https://reader033.fdocuments.us/reader033/viewer/2022042722/5889e72a1a28ab32458b5341/html5/thumbnails/27.jpg)
Contact Me! raibledesigns.com
@mraible
linkedin.com/in/mraible
Presentationsslideshare.net/mraible
Codegithub.com/mraible
Questions?