1

Fit für die Zukunft: Modernes AngularJS 1.x1

Manfred Steyer

ManfredSteyer

Aktuelles Buch

Page 2

2

Inhalt

Intro

Überblick zu Angular 2

Überblick zu Migrationsmöglichkeiten

AngularJS 1.x mit TypeScript und ES6 (ES 2015)

Dekoratoren in TypeScript und ES7 (ES 2016)

Dekoratoren für AngularJS 1.x

Component Router für Angular 1.x und 2

Page 3

Didaktik

Kurze Präsentationen

Code-Beispiele

Page 4

3

ÜBERBLICK ZU ANGULAR 2

Page 5

Herausforderungen in Angular 1.x

Page 6

Performance Nachvollziehbarkeit $digest

Use-Case: Anwendungen

Zusammenspiel mit anderen Bibliotheken

4

Was ist Angular 2

Neuimplementierung

Performance

Komponenten (u. a. Web Components)

TypeScript/ ES 6 (ES 5 möglich)

Kompilierung nach ES 5

Modularisierung

Flexibles Rendering (auch: Web-Worker, Server)

Spielt besser mit anderen Bibliotheken zusammen

Page 7

Component Controller

Page 8

@Component({selector: 'flug-suchen'

})@View({

templateUrl: 'flug-suchen.html',directives: [NgFor, NgIf]

})export class FlugSuchen {

von: string;nach: string;fluege: Array<Flug>;

constructor(flugService: FlugService) { }

flugSuchen() { [...] }selectFlug(flug) { [...] }

}

Kann künftig großteils

entfallen

5

View

Page 9

<input [(ng-model)]="von">

[…]

<table [hidden]="fluege.length == 0">

<tr *ng-for="#flug of fluege">

<td>{{flug.id}}</td>

<td>{{flug.datum}}</td>

<td>{{flug.abflugOrt}}</td>

<td>{{flug.zielOrt}}</td>

<td><a href="#" (click)="selectFlug(flug)">Auswählen</a></td>

</tr>

</table>

View

Page 10

<input bindon-ng-model="von">

[…]

<table bind-hidden="fluege.length == 0">

<tr template="ng-for: 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>

6

MIGRATION

Page 11

Migration

Page 12

Angular 1.x

Angular 2

ng-upgrade

7

ng-upgrade

Parallelbetrieb über Component Router

Komponenten in Angular 1

Angular 2 mit Angular 1.x-Komponenten und vice versa

Angular-2-Dekoratoren für Angular 1

Automatische Upgrade-Tools, Guides und Best Practices

Page 13

[https://github.com/angular/ngUpgrade]

Auf Angular 2 heute schon vorbereiten

Modernes AngularJS 1.x schreiben

EcmaScript 6/ TypeScript

Controller-As

ES7-Dekoratoren

Component Router (sobald verfügbar)

Page 14