ANGULAR 2
Building a complete app
using TypeScript
Jeremy Wilken
@gnomeontherun
Slide 2
Slide 2 text
HI, I’M JEREMY
Dev at Teradata
Live in Austin, TX
Started using Angular during 0.9
Wrote Ionic in Action
Working on Angular 2 book
Brews a lot of good beer
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.
Slide 6
Slide 6 text
ES6/TYPESCRIPT PRIMER
let
stocks
=
['AAPL',
'GOOG',
'FB',
'AMZN'];
ES6 let keyword
Slide 7
Slide 7 text
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
ES6/TYPESCRIPT PRIMER
///
Typescript reference type definitions
Slide 14
Slide 14 text
ANGULAR 2 IN ACTION
https://github.com/angular-in-action/hello-world
Remember, Angular 2 is in flux. That said, the concepts and
general approaches are pretty solid.
Slide 15
Slide 15 text
THE BASE
Gulp build with a local server
Could use JSPM or Webpack or ___.
Slide 16
Slide 16 text
THE APP COMPONENT
Creating the app component, and bootstrapping it
Slide 17
Slide 17 text
THE STOCK SERVICE
Creating a reusable service to manage stocks collection
Slide 18
Slide 18 text
THE SUMMARY COMPONENT
Using directives, types, and bindings
Slide 19
Slide 19 text
THE DASHBOARD
COMPONENT
Loading data, using services, and importing components.
Slide 20
Slide 20 text
THE MANAGE COMPONENT
Forms and events
Slide 21
Slide 21 text
THE ROUTER
Setup and configure routes based on components