SlideShare ist ein Scribd-Unternehmen logo
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

Weitere ähnliche Inhalte

Andere mochten auch

OOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDC
OOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDCOOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDC
OOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDC
Manfred Steyer
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changes
Manfred Steyer
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
Manfred Steyer
 
Angular 2: Routing
Angular 2: RoutingAngular 2: Routing
Angular 2: Routing
Manfred Steyer
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_script
Manfred Steyer
 
Entity Framework 7: New features and changes
Entity Framework 7:New features and changesEntity Framework 7:New features and changes
Entity Framework 7: New features and changes
Manfred Steyer
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")
Manfred Steyer
 
Modern angular 03_es7_decoratoren
Modern angular 03_es7_decoratorenModern angular 03_es7_decoratoren
Modern angular 03_es7_decoratoren
Manfred Steyer
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
Manfred Steyer
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
Manfred Steyer
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
 
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Manfred Steyer
 

Andere mochten auch (13)

OOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDC
OOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDCOOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDC
OOP 2016: Moderne Security Szenarien mit OAuth 2 und OIDC
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changes
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Angular 2: Routing
Angular 2: RoutingAngular 2: Routing
Angular 2: Routing
 
Modern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_scriptModern angular 02_angular_mit_type_script
Modern angular 02_angular_mit_type_script
 
Entity Framework 7: New features and changes
Entity Framework 7:New features and changesEntity Framework 7:New features and changes
Entity Framework 7: New features and changes
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")
 
Modern angular 03_es7_decoratoren
Modern angular 03_es7_decoratorenModern angular 03_es7_decoratoren
Modern angular 03_es7_decoratoren
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
 

Ähnlich wie Modern anuglar 01_intro

.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
Manfred Steyer
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
Manfred Steyer
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
Manfred Steyer
 
JavaMagazin - AngularJS
JavaMagazin - AngularJSJavaMagazin - AngularJS
JavaMagazin - AngularJS
Philipp Burgmer
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
Manfred Steyer
 
Angular 2 Components
Angular 2 ComponentsAngular 2 Components
Angular 2 Components
Manfred Steyer
 
Angular 2: Custom Components
Angular 2: Custom ComponentsAngular 2: Custom Components
Angular 2: Custom Components
Manfred Steyer
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
Manfred Steyer
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
Philipp Burgmer
 
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-AnwendungenAngular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Manfred Steyer
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
Jens Binfet
 
Ist ADO.NET EntityFramework das bessere LINQ?
Ist ADO.NET EntityFramework das bessere LINQ?Ist ADO.NET EntityFramework das bessere LINQ?
Ist ADO.NET EntityFramework das bessere LINQ?
.NET User Group Dresden
 
Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015
Manfred Steyer
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
🙌 Christoph Häckel
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
Angelo Maron
 
iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...
iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...
iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...
Lukas Eder
 
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Manfred Steyer
 
Webpack
WebpackWebpack
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
Manfred Steyer
 

Ähnlich wie Modern anuglar 01_intro (20)

.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
JavaMagazin - AngularJS
JavaMagazin - AngularJSJavaMagazin - AngularJS
JavaMagazin - AngularJS
 
Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
 
Angular 2 Components
Angular 2 ComponentsAngular 2 Components
Angular 2 Components
 
Angular 2: Custom Components
Angular 2: Custom ComponentsAngular 2: Custom Components
Angular 2: Custom Components
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
 
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-AnwendungenAngular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
Angular 2.0: Architektur und Konzepte für moderne JavaScript-Anwendungen
 
Progressive Web Apps mit Angular
Progressive Web Apps mit AngularProgressive Web Apps mit Angular
Progressive Web Apps mit Angular
 
Ist ADO.NET EntityFramework das bessere LINQ?
Ist ADO.NET EntityFramework das bessere LINQ?Ist ADO.NET EntityFramework das bessere LINQ?
Ist ADO.NET EntityFramework das bessere LINQ?
 
Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015
 
3. Night of the pack
3. Night of the pack3. Night of the pack
3. Night of the pack
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
 
iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...
iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...
iJUG Java Aktuell [Februar 2015] Lukas Eder - jOOQ - ein alternativer Weg mit...
 
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
 
Webpack
WebpackWebpack
Webpack
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
 

Mehr von Manfred Steyer

Der neue Component Router für Angular 2
Der neue Component Router für Angular 2Der neue Component Router für Angular 2
Der neue Component Router für Angular 2
Manfred Steyer
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
Manfred Steyer
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Manfred Steyer
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Manfred Steyer
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2
Manfred Steyer
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
Manfred Steyer
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
Manfred Steyer
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
Manfred Steyer
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
Manfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
Manfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
Manfred Steyer
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
Manfred Steyer
 

Mehr von Manfred Steyer (12)

Der neue Component Router für Angular 2
Der neue Component Router für Angular 2Der neue Component Router für Angular 2
Der neue Component Router für Angular 2
 
Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
 

Modern anuglar 01_intro

  • 1. 1 Fit für die Zukunft: Modernes AngularJS 1.x1 Manfred Steyer ManfredSteyer Aktuelles Buch Page  2
  • 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. 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. 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. 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. 6 MIGRATION Page  11 Migration Page  12 Angular 1.x Angular 2 ng-upgrade
  • 7. 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