![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>](https://image.slidesharecdn.com/steyerangular2-160416200948/85/Moderne-Web-Anwendungen-mit-Angular-2-8-320.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](https://image.slidesharecdn.com/steyerangular2-160416200948/85/Moderne-Web-Anwendungen-mit-Angular-2-9-320.jpg)
![10
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Contact](https://image.slidesharecdn.com/steyerangular2-160416200948/85/Moderne-Web-Anwendungen-mit-Angular-2-10-320.jpg)
Moderne Web-Anwendungen mit Angular 2
- 1. 1 Moderne Web-Anwendungen mit Angular 2 Manfred Steyer ManfredSteyer Buch-Projekt Page 2
- 2. 2 Ziel Überblick über den Stand der Dinge in Angular 2 Beispiel mit Visual Studio Code Folie 3 ANGULARJS Page 4
- 3. 3 Angular 1 1.1 Million Developers Angular 1 Page 6 Community Verbreitung Eco- System
- 4. 4 angular-connect, Herbst 2015, London Folie 7 angular-connect, Herbst 2015, London Folie 8
- 5. 5 Plattformen und Usability HTML + JavaScript Single Page Application ANGULAR 2 Page 10
- 6. 6 Fokus Folie 11 Performance Mobile Komponenten Modern Web ROADMAP Page 12
- 7. 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. 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. 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
- 10. 10 [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Contact