Was bringt Angular 2?
11
1 Was bringt AngularJS 2.0? Manfred Steyer ManfredSteyer Über mich … Manfred Steyer Trainer & Berater Angular & ASP.NET Page 2
-
Upload
manfred-steyer -
Category
Internet
-
view
325 -
download
0
Transcript of Was bringt Angular 2?
1
Was bringt AngularJS 2.0?
Manfred Steyer
ManfredSteyer
Über mich …
Manfred Steyer
Trainer & Berater
Angular & ASP.NET
Page 2
2
Ziel
Überblick über Angular 2
Beispiel mit Visual Studio Code
Ausblick: Angular 2 und ASP.NET
Folie 3
MOTIVATION
Page 4
3
Plattformen und Usability
HTML + JavaScript
Single Page Application
High-Level Architektur
Page 6
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)
4
Angular 1
Page 10
Community Verbreitung
Eco-System
Angular 1
1.1 MillionDevelopers
5
angular-connect, Herbst 2015, London
Folie 12
angular-connect, Herbst 2015, London
Folie 13
6
ANGULAR 2
Page 14
Fokus
Folie 15
Performance Mobile
Komponenten Modern Web
7
KOMPONENTEN IN ANGULAR 2
Page 16
Component Controller
Page 17
@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) { [...] }
}
8
Bindings
Page 18
<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>
View
Page 19
<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>
9
DEMO
Page 20
ANGULAR & ASP.NET ?
Page 21
10
Angedachte Möglichkeiten
[Metadaten aus Models für Formulare und
Validierung]
Serverseitiges Rendering
10 x Startup-Performance
SEO
Reichweite
Folie 22
DEMO
Page 23
