Angular 2, Building a Complete App With Typescript

Presented for Angular Remote Conf

What you’ll get is a whirlwind tour of an example Angular 2 app. You’ll get to see how many of the Angular 2 concepts can be wired together for a resulting app and how TypeScript and ES6 features are used to enhance the programming experience and app quality.

Transcript

1. ANGULAR 2 Building a complete app using TypeScript Jeremy Wilken @gnomeontherun
2. 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
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 let  stocks  =  ['AAPL',  'GOOG',  'FB',  'AMZN']; ES6 let 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. ES6/TYPESCRIPT PRIMER ///  <reference  path="../typings/tsd.d.ts"  /> Typescript reference type definitions
14. 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.
15. THE BASE Gulp build with a local server Could use JSPM or Webpack or ___.
16. THE APP COMPONENT Creating the app component, and bootstrapping it
17. THE STOCK SERVICE Creating a reusable service to manage stocks collection
18. THE SUMMARY COMPONENT Using directives, types, and bindings
19. THE DASHBOARD COMPONENT Loading data, using services, and importing components.
20. THE MANAGE COMPONENT Forms and events
21. THE ROUTER Setup and configure routes based on components
22. SHOW ME THE CODE