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
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
High Performance PHP
cmuench
0
140
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Building an army of robots
kneath
302
45k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
It's Worth the Effort
3n
184
28k
A Tale of Four Properties
chriscoyier
158
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Statistics for Hackers
jakevdp
797
220k
4 Signs Your Business is Dying
shpigford
182
22k
Music & Morning Musume
bryan
46
6.3k
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