Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Angular 2 Workshop Oktober 2015

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
1
Angular 2.0: Moderne Anwendungen für
das Web von morgen und Migrationspfade
Manfred Steyer
ManfredSteyer
Aktuelles Buch
...
2
Ziel
Angular 2.0 und zugrundeliegende Konzepte
anhand eines Beispielprojektes kennen lernen
Page  4
Didaktik
Kurze Pr...
3
Inhalt
 Motivation
 Überblick zu Angular 2
 DEMO
 Binding und Forms-Handling
 DEMO
 Routing
 DEMO
 Komponenten
...
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Angular 2 Slides
Angular 2 Slides
Wird geladen in …3
×

Hier ansehen

1 von 31 Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Angular 2 Workshop Oktober 2015 (20)

Weitere von Manfred Steyer (20)

Anzeige

Aktuellste (20)

Angular 2 Workshop Oktober 2015

  1. 1. 1 Angular 2.0: Moderne Anwendungen für das Web von morgen und Migrationspfade Manfred Steyer ManfredSteyer Aktuelles Buch Folie 2 O'Reilly: AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript Steyer, Softic
  2. 2. 2 Ziel Angular 2.0 und zugrundeliegende Konzepte anhand eines Beispielprojektes kennen lernen Page  4 Didaktik Kurze Präsentationen Live-Coding Fragen: Gerne jederzeit! Page  5
  3. 3. 3 Inhalt  Motivation  Überblick zu Angular 2  DEMO  Binding und Forms-Handling  DEMO  Routing  DEMO  Komponenten  DEMO  Migration  Fazit MOTIVATION Page  7
  4. 4. 4 Plattformen und Usability HTML + JavaScript Single Page Application Page  15 HTML + JavaScript + jQuery => Komplexität
  5. 5. 5 Page  16 Frameworks machen SPA beherrschbar AngularJS Page  17 Community Verbreitung Eco- System
  6. 6. 6 HERAUSFORDERUNGEN IN ANGULARJS 1.X Page  36 Herausforderungen in AngularJS 1.x Page  37 Performance Nachvollziehbarkeit Änderungsverfolgung Use-Case: Anwendungen Zusammenspiel mit anderen Bibliotheken
  7. 7. 7 ANGULAR 2 Page  38 Was ist Angular 2  Neuimplementierung  Performance  Komponenten (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  39
  8. 8. 8 Component Controller Page  40 @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 View Page  41 <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>
  9. 9. 9 View Page  42 <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> DEMO: ERSTE SCHRITTE Page  45
  10. 10. 10 BINDINGS NÄHER BETRACHTET Page  46 Architektur-Ziele von Angular 2 Page  47 Performance Komponenten Vorhersagbarkeit
  11. 11. 11 Data-Binding in Angular 1.x Page  48 Model Model Directive Komponenten-Baum in Angular 2 Page  49 Komponente für App Komponente (z. B. Liste) Komponente (z. B. Eintrag) Komponente (z. B. Eintrag)
  12. 12. 12 Regeln für Property-Bindings  Eine Komponente hängt nur von ihren eigenen Daten (und indirekt von denen des Parents) ab  Eine Komponente hängt nicht von Daten ihrer Kinder ab!  Abhängigkeits-Graph ist ein Baum  Angular benötigt nur einen Digest um Baum mit GUI abzugleichen Page  51 Property-Binding Page  52 model item item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
  13. 13. 13 Weitere Performance-Verbesserungen Page  54 Immutable Data Observables Event-Bindings (One-Way, Bottom/Up) Page  56 {{ item.title }} {{ item.title }} Event-Handler Event-Handler
  14. 14. 14 Event-Bindings (One-Way, Bottom/Up) Kein Digest um Events zu versenden Aber: Events können Daten ändern  Property Binding Page  57 Property- und Event-Bindings Page  59 Property-Binding ausführen Event-Handler ausführen Ereignis tritt ein App ist bereit Alle Handler ausgeführt Properties gebunden
  15. 15. 15 Recap Property-Binding: One-Way; Top/Down Event-Binding: One-Way; Bottom/Up Two-Way-Binding? Two-Way = Property-Binding + Event-Binding Page  64 Property- und Event-Bindings kombinieren Page  65 <input [ng-model]="from" (ng-model)="updateFrom($event)"> updateFrom(newValue) { this.from = newValue; }
  16. 16. 16 Property- und Event-Bindings kombinieren Page  66 <input [ng-model]="from" (ng-model)="from = $event"> Syntax-Zucker für 2-Way-Binding Page  67 <input [(ng-model)]="from"> <input bindon-ng-model="from">
  17. 17. 17 Types of Binding Page  68 <input [(ng-model)]="from"> […] <table [hidden]="flights.length == 0"> <tr *ng-for="#flight of flights"> <td>{{flight.id}}</td> <td>{{flight.date}}</td> <td>{{flight.from}}</td> <td>{{flight.to}}</td> <td><a href="#" (click)="selectFlight(flight)">Select</a></td> </tr> </table> DEMO: USING NG-MODEL Page  69
  18. 18. 18 HANDLING FORMS Page  71 Ansätze in Angular 2 • ng-model • Wie in AngularJS 1.x • Angular erzeugt „Forms-Controller“ Deklerativ • Anwendung erzeugt „Forms- Controller“ • Mehr Kontrolle Imperativ • Angular generiert Formular für Datenmodell • Noch nicht implementiert Daten- getrieben
  19. 19. 19 Deklerative Formulare Page  73 export class FlightList { constructor(flightService: FlightService) { […] this.filter = { from: 'Graz', to: 'Hamburg' }; […] } } View Page  74 <form #f="form"> <input type="text" ng-control="from" [(ng-model)]="filter.from" required> <div *ng-if="!f.controls.from.valid"> …Error… </div> <div *ng-if="f.controls.from.hasError('required')"> …Error… </div> […] </form> FormDirective f ControlGroup form Control from
  20. 20. 20 DEMO Page  75 Imperative Formulare export class FlightList { filter: ControlGroup; constructor(flightService: FlightService, fb: FormBuilder) { […] this.filter = fb.group({ from: ['Graz', Validators.required], to: ['Hamburg', Validators.required] }); […] } searchFlights() { var filter = this.filter.value; […] } }
  21. 21. 21 Imperative Formulare Page  77 <form [ng-form-model]="filter"> <input id="from" ng-control="from" type="text"> <div *ng-if="!filter.controls.from.valid">…Error…</div> […] </form> ROUTING Page  78
  22. 22. 22 Motivation  SPAs bestehen aus einer Seite  Innerhalb dieser werden Bereiche ein- und ausgeblendet --> "Logische Seiten"  Herausforderungen:  URL-Parameter und Bookmarks  Back-Button  Eigene Datei pro logischer Seite --> Übersicht Page  79 Routing unter AngularJS  Logische Seiten erhalten eine URL, z. B:  /FlugDemo#flugbuchen/passagier  /FlugDemo#flugbuchen/flug  Logische Seiten erhalten URL-Parameter, z. B.:  /FlugDemo#flugbuchen/passagier/5 Page  80
  23. 23. 23 Routing unter AngularJS  SPA erhält Platzhalter  Je nach URL wird in diesen Platzhalter ein Template geladen  #flugbuchen/passagier --> passagier.html  #flugbuchen/flug --> flug.html  Templates sind i.d.R. eigene Dateien  Werden bei Bedarf nachgeladen  Können auch in SPA inkludiert werden Page  81 Routen (Zustände) Routen sind Kombination aus u. a.: Url (mit/ohne Platzhalter) Template Controller Page  82
  24. 24. 24 Routing unter AngularJS Page  83 Logo + Menü Menü2 Fußzeile SPA Platzhalter Routing unter AngularJS Page  84 Logo + Menü Menü2 Fußzeile SPA Passagier.html /FlugDemo#flugbuchen/passagier
  25. 25. 25 COMPONENT ROUTER Page  85 Provider ROUTER_PROVIDERS provide(LocationStrategy, {useClass: HashLocationStrategy}) Page  86
  26. 26. 26 AppComponent Page  87 @Component({ selector: 'app' }) @View({ directives: [ROUTER_DIRECTIVES], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, as: 'Home' }, { path: '/flug-suchen', component: FlugSuchen, as: 'FlugSuchen' } ]) export class App { } View von AppComponent Page  88 <a [router-link]="['/Home']">Home</a> <div> <router-outlet></router-outlet> </div>
  27. 27. 27 ROUTEN MIT PARAMETER Page  89 Routen mit Parameter Page  90 @Component({ selector: 'app' }) @View({ directives: [ROUTER_DIRECTIVES], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, as: 'Home' }, { path: '/flug-suchen', component: FlugSuchen, as: 'FlugSuchen' }, { path: '/flug-edit/:id', component: FlugEdit, as: 'FlugEdit' } ]) export class App { }
  28. 28. 28 Links auf Routen mit Parameter Page  91 <a [router-link]="['/FlugEdit', {id: flug.id}]">Edit</a> Route-Parameter auslesen Page  92 @Component({}) @View({ templateUrl: 'app/components/flug-edit/flug-edit.html' }) export class FlugEdit { id; constructor(params: RouteParams) { this.id = params.get('id'); this.info = 'Flug: #' + this.id; } }
  29. 29. 29 MIGRATION Page  114 Migration Page  116 Angular 1.x Angular 2
  30. 30. 30 Möglichkeiten  Component Router: Parallelbetrieb  Angular 1.5: Komponenten in Angular 1  NgUpgrade: Angular 2 und Angular 1.x mixen  NgForward: AngularJS 1.x im Angular-2-Stil  Sinnvoll: Vorbereitung durch Einsatz von modernen AngularJS 1.x-Code vorbereiten: EcmaScript 6, TypeScript, Dekoratoren, Controller-As Page  117 [https://github.com/angular/ngUpgrade] Fazit  Angular: SPA-Framework mit großer Verbreitung  Angular 2 ist Neuimplementierung mit Fokus auf Performance, Komponenten und modernen Standards  Parallelbetrieb, u. a. mit neuem Router  Vorbereitung durch modernen Angular 1.x-Code, Neuer Component Router, ES 6/ TypeScript Page  123
  31. 31. 31 [mail] manfred.steyer@softwarearchitekt.at [blog] www.softwarearchitekt.at [twitter] ManfredSteyer Kontakt www.software-engineering-leadership.de

×