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
angular#3
Search
Danila Marchenkov
September 05, 2017
Education
0
37
angular#3
Danila Marchenkov
September 05, 2017
Tweet
Share
More Decks by Danila Marchenkov
See All by Danila Marchenkov
Rxjs
sprit3dan
0
91
angular6
sprit3dan
0
67
angular5
sprit3dan
0
48
angular#4
sprit3dan
0
150
angular#2
sprit3dan
0
32
Angular#1
sprit3dan
0
49
HTML 5 Canvas
sprit3dan
0
41
Angular #6
sprit3dan
0
63
Angular #5
sprit3dan
0
110
Other Decks in Education
See All in Education
AWS試験全冠したら新しい道が開けた話
nagisa53
3
1.1k
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
1.1k
Tips for the Presentation - Lecture 2 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
0
130
HyRead2324
cbtlibrary
0
120
Data Representation - Lecture 3 - Information Visualisation (4019538FNR)
signer
PRO
1
1.7k
心房細動週間ポスター(2024年3月6日)
japanstrokeassociation
0
250
自己紹介 / who-am-i
yasulab
2
3.1k
自由の森学園学校紹介資料
jiyunomori
0
1.5k
H5P-työkalut
matleenalaakso
3
32k
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
signer
PRO
1
1.7k
MonacaEducation導入手引き2024年第1版
asial_edu
0
140
合理的配慮を知るワークショップ/Understanding Reasonable Accommodations (Workshop)
freee
0
1.4k
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Side Projects
sachag
451
41k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Rails Girls Zürich Keynote
gr2m
91
13k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
A Tale of Four Properties
chriscoyier
150
22k
Agile that works and the tools we love
rasmusluckow
324
20k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Building an army of robots
kneath
300
41k
GraphQLとの向き合い方2022年版
quramy
31
12k
Typedesign – Prime Four
hannesfritz
36
2.1k
Transcript
Angular Marchenkov Danila, Software Developer
angularJS filters Pipes
Pipes Built-in Custom
import { Component } from '@angular/core'; @Component({ selector: 'hero-birthday', template:
`<p>The hero's birthday is {{ birthday | date }}</p>` }) export class HeroBirthdayComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 }
aPipe | bPipe | cPipe
best way to manipulate data to display
import { Pipe, PipeTransform } from '@angular/core'; /* * Raise
the value exponentially * Takes an exponent argument that defaults to 1. * Usage: * value | exponentialStrength:exponent * Example: * {{ 2 | exponentialStrength:10 }} * formats to: 1024 */ @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent: string): number { let exp = parseFloat(exponent); return Math.pow(value, isNaN(exp) ? 1 : exp); } }
Pure vs Inpure
Pure pipes Angular executes a pure pipe only when it
detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
Impure pipes Angular executes an impure pipe during every component
change detection cycle
import { Pipe, PipeTransform } from '@angular/core'; import { Http
} from '@angular/http'; @Pipe({ name: 'fetch', pure: false }) export class FetchJsonPipe implements PipeTransform { private cachedData: any = null; private cachedUrl = ''; constructor(private http: Http) { } transform(url: string): any { if (url !== this.cachedUrl) { this.cachedData = null; this.cachedUrl = url; this.http.get(url) .map( result => result.json() ) .subscribe( result => this.cachedData = result ); } return this.cachedData; } }