TDD Angular Workshop

TDD Workshop Pablo Villoslada Puigcerber

https://speakerdeck.com/puigcerber https://github.com/Puigcerber/ tdd-angular-workshop

TypeScript

Static typed language function sayHello(name: string): string { return `Hello
${name}!`; } const person: object = {}; let age: number;

Class based programming class Angular { constructor() {} }

Decorators @Component({ selector: 'example-component', template: '<div>I am a component!</div>' })
class ExampleComponent { constructor() {} }

Components

Architecture <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>
<body> <app-root></app-root> </body> </html>

Displaying data import { Component } from '@angular/core'; @Component({ selector:
'app-root', template: '<h1>{{title}}</h1>' }) export class AppComponent { title = 'TDD Workshop'; }

Lifecycle hooks class Lifecycle implements OnInit, OnDestroy { ngOnInit() {
console.log('on init'); } ngOnDestroy() { console.log('on destroy'); } }

Specs 1 to 4

Directives

Attribute directives <button type="button" class="btn" [ngClass]="{'btn-primary': true, 'btn-secondary': false}"> Send
</button>

Structural directives <ul *ngIf="items"> <li *ngFor="let item of items; index
as i"> {{ i }} - {{ item.name }} </li> </ul>

Built-in pipes {{ a }} {{ a |
currency }} {{ a | currency:’EUR' }} {{ a | currency:’USD':'code' }}

Specs 5 to 8

Services

@Injectable() import { Injectable } from '@angular/core'; @Injectable({ providedIn: MyModule,
}) export class InjectableService { }

Inject a service export class DIComponent { constructor(private http: HttpClient)
{ } ngOnInit() { this.http.get(''); } }

Observables

Subscribing const myObservable = Observable.of(1, 2, 3); myObservable.subscribe( x =>
console.log('Next value: ' + x), err => console.error('Error: ' + err), () => console.log('Complete!') );

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);

Specs 9 to 16

Router

Configuration export const routes: Routes = [ { path: 'main',
component: MainComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class AppRoutingModule { }

Router directives <nav> <a routerLink="/items">Items</a> <a [routerLink]="['items', '1']">Item 1</a> </nav>
<router-outlet></router-outlet>

Activated route class RoutedComponent { constructor( private route: ActivatedRoute )
{ const id = route.paramMap.pipe( map((params: ParamMap) => params.get(('id'))) ); } }

Specs 17 to 21

Component interaction

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'); } }

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); } }

Specs 22 to 29

TDD Angular Workshop

TDD Angular Workshop

Pablo Villoslada Puigcerber

More Decks by Pablo Villoslada Puigcerber

Other Decks in Programming

Featured

Transcript

TDD Workshop Pablo Villoslada Puigcerber

https://speakerdeck.com/puigcerber https://github.com/Puigcerber/ tdd-angular-workshop

TypeScript

Static typed language function sayHello(name: string): string { return `Hello

Class based programming class Angular { constructor() {} }

Decorators @Component({ selector: 'example-component', template: '<div>I am a component!</div>' })

Components

Architecture <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

Displaying data import { Component } from '@angular/core'; @Component({ selector:

Lifecycle hooks class Lifecycle implements OnInit, OnDestroy { ngOnInit() {

Specs 1 to 4

Directives

Attribute directives <button type="button" class="btn" [ngClass]="{'btn-primary': true, 'btn-secondary': false}"> Send

Structural directives <ul ngIf="items"> <li ngFor="let item of items; index

Pipes

Built-in pipes {{ a }} {{ a |

Specs 5 to 8

Services

@Injectable() import { Injectable } from '@angular/core'; @Injectable({ providedIn: MyModule,

Inject a service export class DIComponent { constructor(private http: HttpClient)

Observables

Subscribing const myObservable = Observable.of(1, 2, 3); myObservable.subscribe( x =>

RxJS Operators import { fromEvent } from 'rxjs'; import {

Specs 9 to 16

Router

Configuration export const routes: Routes = [ { path: 'main',

Router directives <nav> <a routerLink="/items">Items</a> <a [routerLink]="['items', '1']">Item 1</a> </nav>

Activated route class RoutedComponent { constructor( private route: ActivatedRoute )

Specs 17 to 21

Component interaction

Dumb component @Component({ selector: 'btn-dumb', template: `<button (click)="onClick()">{{label}}</button>` }) export

Smart component @Component({ selector: 'smart', template: ` <btn-dumb [label]="label" (dumb)="onDumb($event)">

Specs 22 to 29