Angular Intro from Global Azure Bootcamp, 2017 in Linz

Angular Intro from Global Azure Bootcamp, 2017 in Linz

Transcript

1. Angular und Azure Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer ManfredSteyer
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
3. Inhalt • Motivation • Eine erste Komponente mit Angular • DEMO
4. Motivation Page ▪ 4
5. Plattformen und Usability HTML + JavaScript
6. Single Page Application (SPA) Page ▪ 6 Services HTML/ JavaScript-Client HTTP
7. Google Community v1: 1,2 Mio Entwickler Weltweit V2/4: 600K Entwickler
8. angular- connect, London Folie▪ 10
9. angular- connect, London Folie▪ 11
10. Was ist Angular? Page ▪ 12 SPA- Framework Performance Komponenten Modern Web Flexibler Renderer
11. TypeScript ES 6 Sprachen Page ▪ 13 ES 5 Kompilierung
12. Eine erste Komponente Page ▪ 14
13. 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 { [...] } }
14. 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
15. Anwendung == Kompontentenbaum Page ▪ 17 Root-Component
16. Anwendung == Kompontentenbaum Page ▪ 18 AppComponent FlugSuchen Component
17. AppComponent Page ▪ 19 @Component({ selector: 'flug-app', template: './app.component.html' }) export class AppComponent { }
18. AppComponent Page ▪ 20 <nav class="..."> <!-- Menü --> </nav> <div class="container"> <flug-suchen></flug-suchen> </div>
19. Projektstart
20. Projektstart mit Angular CLI
21. Material Design Light
22. DEMO Page ▪ 24
23. Tooling CLI: Scaffoling und Build Augury: Debugging Angular Language Service VS Code Snippets und Plugins
24. Zusammenfassung Weite Verbreitung TypeScript Komponenten Datenbindung Tooling
25. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer