Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TDD Angular Workshop
Search
Pablo Villoslada Puigcerber
May 15, 2018
Programming
0
96
TDD Angular Workshop
Pablo Villoslada Puigcerber
May 15, 2018
Tweet
Share
More Decks by Pablo Villoslada Puigcerber
See All by Pablo Villoslada Puigcerber
Angular on Fire!
puigcerber
0
64
Introducción a Angular 2
puigcerber
0
64
Introduction to AngularJS
puigcerber
0
46
AngularJS en una hora
puigcerber
0
96
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
290
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
360
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
250
XP, Testing and ninja testing
m_seki
3
220
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
560
GraphRAGの仕組みまるわかり
tosuri13
8
510
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
270
Select API from Kotlin Coroutine
jmatsu
1
210
Create a website using Spatial Web
akkeylab
0
310
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Faster Mobile Websites
deanohume
307
31k
Designing for humans not robots
tammielis
253
25k
Fireside Chat
paigeccino
37
3.5k
Into the Great Unknown - MozCon
thekraken
39
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Optimizing for Happiness
mojombo
379
70k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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
${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>
Pipes
Built-in pipes {{ a }}<!-- 0.189 --> {{ a |
currency }}<!-- $0.19 --> {{ a | currency:’EUR' }}<!-- €0.19 --> {{ a | currency:’USD':'code' }}<!-- USD0.19 -->
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