Getting Started with Angular 2 - UX Dev Summit 2016

Get to know Angular 2 from a practical and full featured example!

Transcript

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