Post on 15-Apr-2017
TypeScriptAngular2.0Declarative ComponentsDeclarative TemplatesModules and More
Bill WagnerC# MVPMicrosoft Regional DirectorC# ECMA Standardization Committee.NET Foundation Advisory CouncilAuthor, Trainer, Consultant
Why Angular?• Create SPA applications
quickly• Consistent Architecture• Community Support• Developer Resources Angul
ar
Data Binding
Testability
Resources
Directives
Productivity
Lots of Features
Why TypeScript?• More Productivity• Static Type Analysis• Language Tool Support• Manage Large Codebases
Better TypeScript
Productivity
Type Safety
Static Tooling
Transpiles to
JavaScript
Why Angular + TypeScript• Angular 2.0 built using
TypeScript• TypeScript => ECMAScript 6• ECMAScript 6 is latest
standard
• All Moving Targets• Expected (?) Q1 2016
The Futur
e
Angular 2.0
TypeScript 2.0
EcmaScript 6
Today’s MissionBuild an Angular Application in TypeScript
Highlight Language Advantages
Step 1: What Happened Before
Step 2: Create the application (TypeScript)import { bootstrap, Component } from 'angular2/angular2'; @Component({ selector: 'deadbase-app', template: '<h1>This is loaded from TypeScript</h1>'})class DeadBaseAppComponent {} bootstrap(DeadBaseAppComponent);
Step 3: Create Index.html<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>First TypeScript sample</title> <script src="https://code.angularjs.org/tools/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script> <script> System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true } }); System.import('./app/deadbase.ts'); </script></head><body> <deadbase-app>Loading....</deadbase-app></body></html>
Server Side BuildsCompile TypeScript as part of the build processInstall dependencies in the development environment
Deadbase EditorDisplay a showDateVenue
Step 4: One-way Data Binding@Component({ selector: 'deadbase-app', template: '<h1>{{title}}</h1><h2>{{venue}} Details!</h2>'})class DeadBaseAppComponent { public title = "Deadbase - Grateful Dead Concert Archive"; public venue = "Filmore West";}
Step 5: Create ConcertSet Classclass ConcertSet { date: Date; venue: string; set: number;}
public concert: ConcertSet = { date: new Date(1971, 7, 2), venue: "Filmore West", set: 2}
Step 6: Update the template, include ``
@Component({ selector: 'deadbase-app', template: ` <h1>{{title}}</h1> <h2>{{concert.date.toDateString()}} -- {{concert.venue}} Details!</h2> <div><label>date: </label>{{concert.date.toDateString()}}</div> <div><label>venue: </label>{{concert.venue}}</div> <div><label>set: </label>{{concert.set}}</div> `})
Step 7: Edit, after some iterationsimport { bootstrap, Component, FORM_DIRECTIVES } from 'angular2/angular2'; class ConcertSet { date: string; venue: string; set: number;}
Step 7: Edit, after some iterations@Component({ selector: 'deadbase-app', template: ` <h1>{{title}}</h1> <h2>{{concert.date}} -- {{concert.venue}} Details!</h2> <div><label>date: </label> <input [(ng-model)]="concert.date" type="date"></div> <div><label>venue: </label> <input [(ng-model)]="concert.venue" placeholder="venue"></div> <div><label>set: </label> <input [(ng-model)]="concert.set" type="number"></div> `, directives: [FORM_DIRECTIVES]})
Step 7: Edit, after some iterationsclass DeadBaseAppComponent { public title = "Deadbase - Grateful Dead Concert Archive"; public concert: ConcertSet = { date: "1971-07-02", venue: "Filmore West", set: 2 }}
Master / DetailThe Dead played lots of showsThis is a *really* small sampling
Step 8: Build a Listimport { bootstrap, Component, FORM_DIRECTIVES, NgFor } from 'angular2/angular2'; @Component({ selector: 'deadbase-app', template: ` <h1>{{title}}</h1> <h2>My Tape List</h2> <ul class="concerts"> <li *ng-for="#concert of concerts"> <span class="badge">{{concert.date}}</span> {{concert.venue}} {{concert.set}} </li> </ul> <h2>{{concert.date}} -- {{concert.venue}} Details!</h2> <div><label>date: </label><input [(ng-model)]="concert.date" type="date"></div> <div><label>venue: </label><input [(ng-model)]="concert.venue" placeholder="venue"></div> <div><label>set: </label><input [(ng-model)]="concert.set" type="number"></div> `, directives: [FORM_DIRECTIVES, NgFor],
Step 9: Styles in the Templatestyles: [` .concerts {list-style-type: none; margin-left: 1em; padding: 0; width: 30em;} .concerts li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; } .concerts li:hover {color: #369; background-color: #EEE; left: .2em;} .concerts .badge { font-size: small; color: white; padding: 0.1em 0.7em; background-color: #369; line-height: 1em; position: relative; left: -1px; top: -1px; } .selected { background-color: #EEE; color: #369; }`]
Build Edit in PlaceSelect, and Edit Current Concert
Step 6a: Build a Directive factory/// <reference path="../scripts/typings/angularjs/angular.d.ts" /> module LabelApplication { class ContentEditable implements ng.IDirective { static factory(): ng.IDirectiveFactory { return () => new ContentEditable(); } } LabelEditor .editorModule .directive('contenteditable', ContentEditable.factory());};
Build Edit in PlaceBuilding Directives and factories
Step 10: Update List Item Template<li *ng-for="#concert of concerts" (click)="onselect(concert)" [ng-class] = "getSelectedClass(concert)"> <span class="badge">{{concert.date}}</span> {{concert.venue}} {{concert.set}}</li>
Step 11: Implement Handlerspublic selectedConcert: ConcertSet; onselect(concert: ConcertSet) { this.selectedConcert = concert;} getSelectedClass(concert: ConcertSet) { return { selected: concert == this.selectedConcert };}
Step 12: Implement Details View<div *ng-if="selectedConcert"> <h2>{{selectedConcert.date}} -- {{selectedConcert.venue}} Details!</h2> <div><label>date: </label> <input [(ng-model)]="selectedConcert.date" type="date"> </div> <div><label>venue: </label> <input [(ng-model)]="selectedConcert.venue" placeholder="venue"> </div> <div><label>set: </label> <input [(ng-model)]="selectedConcert.set" type="number"> </div></div>
Keys to ProductivityReview and Discussion
Key TypeScript Features for Productivity• Compilation step: Find syntax and type system errors• Avoid “Stringly Typed APIs”• Intellisense• Scoped Modules• “Private” implementation details• Compatible with JavaScript idioms
TypeScript Resources• http://www.typescriptlang.org• http://www.typescriptlang.org/Handbook• https://github.com/Microsoft/TypeScript • https://
github.com/Microsoft/TypeScript/blob/master/doc/spec.md
• http://www.typescriptlang.org/Playground
Bill Wagnerbill@thebillwagner.com@billwagnerhttp://thebillwagner.com
https://github.com/BillWagner/TypeScriptAngular2/
ArchitectureSoftware Engineering PracticesDeveloper Training and Mentoring