Download - Moderne Web-Anwendungen mit Angular 2
![Page 1: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/1.jpg)
1
Moderne Web-Anwendungen mit Angular 2
Manfred Steyer
ManfredSteyer
Buch-Projekt
Page 2
![Page 2: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/2.jpg)
2
Ziel
Überblick über den Stand der Dinge in Angular 2
Beispiel mit Visual Studio Code
Folie 3
ANGULARJS
Page 4
![Page 3: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/3.jpg)
3
Angular 1
1.1 MillionDevelopers
Angular 1
Page 6
Community Verbreitung
Eco-System
![Page 4: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/4.jpg)
4
angular-connect, Herbst 2015, London
Folie 7
angular-connect, Herbst 2015, London
Folie 8
![Page 5: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/5.jpg)
5
Plattformen und Usability
HTML + JavaScript
Single Page Application
ANGULAR 2
Page 10
![Page 6: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/6.jpg)
6
Fokus
Folie 11
Performance Mobile
Komponenten Modern Web
ROADMAP
Page 12
![Page 7: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/7.jpg)
7
Roadmap
41 Alpha-Versionen
Seit Dezember: BETA
Kern: Stabil
Moving Parts: Jenseits des Kerns
Aktuelle BETA: Beta 9
Arbeiten an Release Candidate gestartet
Finale Version: Mai 2016
Folie 13
KOMPONENTEN IN ANGULAR 2
Page 14
![Page 8: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/8.jpg)
8
Component Controller
Page 15
@Component({selector: 'flug-suchen',templateUrl: 'flug-suchen.html',directives: [NgFor, NgIf]
})export class FlugSuchen {
von: string;nach: string;fluege: Array<Flug>;
constructor(flugService: FlugService) { }
flugSuchen() { [...] }selectFlug(flug) { [...] }
}
Bindings
Page 16
<input [(ngModel)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ngFor="#flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.von}}</td>
<td>{{flug.zu}}</td>
<td><a href="#" (click)="selectFlight(flug)">Select</a></td>
</tr>
</table>
![Page 9: Moderne Web-Anwendungen mit Angular 2](https://reader036.vdokument.com/reader036/viewer/2022081909/589f0d181a28ab226b8b59c1/html5/thumbnails/9.jpg)
9
View
Page 17
<input bindon-ngModel="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ngFor: var flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" on-click="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>
DEMO
Page 18