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

More Related Content

What's hot (20)

Viewers also liked (20)

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

More from David Giard (20)

Recently uploaded (20)

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

Editor's Notes