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
Getting Started with Angular 2 - UX Dev Summit ...
Search
Jeremy Wilken
February 13, 2016
Technology
0
180
Getting Started with Angular 2 - UX Dev Summit 2016
Get to know Angular 2 from a practical and full featured example!
Jeremy Wilken
February 13, 2016
Tweet
Share
More Decks by Jeremy Wilken
See All by Jeremy Wilken
Voice Activated UI - Devfest DC 2017
gnomeontherun
0
56
Voice Activated UI - ngconf 2017
gnomeontherun
0
280
Understanding Angular 1.5 Components
gnomeontherun
2
200
Angular 2 with TypeScript and ES6 - Fluent Conf 2016
gnomeontherun
2
150
Ionic, the Missing SDK
gnomeontherun
0
110
Angular 2, Building a Complete App With Typescript
gnomeontherun
1
240
Other Decks in Technology
See All in Technology
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
現場で役立つAPIデザイン
nagix
29
10k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
Building Products in the LLM Era
ymatsuwitter
10
4.4k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
KATA
mclloyd
29
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Become a Pro
speakerdeck
PRO
26
5.1k
A better future with KSS
kneath
238
17k
How GitHub (no longer) Works
holman
313
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
GETTING STARTED WITH ANGULAR 2 UXDSummit Feb 5, 2016 Jeremy
Wilken @gnomeontherun
INTRODUCTION Self Declared “Experience Engineer” at Teradata Lives in Austin,
TX Author of Ionic in Action, Angular 2 in Action Certified Beer Judge and Homebrewer
None
ES6 IN A NUTSHELL • New features: classes, modules, promises,
arrows, generators, and more. • Additive only, doesn’t remove existing features. • Most features can be transpiled to current ES5.
TYPESCRIPT IN A NUTSHELL • Transpiler to compile down to
ES6/5/3. • Adds strict typings to variables. • Only extends JavaScript syntax.
ES6/TYPESCRIPT PRIMER const stocks = ['AAPL', 'GOOG', 'FB', 'AMZN']; ES6
const keyword
ES6/TYPESCRIPT PRIMER let name = 'Jeremy'; let template = `
<h1>Template by ${name}</h1> <p>I can write markup without escaping and write on multiple lines!</p> `; ES6 inline multiline template strings
ES6/TYPESCRIPT PRIMER let stocks = ['aapl', 'goog', 'fb', 'amzn']; class
Dashboard { constructor() { stocks.forEach(stock => { this.add(stock.toUpperCase()); }); } add(stock) { this.stocks.push(stock); } } ES6 arrow functions
ES6/TYPESCRIPT PRIMER class Dashboard { constructor(service) { this.symbols = service.get();
} reset() { this.symbols = []; } } ES6 classes
ES6/TYPESCRIPT PRIMER import {service} from './service'; export class Dashboard {
constructor() { this.symbols = service.get(); } } ES6 modules
ES6/TYPESCRIPT PRIMER @Component({ selector: 'app' }) export class App {
} ES7 decorators
ES6/TYPESCRIPT PRIMER interface StockInterface { symbol: string, lastTradePriceOnly: number, change:
number, changeInPercent: number } let stocks: Array<StockInterface> = []; Typescript interfaces and type declarations
CODE TIME https://github.com/gnomeontherun/ angular2-uxdsummit
THE BASE Uses a node module lite-server as local server.
Files are transpiled with TypeScript.
Build & Server
THE APP COMPONENT Creating the app component, and bootstrapping it
Build & Server App Component index.html
THE STOCK SERVICE Creating a reusable service to manage stocks
collection
Build & Server App Component index.html Stock Service
THE SUMMARY COMPONENT Using directives, types, and bindings
Build & Server App Component index.html Stock Service Summary Component
THE DASHBOARD COMPONENT Loading data, using services, and importing components.
Build & Server App Component index.html Stock Service Summary Component
Dashboard Component
LET’S REVIEW Basic scaffolding to build and serve the app
App component is bootstraped to start rendering Services are used to load and manage data Simple components are nested to create larger features Pipes and directives manipulate rendered data
THANK YOU! Jeremy Wilken @gnomeontherun http://manning.com/books/angular-2-in-action