TDD Angular Workshop

Transcript

1. TDD Workshop Pablo Villoslada Puigcerber
2. https://speakerdeck.com/puigcerber https://github.com/Puigcerber/ tdd-angular-workshop
3. TypeScript
4. Static typed language function sayHello(name: string): string { return `Hello ${name}!`; } const person: object = {}; let age: number;
5. Class based programming class Angular { constructor() {} }
6. Decorators @Component({ selector: 'example-component', template: '<div>I am a component!</div>' }) class ExampleComponent { constructor() {} }
7. Components
8. Architecture <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <app-root></app-root> </body> </html>
9. Displaying data import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<h1>{{title}}</h1>' }) export class AppComponent { title = 'TDD Workshop'; }
10. Lifecycle hooks class Lifecycle implements OnInit, OnDestroy { ngOnInit() { console.log('on init'); } ngOnDestroy() { console.log('on destroy'); } }
11. Specs 1 to 4
12. Directives
13. Attribute directives <button type="button" class="btn" [ngClass]="{'btn-primary': true, 'btn-secondary': false}"> Send </button>
14. Structural directives <ul *ngIf="items"> <li *ngFor="let item of items; index as i"> {{ i }} - {{ item.name }} </li> </ul>
15. Pipes
16. Built-in pipes {{ a }}<!-- 0.189 --> {{ a | currency }}<!-- $0.19 --> {{ a | currency:’EUR' }}<!-- €0.19 --> {{ a | currency:’USD':'code' }}<!-- USD0.19 -->
17. Specs 5 to 8
18. Services
19. @Injectable() import { Injectable } from '@angular/core'; @Injectable({ providedIn: MyModule, }) export class InjectableService { }
20. Inject a service export class DIComponent { constructor(private http: HttpClient) { } ngOnInit() { this.http.get(''); } }
21. Observables
22. Subscribing const myObservable = Observable.of(1, 2, 3); myObservable.subscribe( x => console.log('Next value: ' + x), err => console.error('Error: ' + err), () => console.log('Complete!') );
23. RxJS Operators import { fromEvent } from 'rxjs'; import { filter, map, tap } from 'rxjs/operators'; const subscription = fromEvent(document, 'keypress') .pipe( tap(console.log), filter(e => e.key === 'a'), map(e => e.keyCode) ).subscribe(console.log);
24. Specs 9 to 16
25. Router
26. Configuration export const routes: Routes = [ { path: 'main', component: MainComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class AppRoutingModule { }
27. Router directives <nav> <a routerLink="/items">Items</a> <a [routerLink]="['items', '1']">Item 1</a> </nav> <router-outlet></router-outlet>
28. Activated route class RoutedComponent { constructor( private route: ActivatedRoute ) { const id = route.paramMap.pipe( map((params: ParamMap) => params.get(('id'))) ); } }
29. Specs 17 to 21
30. Component interaction
31. Dumb component @Component({ selector: 'btn-dumb', template: `<button (click)="onClick()">{{label}}</button>` }) export class DumbComponent{ @Input() label; @Output() dumb = new EventEmitter(); onClick() { this.dumb.emit('dumb'); } }
32. Smart component @Component({ selector: 'smart', template: ` <btn-dumb [label]="label" (dumb)="onDumb($event)"> </btn-dumb>` }) export class SmartComponent{ label = 'Click'; onDumb(event) { console.log(event); } }
33. Specs 22 to 29