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
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
RailsGirls IZUMO スポンサーLT
16bitidol
0
120
WindowInsetsだってテストしたい
ryunen344
1
210
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
670
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
270
エンジニア向け採用ピッチ資料
inusan
0
180
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
550
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
童醫院敏捷轉型的實踐經驗
cclai999
0
210
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Done Done
chrislema
184
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
KATA
mclloyd
30
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
The World Runs on Bad Software
bkeepers
PRO
69
11k
What's in a price? How to price your products and services
michaelherold
246
12k
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