building a tv show with angular, bootstrap, and web services
TRANSCRIPT
![Page 1: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/1.jpg)
Building a TV Showwith Angular, Bootstrap, and Web Services
![Page 2: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/2.jpg)
David Giard• Senior Technical Evangelist, Microsoft• @DavidGiard• davidgiard.com• [email protected]• channel9.msdn.com/blogs/technology-and-friends
![Page 3: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/3.jpg)
Links• channel9.msdn.com/blogs/technology-and-friends • angular.io/ • github.com/DavidGiard/dgtv • tinyurl.com/dgtvslides
![Page 4: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/4.jpg)
Single Page Applications
![Page 5: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/5.jpg)
Traditional Web App
HTML Page
Click me!
Server
Request
Response
Thank you, David!
![Page 6: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/6.jpg)
Single Page App
HTML Page
Click me!
Server
Request
Response
Thank you, David!
{‘name’: ‘David’}
![Page 7: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/7.jpg)
Architecture
Web Service
Database
Web APIAngular 2TypeScriptBootStrap
SinglePageApp
Function Tool
Web Service Web API
Database SQL Server
Single Page Application Angular 2 & TypeScript
Styling Bootstrap
![Page 8: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/8.jpg)
Web API
![Page 9: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/9.jpg)
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/valuesHTTP Verb
GETPOSTPUT
DELETE
![Page 10: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/10.jpg)
Angular 2and
TypeScript
![Page 11: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/11.jpg)
Angular• SPA Framework• Open Source• Data Binding• Components• Modularize
![Page 12: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/12.jpg)
TypeScript• Open Source• Superset of JavaScript• Transpiles to JavaScript
![Page 13: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/13.jpg)
TypeScriptfoo.ts foo.js
Transpile
foo.map
![Page 14: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/14.jpg)
Transpile
![Page 15: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/15.jpg)
TypeScript Transpiling• Command Line: tsc or tsc -w• Grunt, Gulp, etc.• Visual Studio
![Page 16: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/16.jpg)
TypeScript Advantages• Productivity• Static Type Analysis• Language Tool Support• Better management of large codebases
![Page 17: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/17.jpg)
Type Checkingvar num1 = 5;var num2 = 10;…
num2=“Fish”;…
var sum = num1 + num2;
![Page 18: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/18.jpg)
Type Checkingvar num1: number = 5;var num2 : number = 10;…
num2=“Fish”;…
var sum: number = num1 + num2;
![Page 19: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/19.jpg)
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" ]}
![Page 20: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/20.jpg)
typings.json{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
}
}
![Page 21: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/21.jpg)
Angular 2
![Page 22: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/22.jpg)
Key Parts of Angular• Modules• Components• Templates• Directives• Services• Routing• Http
![Page 23: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/23.jpg)
Modules
![Page 24: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/24.jpg)
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
![Page 25: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/25.jpg)
Modulesimport {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
![Page 26: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/26.jpg)
Components
![Page 27: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/27.jpg)
Components• Class (properties & methods)• Decorated with @Component• Template• Selector• Imported references
![Page 28: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/28.jpg)
Templates and Selectors
![Page 29: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/29.jpg)
Templates and Selectorsimport {Component} from 'angular2/core';
@Component({ selector: 'my-app', template: '<h1>Hello World</h1>'})export class AppComponent { }
![Page 30: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/30.jpg)
Selector@Component({ selector: 'my-app', template: '<h1>Hello World</h1>'})export class AppComponent { }
<my-app>Loading...</my-app>
![Page 31: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/31.jpg)
Templates@Component({ selector: 'my-app', template: '<h1>Hello World</h1>'})export class AppComponent { }
<my-app>Loading...</my-app>
Output
Loading…
![Page 32: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/32.jpg)
Templates@Component({ selector: 'my-app', template: '<h1>Hello World</h1>'})export class AppComponent { }
<my-app>Loading...</my-app>
Output
Hello World
![Page 33: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/33.jpg)
Templates: Multi-Line<my-app>Loading...</my-app>
Output
Hello WorldWelcome
@Component({ selector: 'my-app', template: `
<h1>Hello World</h1><div>Welcome!</div>`
})export class AppComponent { }
![Page 34: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/34.jpg)
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 WorldWelcome
![Page 35: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/35.jpg)
@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
![Page 36: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/36.jpg)
Directives
![Page 37: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/37.jpg)
Directives• Allow you to attach behavior to DOM elements
![Page 38: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/38.jpg)
Directives• *ngFor• *ngIf• ngSwitch• ngClass• Custom Directives
![Page 39: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/39.jpg)
*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, DavidGates, BillBallmer, SteveNadella, Satya
![Page 40: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/40.jpg)
*ngIf• Syntax: *ngif="condition"• Removes element from DOM if condition is not “truthy”
![Page 41: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/41.jpg)
*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; }
}
ToggleCan you see me?
![Page 42: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/42.jpg)
*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; }
}
ToggleCan you see me?
![Page 43: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/43.jpg)
LifeCycle Hooks• OnInit• OnChanges• OnDestroy
![Page 44: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/44.jpg)
OnInit
export class foo implements OnInit {...ngOnInit(){...}
}
![Page 45: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/45.jpg)
Services
![Page 46: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/46.jpg)
Services• Class containing logic• Shared Code: Used by components or other services• Substitutable Objects• Dependency Injection
![Page 47: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/47.jpg)
Servicesimport { 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
![Page 48: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/48.jpg)
Servicesimport { 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) { }}
![Page 49: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/49.jpg)
Data Binding• Simple Binding• One-Way Property Binding• 2-Way Property Binding• Event Binding
![Page 50: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/50.jpg)
1-Way Data Binding• Square brackets around property• []
![Page 51: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/51.jpg)
1-Way Data Binding@Component({ selector: 'my-app', template: ‘<button [disabled]=" dataNotChanged">Save</button>’})export class AppComponent {
dataNotChanged= true;}
Save
![Page 52: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/52.jpg)
1-Way Data Binding@Component({ selector: 'my-app', template: ‘<button [disabled]=" dataNotChanged">Save</button>’})export class AppComponent {
dataNotChanged = true;}
Save
![Page 53: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/53.jpg)
1-Way Data Binding@Component({ selector: 'my-app', template: ‘<button [disabled]=" dataNotChanged">Save</button>’})export class AppComponent {
dataNotChanged = false;}
Save
![Page 54: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/54.jpg)
1-Way Data Binding• Double curly braces around data• {{}}
![Page 55: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/55.jpg)
1-Way Data Binding@Component({ selector: 'my-app', template: '<h1>Hello World</h1>'})export class AppComponent {
id=1;customerFirstName='David';customerLastName='Giard';
}
![Page 56: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/56.jpg)
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
![Page 57: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/57.jpg)
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;
}
![Page 58: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/58.jpg)
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 DetailsFirst: DavidLast: Giard
![Page 59: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/59.jpg)
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 DetailsDavid
Giard
First:
Last:
1-way data binding
![Page 60: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/60.jpg)
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:
![Page 61: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/61.jpg)
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:
![Page 62: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/62.jpg)
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:
![Page 63: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/63.jpg)
Events binding<control (eventname)="methodname(parameters)">
click event<control (click)="methodtocall(parameters)">
e.g.,<div (click)="onClick(customer)">
![Page 64: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/64.jpg)
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); }
}
![Page 65: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/65.jpg)
Routing
![Page 66: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/66.jpg)
Routing• Load components dynamically into page• Link via URL• Client-side• Step 1: Bootstrap array of routes
![Page 67: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/67.jpg)
Routingconst 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.tsBootstrap routes
User clicks “Foo” link
FooComponent loaded in router-outlet
![Page 68: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/68.jpg)
HTTP
![Page 69: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/69.jpg)
HTTP
import {Http } from '@angular/http';
...
this.http.get(webServiceUrl);
bootstrap(AppComponent, [HTTP_PROVIDERS,
]);
main.ts
Component
![Page 70: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/70.jpg)
Observables
![Page 71: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/71.jpg)
Observables
Observable<T>
Function
Subscribe
Data
![Page 72: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/72.jpg)
ObservablesgetEpisodes(): Observable<IEpisode[]> { return Observable.create((observer: Observer<any>) => { … observer.next(this.episodes); })}
this.episodeService.getEpisodes().subscribe((data) => {…
}
![Page 73: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/73.jpg)
More Architecture
![Page 74: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/74.jpg)
ModelIEpisodeid: numbertitle: stringdescription: stringdateRecorded: stringdateReleased?: stringlocation: stringvideoUrl: stringepisodeNumber: numberguests: string[]links?: ILink[]
ILinkurl: string;title: string;
guest
![Page 75: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/75.jpg)
ComponentsepisodeList.component
episode.component
episode.component
episode.component
episode.component
![Page 76: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/76.jpg)
Routingapp.component
<router-outlet></router-outlet>
…/episodeList…/episodeList/guest/John Smith…/episodeList/location/Chicago, IL
episodeList.component
episode.component
episode.component
episode.component
episode.component
![Page 77: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/77.jpg)
Routingapp.component
<router-outlet></router-outlet>
…/episodeDetails/425
episodeDetails.component
![Page 78: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/78.jpg)
Service
getEpisodes()
episodes: IEpisode[];allEpisodes: IEpisode[];
getEpisodes()
episodeList.component
episode.service
api/episode
Subscribes to
![Page 79: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/79.jpg)
DEMO
![Page 80: Building a TV show with Angular, Bootstrap, and Web Services](https://reader031.vdocument.in/reader031/viewer/2022030304/5878bb641a28ab724c8b77a1/html5/thumbnails/80.jpg)
Links• channel9.msdn.com/blogs/technology-and-friends • angular.io/ • github.com/DavidGiard/dgtv • tinyurl.com/dgtvslides