Presentation on using Angular 2, TypeScript, BootStrap, and Web API to display metadata of online TV show.

1. Building a TV Show
with Angular, Bootstrap, and Web Services

2. David Giard
• Senior Technical Evangelist, Microsoft
• @DavidGiard
• davidgiard.com
• dgiard@Microsoft.com
• channel9.msdn.com/blogs/technology-and-friends

3. Links
• channel9.msdn.com/blogs/technology-and-friends
• angular.io/
• github.com/DavidGiard/dgtv
• tinyurl.com/dgtvslides

4. Single Page Applications

5. Traditional Web App
HTML Page
Click me!
Server
Request
Response
Thank you, David!

6. Single Page App
HTML Page
Click me!
Server
Request
Response
Thank you, David!
{‘
name’: ‘David’
}

7. Architecture
Web Service
Database
Web APIAngular 2
TypeScript
BootStrap
Single
Page
App
Function Tool
Web Service Web API
Database SQL Server
Single Page Application Angular 2 & TypeScript
Styling Bootstrap

8. Web API

9. Web API Routing
public class ValuesController : ApiController
{
public IEnumerable<string> Get() {…}
public string Get(int id) {…}
public void Post ([FromBody]string value) {… }
public void Put (int id, [FromBody]string value) {..}
public void Delete (int id) {…}
}
http://..../api/values
HTTP Verb
GET
POST
PUT
DELETE

10. Angular 2
and
TypeScript

11. Angular
• SPA Framework
• Open Source
• Data Binding
• Components
• Modularize

12. TypeScript
• Open Source
• Superset of JavaScript
• Transpiles to JavaScript

13. TypeScript
foo.ts foo.js
Transpile
foo.map

14. Transpile

15. TypeScript Transpiling
• Command Line: tsc or tsc -w
• Grunt, Gulp, etc.
• Visual Studio

16. TypeScript Advantages
• Productivity
• Static Type Analysis
• Language Tool Support
• Better management of large codebases

17. Type Checking
var num1 = 5;
var num2 = 10;
…
num2=“Fish”;
…
var sum = num1 + num2;

18. Type Checking
var num1: number = 5;
var num2 : number = 10;
…
num2=“Fish”;
…
var sum: number = num1 + num2;

19. tsconfig.json{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}

20. typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
}
}

21. Angular 2

22. Key Parts of Angular
• Modules
• Components
• Templates
• Directives
• Services
• Routing
• Http

23. Modules

24. Modules
• Built into Angular 2
• Makes it easier to split code into smaller pieces
• Import one module into another
• Export module to make it available for import

25. Modules
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>Hello World</h1>'
})
export class AppComponent { }
Available
outside this
module
Use exported
module
In this module

26. Components

27. Components
• Class (properties & methods)
• Decorated with @Component
• Template
• Selector
• Imported references

28. Templates and Selectors

29. Templates and Selectors
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>Hello World</h1>'
})
export class AppComponent { }

30. Selector
@Component({
selector: 'my-app',
template: '<h1>Hello World</h1>'
})
export class AppComponent { }
<my-app>Loading...</my-app>

31. Templates
@Component({
selector: 'my-app',
template: '<h1>Hello World</h1>'
})
export class AppComponent { }
<my-app>Loading...</my-app>
Output
Loading…

32. Templates
@Component({
selector: 'my-app',
template: '<h1>Hello World</h1>'
})
export class AppComponent { }
<my-app>Loading...</my-app>
Output
Hello World

33. Templates: Multi-Line
<my-app>Loading...</my-app>
Output
Hello World
Welcome
@Component({
selector: 'my-app',
template: `
<h1>Hello World</h1>
<div>
Welcome!
</div>
`
})
export class AppComponent { }

34. Templates: External file
@Component({
selector: 'my-app',
templateurl: 'myApp.html'
})
export class AppComponent { }
<my-app>Loading...</my-app>
Output
<h1>Hello World</h1>
<div>
Welcome!
</div>
myApp.html
Hello World
Welcome

35. @Component({
selector: 'my-app',
templateurl: 'myApp.html'
})
export class AppComponent { }
Bootstrapping
<my-app>Loading...</my-app>
<script>
…
System.import('app')
</script>
import {AppComponent}
from './app.component';
bootstrap(AppComponent);
Main.ts
= bootstrap file

36. Directives

37. Directives
• Allow you to attach behavior to DOM elements

38. Directives
• *ngFor
• *ngIf
• ngSwitch
• ngClass
• Custom Directives

39. *ngfor
<div *ngFor="#cust of customers">
{{cust.lastName}}, {{cust.firstName}}
</div>
var customers: Customer[] = [
{ "id": 1, "firstName": "David", "lastName" : "Giard" },
{ "id": 2, "firstName": "Bill", "lastName": "Gates" },
{ "id": 3, "firstName": "Steve", "lastName": "Ballmer" },
{ "id": 4, "firstName": "Satya", "lastName": "Nadella" }
];
Giard, David
Gates, Bill
Ballmer, Steve
Nadella, Satya

40. *ngIf
• Syntax: *ngif="condition"
• Removes element from DOM if condition is not “truthy”

41. *ngIf
<div>
<button (click)="clicked()">Toggle</button>
<div *ngIf="show">
Can you see me?
</div>
</div>
export class AppComponent {
show: boolean = true;
clicked() {this.show = !this.show; }
}
Toggle
Can you see me?

42. *ngIf
<div>
<button (click)="clicked()">Toggle</button>
<div *ngIf="show">
Can you see me?
</div>
</div>
export class AppComponent {
show: boolean = true;
clicked() {this.show = !this.show; }
}
Toggle
Can you see me?

43. LifeCycle Hooks
• OnInit
• OnChanges
• OnDestroy

44. OnInit
export class foo implements OnInit {
...
ngOnInit(){
...
}
}

45. Services

46. Services
• Class containing logic
• Shared Code: Used by components or other services
• Substitutable Objects
• Dependency Injection

47. Services
import { Injectable } from '@angular/core';
@Injectable()
export class CustService {
getCustomers() {
return customers;
}
}
var customers: Customer[] = [
{ "id": 1, "firstname": "David", "lastname": "Giard" },
{ "id": 2, "firstname": "Bill", "lastname": "Gates" },
{ "id": 3, "firstname": "Steve", "lastname": "Ballmer" },
{ "id": 4, "firstname": "Satya", "lastname": "Nadella" }
];
CustomerService.ts

48. Services
import { Injectable } from '@angular/core';
@Injectable()
export class CustService {
getCustomers() {
return customers;
}
}
…
CustomerService.ts
import { OnInit } from '@angular/core';
import {CustService} from CustomerService
export class AppComponent implements OnInit {
ngOnInit() {
this.customers = this.customerService.getCustomers();
}
constructor(private customerService:CustService) { }
}

49. Data Binding
• Simple Binding
• One-Way Property Binding
• 2-Way Property Binding
• Event Binding

50. 1-Way Data Binding
• Square brackets around property
• []

51. 1-Way Data Binding
@Component({
selector: 'my-app',
template: ‘<button [disabled]=" dataNotChanged">Save</button>’
})
export class AppComponent {
dataNotChanged= true;
}
Save

52. 1-Way Data Binding
@Component({
selector: 'my-app',
template: ‘<button [disabled]=" dataNotChanged">Save</button>’
})
export class AppComponent {
dataNotChanged = true;
}
Save

53. 1-Way Data Binding
@Component({
selector: 'my-app',
template: ‘<button [disabled]=" dataNotChanged">Save</button>’
})
export class AppComponent {
dataNotChanged = false;
}
Save

54. 1-Way Data Binding
• Double curly braces around data
• {{}}

55. 1-Way Data Binding
@Component({
selector: 'my-app',
template: '<h1>Hello World</h1>'
})
export class AppComponent {
id=1;
customerFirstName='David';
customerLastName='Giard';
}

56. 1-Way Data Binding
@Component({
selector: 'my-app',
template: '<h1>Hello {{customerFirstName}}</h1>'
})
export class AppComponent {
id=1;
customerFirstName='David';
customerLastName='Giard';
}
1-Way
Data Binding
Hello David

57. 1-Way Data Binding
@Component({
selector: 'my-app',
template: '<h1>Hello {{customer.FirstName}}</h1>'
})
export class AppComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
export class Customer{
FirstName: string;
LastName: string;
}

58. 1-Way Data Binding
@Component({
selector: 'my-app',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: {{customer.FirstName}}</div>
<div>Last: {{customer.LastName}}
`
})
export class AppComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
David Details
First: David
Last: Giard

59. 2-Way Data Binding
@Component({
selector: 'my-app',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: <input [(ngModel)]="customer.FirstName" </div>
<div>Last: <input [(ngModel)]="customer.LastName" </div>
`
})
export class AppComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
2-way data binding
David Details
David
Giard
First:
Last:
1-way data binding

60. 2-Way Data Binding
@Component({
selector: 'my-app',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: <input [(ngModel)]="customer.LastName" </div>
<div>Last: <input [(ngModel)]="customer.FirstName" </div>
`
})
export class AppComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
D Details
D
Giard
First:
Last:

61. 2-Way Data Binding
@Component({
selector: 'my-app',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: <input [(ngModel)]="customer.LastName" </div>
<div>Last: <input [(ngModel)]="customer.FirstName" </div>
`
})
export class AppComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
Da Details
Da
Giard
First:
Last:

62. 2-Way Data Binding
@Component({
selector: 'my-app',
template: `
<h1>{{customer.FirstName}} Details</h1>
<div>First: <input [(ngModel)]="customer.LastName" </div>
<div>Last: <input [(ngModel)]="customer.FirstName" </div>
`
})
export class AppComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
}
Dan Details
Dan
Giard
First:
Last:

63. Events binding
<control (eventname)="methodname(parameters)">
click event
<control (click)="methodtocall(parameters)">
e.g.,
<div (click)="onClick(customer)">

64. click
@Component({
selector: 'my-app',
template: `
<h1 (click)="onClick (customer)">{{customer.FirstName}} Details</h1>
<div>First: <input [(ngModel)]="customer.LastName" </div>
<div>Last: <input [(ngModel)]="customer.FirstName" </div>
`
})
export class AppComponent {
id=1;
customer: Customer = {
FirstName='David';
LastName='Giard';
}
onClick(cust: Customer) { alert ("You Selected " + customer.FirstName); }
}

65. Routing

66. Routing
• Load components dynamically into page
• Link via URL
• Client-side
• Step 1: Bootstrap array of routes

67. Routing
const routes: RouterConfig = [
{
path: 'foo',
component: FooComponent
},
{
path: 'bar',
component: BarComponent
},
];
export const appRouterProviders = [
provideRouter(routes)
];
import { appRouterProviders } from './app.routes';
bootstrap(
AppComponent, [
appRouterProviders
]);
<a [routerLink]="[/foo']">Foo</a>
<a [routerLink]="[/bar']">Bar</a>
<router-outlet></router-outlet>
app.routes.ts
main.ts
Bootstrap routes
User clicks “Foo” link

68. HTTP

69. HTTP
import {Http } from '@angular/http';
...
this.http.get(webServiceUrl);
bootstrap(AppComponent, [
HTTP_PROVIDERS,
]);
main.ts
Component

70. Observables

71. Observables
Observable<T>
Function
Subscribe
Data

72. Observables
getEpisodes(): Observable<IEpisode[]> {
return Observable.create((observer: Observer<any>) => {
…
observer.next(this.episodes);
})
}
this.episodeService.getEpisodes().subscribe((data) => {
…
}

73. More Architecture

74. Model
IEpisode
id: number
title: string
description: string
dateRecorded: string
dateReleased?: string
location: string
videoUrl: string
episodeNumber: number
guests: string[]
links?: ILink[]
ILink
url: string;
title: string;
guest

75. Components
episodeList.component
episode.component
episode.component
episode.component
episode.component

76. Routing
app.component
<router-outlet></router-outlet>
…/episodeList
…/episodeList/guest/John Smith
…/episodeList/location/Chicago, IL
episodeList.component
episode.component
episode.component
episode.component
episode.component

77. Routing
app.component
<router-outlet></router-outlet>
…/episodeDetails/425
episodeDetails.component

78. Service
getEpisodes()
episodes: IEpisode[];
allEpisodes: IEpisode[];
getEpisodes()
episodeList.component
episode.service
api/episode
Subscribes to

79. DEMO

80. Links
• channel9.msdn.com/blogs/technology-and-friends
• angular.io/
• github.com/DavidGiard/dgtv
• tinyurl.com/dgtvslides