GETTING STARTED WITH
ANGULAR 2
UXDSummit
Feb 5, 2016
Jeremy Wilken
@gnomeontherun
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
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.
Slide 5
Slide 5 text
TYPESCRIPT IN A NUTSHELL
• Transpiler to compile down
to ES6/5/3.
• Adds strict typings to
variables.
• Only extends JavaScript
syntax.
ES6/TYPESCRIPT PRIMER
let name = 'Jeremy';
let template = `
Template by ${name}
I can write markup without escaping and
write on multiple lines!
`;
ES6 inline multiline template strings
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
ES6/TYPESCRIPT PRIMER
class Dashboard {
constructor(service) {
this.symbols = service.get();
}
reset() {
this.symbols = [];
}
}
ES6 classes
Slide 10
Slide 10 text
ES6/TYPESCRIPT PRIMER
import {service} from './service';
export class Dashboard {
constructor() {
this.symbols = service.get();
}
}
ES6 modules
Slide 11
Slide 11 text
ES6/TYPESCRIPT PRIMER
@Component({
selector: 'app'
})
export class App {
}
ES7 decorators
Slide 12
Slide 12 text
ES6/TYPESCRIPT PRIMER
interface StockInterface {
symbol: string,
lastTradePriceOnly: number,
change: number,
changeInPercent: number
}
let stocks: Array = [];
Typescript interfaces and type declarations
Slide 13
Slide 13 text
CODE TIME
https://github.com/gnomeontherun/
angular2-uxdsummit
Slide 14
Slide 14 text
THE BASE
Uses a node module lite-server as local server.
Files are transpiled with TypeScript.
Slide 15
Slide 15 text
Build & Server
Slide 16
Slide 16 text
THE APP COMPONENT
Creating the app component, and bootstrapping it
Slide 17
Slide 17 text
Build & Server
App Component
index.html
Slide 18
Slide 18 text
THE STOCK SERVICE
Creating a reusable service to manage stocks collection
Slide 19
Slide 19 text
Build & Server
App Component
index.html
Stock Service
Slide 20
Slide 20 text
THE SUMMARY COMPONENT
Using directives, types, and bindings
Slide 21
Slide 21 text
Build & Server
App Component
index.html
Stock Service
Summary Component
Slide 22
Slide 22 text
THE DASHBOARD
COMPONENT
Loading data, using services, and importing components.
Slide 23
Slide 23 text
Build & Server
App Component
index.html
Stock Service
Summary Component
Dashboard Component
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
THANK YOU!
Jeremy Wilken
@gnomeontherun
http://manning.com/books/angular-2-in-action