Testing Angular 2 Applications - HTML5 Denver 2016

1. Testing 2 Applications Photos by McGinity Photo Matt Raible • @mraible

2. Blogger on raibledesigns.com UI Architect and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover

3. 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?

4. Quality “A person who knows how to ﬁx 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

5. 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!

6. Hello World with AngularJS <!doctype html> <html ng-app> <head> <title>Hello World</title> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter a name here"> <hr> <h1>Hello {{name}}!</h1> </div> <script src="http://code.angularjs.org/1.5.8/angular.min.js"></script> </body> </html>

8. Hello World with Angular 2 <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">   <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> </head> </html>

9. Hello World with Angular 2  <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head>  <body> <my-app>Loading...</my-app> </body> </html>

10. app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; platformBrowserDynamic().bootstrapModule(AppComponent);

11. app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }

12. Angular 2 QuickStart

13. Easiest ways to get started Angular 2 QuickStart https://github.com/angular/quickstart Angular 2 Seed https://github.com/mgechev/angular2-seed Angular CLI https://github.com/angular/angular-cli

17. Let’s take a look at a few things… Angular CLI TypeScript Components and Services IntelliJ IDEA Unit Tests Protractor Tests Continuous Integration

19. Angular CLI npm 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

20. TypeScript npm 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

21. Demo Time!

22. Learn more about Angular CLI https://www.youtube.com/watch?v=obbdFFbjLIU

23. Style Guides Angular 2 Oﬃcial Style Guide https://angular.io/styleguide John Papa’s AngularJS Style Guide https://github.com/johnpapa/angular-styleguide

24. ng-book 2 A 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!

25. When will Angular 2 be released?

26. Resources Demo Code https://github.com/mraible/ng2-demo Step-by-step Tutorial http://gist.asciidoctor.org/?github-mraible%2Fng2-demo%2F %2FREADME.adoc

27. Contact Me! raibledesigns.com @mraible linkedin.com/in/mraible Presentations slideshare.net/mraible Code github.com/mraible Questions?

Testing Angular 2 Applications - HTML5 Denver 2016

Testing Angular 2 Applications - HTML5 Denver 2016

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(17)

Similar to Testing Angular 2 Applications - HTML5 Denver 2016

Similar to Testing Angular 2 Applications - HTML5 Denver 2016(20)

More from Matt Raible

More from Matt Raible(20)

Recently uploaded

Recently uploaded(20)

Testing Angular 2 Applications - HTML5 Denver 2016