Moderne Web-Anwendungen mit Angular 2
-
Upload
manfred-steyer -
Category
Software
-
view
283 -
download
0
Transcript of Moderne Web-Anwendungen mit Angular 2
1
Moderne Web-Anwendungen mit Angular 2
Manfred Steyer
ManfredSteyer
Buch-Projekt
Page 2
2
Ziel
Überblick über den Stand der Dinge in Angular 2
Beispiel mit Visual Studio Code
Folie 3
ANGULARJS
Page 4
3
Angular 1
1.1 MillionDevelopers
Angular 1
Page 6
Community Verbreitung
Eco-System
4
angular-connect, Herbst 2015, London
Folie 7
angular-connect, Herbst 2015, London
Folie 8
5
Plattformen und Usability
HTML + JavaScript
Single Page Application
ANGULAR 2
Page 10
6
Fokus
Folie 11
Performance Mobile
Komponenten Modern Web
ROADMAP
Page 12
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
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>
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