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

10

[mail] manfred.steyer@SOFTWAREarchitekt.at

[web] SOFTWAREarchitekt.at

[twitter] ManfredSteyer

Contact