Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Intro from Global Azure Bootcamp, 2017 ...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

Angular Intro from Global Azure Bootcamp, 2017 in Linz

Angular Intro from Global Azure Bootcamp, 2017 in Linz

Avatar for Manfred Steyer

Manfred Steyer PRO

April 22, 2017
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  2. Komponente als TypeScript-Klasse Page ▪ 15 @Component({ selector: 'flug-suchen', templateUrl:

    './flug-suchen.html' }) export class FlugSuchenComponent { von: string; nach: string; fluege: Array<Flug>; constructor(http: Http) { } search(): void { [...] } select(flug: Flug): void { [...] } }
  3. Template Page ▪ 16 <input [(ngModel)]="von"> <input [(ngModel)]="nach"> <button [disabled]="!von

    || !nach" (click)="search()"> Search </button> <table> <tr *ngFor="let flug of fluege"> <td>{{flug.id}}</td> <td>{{flug.datum}}</td> <td>{{flug.von}}</td> <td>{{flug.nach}}</td> </tr> </table> Two-Way-Binding Event-Binding Property-Binding Template
  4. AppComponent Page ▪ 20 <nav class="..."> <!-- Menü --> </nav>

    <div class="container"> <flug-suchen></flug-suchen> </div>