The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
•
1 like•346 views
This document contains a presentation on Angular by Matt Raible. It begins with an introduction of Matt Raible and his background. It then covers various topics related to Angular including getting started, authentication standards, jobs data, Google Trends data, building Hello World apps in AngularJS and Angular, choices in Angular 2+, ES6/TypeScript, components, forms, data architectures, style guides, projects, testing, and authentication. It includes code samples and encourages learning by doing labs and projects.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
Similar to The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017 (20)
More from Matt Raible
More from Matt Raible (20)
Recently uploaded
Recently uploaded (20)
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
- 1. #DevoxxUK Getting Started with Matt Raible • @mraible
- 2. Blogger on raibledesigns.com Java Champion and Web Developer Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
- 6. #DevoxxUK Jobs on LinkedIn (US) April 2017 0 2,000 4,000 6,000 8,000 Backbone AngularJS Ember Knockout React Vue
- 7. #DevoxxUK Jobs on LinkedIn (US) April 2017 0 3,500 7,000 10,500 14,000 Backbone Angular Ember Knockout React Vue
- 8. #DevoxxUK Stack Overflow Tags April 2017 0 75,000 150,000 225,000 300,000 Backbone Angular Knockout Ember React
- 9. #DevoxxUK Google Trends - Angular
- 10. #DevoxxUK Google Trends - Angular 2
- 11. #DevoxxUK Google Trends - Angular 4
- 13. Who wants to learn ?
- 14. #DevoxxUK 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>
- 16. #DevoxxUK Hello World with Angular <!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- Polyfill(s) 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/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> </body> </html>
- 17. #DevoxxUK app/main.ts import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
- 18. #DevoxxUK app/app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
- 19. #DevoxxUK app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
- 20. #DevoxxUK Angular 2+ Choices Choose a language JavaScript (ES6 or ES5) TypeScript Dart Anything that transpiles to JS Setup dev environment Install Node Choose Package Manager Choose Module Loader Choose Transpiler Choose Build Tool
- 21. #DevoxxUK ES6, ES7 and TypeScript ES5: es5.github.io ES6: git.io/es6features ES7: bit.ly/es7features TS: www.typescriptlang.org TSES7ES6ES5
- 22. #DevoxxUK 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
- 23. #DevoxxUK bus.ts
- 24. #DevoxxUK Get Started with Angular Angular QuickStart https://angular.io/docs/ts/latest/quickstart.html Angular Seed https://github.com/mgechev/angular-seed Angular Seed Advanced https://github.com/NathanWalker/angular-seed-advanced
- 26. #DevoxxUK Angular Demo! Start with angular-cli Build Search Feature Data via HTTP Form Validation CSS Frameworks
- 27. #DevoxxUK Built-in Components <div *ngIf="str == 'yes'"></div> <div [ngSwitch]="myVar"> <div *ngSwitchWhen="'A'"></div> </div> <div [ngStyle]="{color: colorinput.value}"></div> <div [ngClass]="{bordered: true}"></div> <div *ngFor="let item of items; let num = index"></div>
- 28. #DevoxxUK The asterisk (*) effect https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asteris <div *ngIf="hero">{{hero}}</div> <div *ngFor="let hero of heroes">{{hero}}</div>
- 29. #DevoxxUK The asterisk (*) effect <!-- Examples (A) and (B) are the same --> <!-- (A) *ngIf paragraph --> <p *ngIf="condition"> Our heroes are true! </p> <!-- (B) [ngIf] with template --> <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>
- 30. #DevoxxUK Angular Forms Template-Driven import { FormsModule } from '@angular/forms'; Reactive Forms import { ReactiveFormsModule } from '@angular/forms';
- 31. #DevoxxUK Template-Driven Validation <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
- 32. #DevoxxUK Reactive Forms Validation <form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()"> <label for="name">Name</label> <input type="text" id="name" class="form-control" formControlName="name" required > <div *ngIf="formErrors.name" class="alert alert-danger"> {{ formErrors.name }} </div> </form>
- 33. #DevoxxUK Data Architectures MVW / Two-way binding Flux Observables
- 34. #DevoxxUK Observables and RxJS Promises emit a single value whereas streams emit many values Imperative code “pulls” data whereas reactive streams “push” data RxJS is functional Streams are composable
- 35. #DevoxxUK Style Guides John Papa’s Angular Style Guide https://github.com/johnpapa/angular-styleguide Official Angular Style Guide https://angular.io/styleguide
- 36. #DevoxxUK Cool Projects Web Workers and Service Workers Electron ng-bootstrap Angular Material JHipster, baby!
- 37. #DevoxxUK Lab: Create an Angular Project Create a project Run the application Add a search feature Add an edit feature Add validation http://bit.ly/ng-create
- 39. #DevoxxUK 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
- 40. #DevoxxUK 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!
- 41. #DevoxxUK Types of Tests Unit Tests End-to-End Tests
- 44. #DevoxxUK Live Coding! Unit Tests Integration Tests Continuous Integration Deployment Continuous Deployment
- 45. #DevoxxUK What you learned How to… Build an Angular application with modern tools Unit test Angular services, mocking Http provider Unit test Angular components, mocking service Integration test an Angular application Continuously test and deploy with a CI server
- 46. #DevoxxUK Don’t be afraid of testing!
- 47. #DevoxxUK Don’t be afraid of testing!
- 48. #DevoxxUK Don’t be afraid of testing!
- 49. #DevoxxUK Lab: Test an Angular Project Unit testing Integration testing Continous Integration Deploy to the ☁! http://bit.ly/ng-test
- 50. #DevoxxUK 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!
- 51. #DevoxxUK ng-book 2 A comprehensive guide to developing with Angular 4 Worth all your hard earned $$$ https://www.ng-book.com/2 “Thank you for the awesome book, it's the bible for Angular.” — Vijay Ganta
- 52. #DevoxxUK Testing Angular Applications Book Unit testing directives, pipes, services, and routes End-to-end testing with elements and forms 5 of 10 chapters available Estimated publication: Fall 2017 www.manning.com/books/testing-angular-applications
- 54. #DevoxxUK Who’s using Angular? Made with AngularJS https://www.madewithangular.com Angular Expo http://angularexpo.com Awesome Angular https://github.com/AngularClass/awesome-angular
- 55. #DevoxxUK Angular Performance Checklist Network performance Bundling Minification and Dead code elimination Ahead-of-Time (AoT) Compilation Compression Pre-fetching Resources Lazy-Loading of Resources Caching https://github.com/mgechev/angular-performance-checklist
- 56. #DevoxxUK Lab: Authentication with OpenID Connect http://developer.okta.com http://bit.ly/ng-okta youtube.com/watch?v=Kb56GzQ2pSk
- 58. #DevoxxUK Shortcut to becoming an Angular Expert JUST DO IT.
- 59. #DevoxxUK Shortcut to becoming an Angular Expert YOU DID IT!
- 60. #DevoxxUK The JHipster Mini-Book 2.0 Release on Dec 5, 2016 jhipster-book.com 21-points.com @jhipster_book Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book