Building a TV show with Angular, Bootstrap, and Web Services

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

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

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

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

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

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

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

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

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

TypeScript
foo.ts foo.js
Transpile
foo.map

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

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

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

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

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"
]
}

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

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

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

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

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

Templates and Selectors
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
})

Selector
@Component({
selector: 'my-app',
})
<my-app>Loading...</my-app>

Templates
@Component({
selector: 'my-app',
})
Output
Loading…

Templates
@Component({
selector: 'my-app',
})
Output
Hello World

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

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

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

Directives
• Allow you to attach behavior to DOM elements

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

*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

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

*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?

LifeCycle Hooks
• OnInit
• OnChanges
• OnDestroy

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

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

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

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) { }
}

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

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

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

1-Way Data Binding
@Component({
selector: 'my-app',
})
dataNotChanged = true;
}
Save

1-Way Data Binding
@Component({
selector: 'my-app',
})
dataNotChanged = false;
}
Save

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

1-Way Data Binding
@Component({
selector: 'my-app',
})
id=1;
customerFirstName='David';
customerLastName='Giard';
}

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

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

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

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

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

2-Way Data Binding
@Component({
selector: 'my-app',
template: `
`
})
id=1;
FirstName='David';
LastName='Giard';
}
}
Da Details
Da
Giard
First:
Last:

2-Way Data Binding
@Component({
selector: 'my-app',
template: `
`
})
id=1;
FirstName='David';
LastName='Giard';
}
}
Dan Details
Dan
Giard
First:
Last:

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

click
@Component({
selector: 'my-app',
template: `
<h1 (click)="onClick (customer)">{{customer.FirstName}} Details</h1>
`
})
id=1;
FirstName='David';
LastName='Giard';
}
onClick(cust: Customer) { alert ("You Selected " + customer.FirstName); }
}

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

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

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

Observables
Observable<T>
Function
Subscribe
Data

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

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

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

Routing
app.component
…/episodeList
…/episodeList/guest/John Smith
…/episodeList/location/Chicago, IL
episode.component
episode.component
episode.component
episode.component

Routing
app.component
…/episodeDetails/425
episodeDetails.component

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

Building a TV show with Angular, Bootstrap, and Web Services

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Building a TV show with Angular, Bootstrap, and Web Services

Similar to Building a TV show with Angular, Bootstrap, and Web Services (20)

More from David Giard

More from David Giard (20)

Recently uploaded

Recently uploaded (20)

Building a TV show with Angular, Bootstrap, and Web Services

Editor's Notes