Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

404 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Building a TV Show with Angular, Bootstrap, and Web Services
  2. 2. David Giard • Senior Technical Evangelist, Microsoft • @DavidGiard • davidgiard.com • dgiard@Microsoft.com • channel9.msdn.com/blogs/technology-and-friends
  3. 3. Links • channel9.msdn.com/blogs/technology-and-friends • angular.io/ • github.com/DavidGiard/dgtv • tinyurl.com/dgtvslides
  4. 4. Single Page Applications
  5. 5. Traditional Web App HTML Page Click me! Server Request Response Thank you, David!
  6. 6. Single Page App HTML Page Click me! Server Request Response Thank you, David! {‘ name’: ‘David’ }
  7. 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. 8. Web API
  9. 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. 10. Angular 2 and TypeScript
  11. 11. Angular • SPA Framework • Open Source • Data Binding • Components • Modularize
  12. 12. TypeScript • Open Source • Superset of JavaScript • Transpiles to JavaScript
  13. 13. TypeScript foo.ts foo.js Transpile foo.map
  14. 14. Transpile
  15. 15. TypeScript Transpiling • Command Line: tsc or tsc -w • Grunt, Gulp, etc. • Visual Studio
  16. 16. TypeScript Advantages • Productivity • Static Type Analysis • Language Tool Support • Better management of large codebases
  17. 17. Type Checking var num1 = 5; var num2 = 10; … num2=“Fish”; … var sum = num1 + num2;
  18. 18. Type Checking var num1: number = 5; var num2 : number = 10; … num2=“Fish”; … var sum: number = num1 + num2;
  19. 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. 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. 21. Angular 2
  22. 22. Key Parts of Angular • Modules • Components • Templates • Directives • Services • Routing • Http
  23. 23. Modules
  24. 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. 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. 26. Components
  27. 27. Components • Class (properties & methods) • Decorated with @Component • Template • Selector • Imported references
  28. 28. Templates and Selectors
  29. 29. Templates and Selectors import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>Hello World</h1>' }) export class AppComponent { }
  30. 30. Selector @Component({ selector: 'my-app', template: '<h1>Hello World</h1>' }) export class AppComponent { } <my-app>Loading...</my-app>
  31. 31. Templates @Component({ selector: 'my-app', template: '<h1>Hello World</h1>' }) export class AppComponent { } <my-app>Loading...</my-app> Output Loading…
  32. 32. Templates @Component({ selector: 'my-app', template: '<h1>Hello World</h1>' }) export class AppComponent { } <my-app>Loading...</my-app> Output Hello World
  33. 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. 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. 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. 36. Directives
  37. 37. Directives • Allow you to attach behavior to DOM elements
  38. 38. Directives • *ngFor • *ngIf • ngSwitch • ngClass • Custom Directives
  39. 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. 40. *ngIf • Syntax: *ngif="condition" • Removes element from DOM if condition is not “truthy”
  41. 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. 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. 43. LifeCycle Hooks • OnInit • OnChanges • OnDestroy
  44. 44. OnInit export class foo implements OnInit { ... ngOnInit(){ ... } }
  45. 45. Services
  46. 46. Services • Class containing logic • Shared Code: Used by components or other services • Substitutable Objects • Dependency Injection
  47. 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. 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. 49. Data Binding • Simple Binding • One-Way Property Binding • 2-Way Property Binding • Event Binding
  50. 50. 1-Way Data Binding • Square brackets around property • []
  51. 51. 1-Way Data Binding @Component({ selector: 'my-app', template: ‘<button [disabled]=" dataNotChanged">Save</button>’ }) export class AppComponent { dataNotChanged= true; } Save
  52. 52. 1-Way Data Binding @Component({ selector: 'my-app', template: ‘<button [disabled]=" dataNotChanged">Save</button>’ }) export class AppComponent { dataNotChanged = true; } Save
  53. 53. 1-Way Data Binding @Component({ selector: 'my-app', template: ‘<button [disabled]=" dataNotChanged">Save</button>’ }) export class AppComponent { dataNotChanged = false; } Save
  54. 54. 1-Way Data Binding • Double curly braces around data • {{}}
  55. 55. 1-Way Data Binding @Component({ selector: 'my-app', template: '<h1>Hello World</h1>' }) export class AppComponent { id=1; customerFirstName='David'; customerLastName='Giard'; }
  56. 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. 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. 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. 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. 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. 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. 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. 63. Events binding <control (eventname)="methodname(parameters)"> click event <control (click)="methodtocall(parameters)"> e.g., <div (click)="onClick(customer)">
  64. 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. 65. Routing
  66. 66. Routing • Load components dynamically into page • Link via URL • Client-side • Step 1: Bootstrap array of routes
  67. 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. 68. HTTP
  69. 69. HTTP import {Http } from '@angular/http'; ... this.http.get(webServiceUrl); bootstrap(AppComponent, [ HTTP_PROVIDERS, ]); main.ts Component
  70. 70. Observables
  71. 71. Observables Observable<T> Function Subscribe Data
  72. 72. Observables getEpisodes(): Observable<IEpisode[]> { return Observable.create((observer: Observer<any>) => { … observer.next(this.episodes); }) } this.episodeService.getEpisodes().subscribe((data) => { … }
  73. 73. More Architecture
  74. 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. 75. Components episodeList.component episode.component episode.component episode.component episode.component
  76. 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. 77. Routing app.component <router-outlet></router-outlet> …/episodeDetails/425 episodeDetails.component
  78. 78. Service getEpisodes() episodes: IEpisode[]; allEpisodes: IEpisode[]; getEpisodes() episodeList.component episode.service api/episode Subscribes to
  79. 79. DEMO
  80. 80. Links • channel9.msdn.com/blogs/technology-and-friends • angular.io/ • github.com/DavidGiard/dgtv • tinyurl.com/dgtvslides

×