Download as PDF, PPTX
Uploaded byMatt Raible
Testing Angular 2 Applications - HTML5 Denver 2016
The document discusses software testing methodologies with a focus on AngularJS and Angular 2 applications, including code snippets for setting up basic applications. It emphasizes the importance of quality in software development and provides links to essential resources for learning and using Angular. Additional information about tools, such as Angular CLI and TypeScript, along with sample applications and style guides, is also included.
More Related Content
Similar to Testing Angular 2 Applications - HTML5 Denver 2016
Testing Angular 2 Applications - HTML5 Denver 2016
- 1. Testing 2 Applications Photosby McGinity Photo Matt Raible • @mraible
- 2. Blogger on raibledesigns.com UIArchitect and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover
- 3. What about YOU? Howlong have you been doing web development? Do you like JavaScript? What’s your favorite JavaScript framework? Why are you here?
- 4. Quality “A person whoknows 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
- 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 withAngularJS <!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 withAngular 2 <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfills, for older browsers --> <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 withAngular 2 <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
- 10.
- 11.
- 12.
- 13. Easiest ways toget 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 alook 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 -gtypescript 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.
- 22. Learn more aboutAngular CLI https://www.youtube.com/watch?v=obbdFFbjLIU
- 23. Style Guides Angular 2Official Style Guide https://angular.io/styleguide John Papa’s AngularJS Style Guide https://github.com/johnpapa/angular-styleguide
- 24. ng-book 2 A comprehensiveguide 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 Angular2 be released?
- 26. Resources Demo Code https://github.com/mraible/ng2-demo Step-by-stepTutorial http://gist.asciidoctor.org/?github-mraible%2Fng2-demo%2F %2FREADME.adoc
- 27.