Der Schnelleinstieg in Angular 2
Ein paar Worte zum Kurs und zu mir
Dieser Kurs und Angular 4+
Was ist Angular 2?
WICHTIG: Angular CLI - Die Neueste Version
Los geht's: Die Erstellung eines Angular 2 Projekts
Troubleshooting: Angular CLI / Angular 2 Setup
Anpassen der ersten Angular 2 App
.angular-cli.json vs angular.json
Die Projektstruktur verstehen
Was ist TypeScript?
Wo gibt's den Quellcode?
"Components" und "Databinding"
"Components" verstehen
Wie startet eine Angular 2 App eigentlich?
Component Templates und Styles
Das Erstellen einer neuen "Component"
AppModule verstehen
Mit mehreren "Components" arbeiten
Wie Styles in "Components" funktionieren
Inhalte mittels <ng-content> zwischen "Components" verteilen
Mit Daten arbeiten: "Components" und "Databinding"
Text mittels "String Interpolation" ausgeben
Daten übergeben und Ereignisse behandeln - mit Property und Event Binding
"Property Binding" anwenden
Eigene Felder (Properties) mittels "Property Binding" setzen
"Event Binding" anwenden
Eigene Ereignisse (Events) mittels "Event Binding" verarbeiten
Weitere Infos zu "Property" und "Event Binding"
Datenfluss in beide Richtungen mittels "Two-Way-Binding"
HTML Elemente aus dem Template nutzen
Der Lebenszyklus einer "Component"
Der Lebenszyklus in Aktion
Beispiele zum "Component" Lebenszyklus
Kursprojekt: "Components" und "Databinding" nutzen
Bootstrap 3 vs 4
Moduleinleitung
Die ersten "Components" erstellen
Eine bessere Projektstruktur mittels Aufteilung erreichen
Ein Datenmodell für das Rezept
"Property Binding" für Datenübertragung nutzen
Eine "Component" für die Detailansicht erstellen und anbinden
Eine Kette aus "Event" und "Property Bindings" bauen
Die Einkaufsliste "Component"
"Directives" verstehen
Was sind "Directives"?
"Attribute Directives" verstehen und nutzen
Wie man eigene "Attribute Directives" erstellt
Eine eigene "Attribute Directive" - Basis
"Directives" und "AppModule"
DOM Zugriff mit dem Angular 2 "Renderer"
Angular 4 und der "Renderer"
DOM Zugriff mit "HostBinding"
Auf Ereignisse mittels "HostListener" reagieren
Eigene "Directives" und "Property Binding"
"Structural Directives": Die DOM Struktur mit *ngIf kontrollieren
Listen mit *ngFor ausgeben
Eine Alternative zu *ngIf: ngSwitch
Wofür der "*" gut ist
Eine eigene "Structural Directive"
Kursprojekt: "Directives" nutzen
Eine Liste von Rezepten mit *ngFor ausgeben
Eine Liste von Zutaten ausgeben
Eine eigene Dropdown Directive erstellen
"Services" zur Kommunikation und Zentralisierung nutzen
Was sind "Services"?
Ein einfacher "Service": LogService
Wie man einen "Service" mittels "Dependency Injection" bereitstellt
Den LogService mittels "Dependency Injection" bereitstellen
Einen DataService zur Datenzentralisierung erstellen
Eine vs Mehrere Instanzen eines "Services"
"Services" in "Services" bereit stellen (injecten)
Angular 6 und RxJS 6
Kommunikation zwischen "Components" mit "Services" steuern
Kursprojekt: "Services" nutzen
Rezepte in einem RecipeService verwalten
Daten zwischen Components mittels "Services" austauschen
Die Einkaufsliste mit einem "Service" verwalten
"Routing": Seitenwechsel mit dem Angular 2 "Router"
Moduleinleitung
"Routes" aufsetzen, konfigurieren und aufrufen
Navigation mittels Links ermöglichen
Programmatisch navigieren
Routingparameter übergeben
Routingparameter richtig extrahieren
Optionale Parameter (Query Parameter) nutzen
Links und Query Parameter
Mehr zu Observables & Angular 2 Routing
Ein "Hash Fragment" (#) übergeben
Verschachtelte "Routes" anlegen: "Child Routes"
Zu verschachtelten "Routes" navigieren
Umleitungen/ Weiterleitungen einrichten
Wildcards nutzen
Aktive Links stylen
"Routes" beschützen - Vor dem Zugriff
"Routes" beschützen - Vor dem Verlassen
Routingstrategien und notwendige Servereinstellungen
Kursprojekt: "Routing" nutzen
Einleitung & Zielsetzung
"Routes" aufsetzen und konfigurieren
Links und Navigationsmöglichkeiten ergänzen
Verschachtelte "Routes" im Rezeptbuch
Rezepte-IDs mittels Routing übergeben
Programmatisch navigieren
Den aktuellen Aufenthaltsort mittels aktiver Links mitteilen
Routingparameterwechsel korrekt verarbeiten & Bugfixes
Formulare nutzen und Nutzereingaben verarbeiten
Moduleinleitung
Ansatz 1 - Der "Template-Driven Approach"
Eingabeelemente (Controls) erfassen - Template-Driven
Das Formular übermitteln - Template-Driven
Felder des Angular 2 "Form" Objekts
Formularvalidierung mit Angular 2 - Template-Driven
Den Status ("State") des Formulars nutzen - Template-Driven
Standardwerte bereitstellen - Template-Driven
Two-Way-Binding und Formulare - Template-Driven
Gruppieren von Eingabeelementen - Template-Driven
Radio Buttons nutzen - Template-Driven
Eine Zusammenfassung des "Template-Driven Approach"
Ansatz 2 - Der "Reactive" oder auch "Data-Driven Approach"
Programmatisch erstelltes Form-Objekt und HTML Formular synchronisieren
Formulare übermitteln - Reactive Approach
Formularvalidierung im "Reactive Approach"
Den Status ("State") des Formulars nutzen - Reactive Approach
Gruppieren von Eingabeelementen - Reactive Approach
Radio Buttons im Reactive Approach
Arrays von Eingabeelementen - Reactive Approach
Alternativer Weg der Formularerstellung: Der "Formbuilder" - Reactive Approach
Eigene Validierungsregeln erstellen - Reactive Approach
Asynchrone Validierungsregeln nutzen
Auf Status- und Wertveränderungen reagieren
Formulare zurücksetzen
Kursprojekt: Formulare nutzen
Ein Formular für die Einkaufsliste - Template-Driven
Zutaten zur Liste hinzufügen - Template-Driven
Das Zurücksetzen des Formulars ermöglichen
Zutaten bearbeiten und deren Status verwalten
Zutaten löschen
Rezepte erstellen - Reactive
TypeScript Formular und Template HTML synchronisieren
Ein neues Rezept übermitteln
Zutaten zu Rezept hinzufügen
Den Status des Rezeptformulars nutzen
Zum Formular navigieren
Ein Rezept zur Bearbeitung laden
Das Formular für die Bearbeitung anpassen
Die Formulare fertigstellen
"Pipes" zur Transformierung von Daten nutzen
Was sind Pipes?
Pipes verwenden
Argumente an Pipes übergeben
Mehrere Pipes kombiniert verwenden
Mehr über verfügbare Pipes erfahren
Eine eigene Pipe erstellen
Beispiel: Eine Filter-Pipe
Beschränkungen von Pipes - "Pure" und "impure" Pipes
Die "async" Pipe
Zusammenfassung
Http-Zugriff aus einer Angular 2 App
Einleitung und Erklärung von "Observables"
Ein Beispielprojekt aufsetzen
Angular Http Client Installieren
Daten via POST-Request übermitteln und "Observables" nutzen
Daten via GET-Request empfangen
Observables zur Datentransformierung nutzen
Fehlerbehandlung bei Http Requests
Http und die "async" Pipe
Mehr zu Observables
Kursprojekt: Http nutzen
Setup des Backends (Servers)
Daten mittels PUT Request übermittlen
Die Datenübermittlung ermöglichen
Daten mittels GET Request abrufen
Die App bei neuen Daten aktualisieren
Warum eigentlich PUT statt POST?
Angular 2 Module nutzen und die App optimieren
Moduleinleitung
Verschiedene Module für verschiedene Features der App nutzen
Die Appstruktur überprüfen
Feature Module: Ein eigenes Modul für die Einkaufsliste
Feature Module: Ein eigenes Modul für das Rezeptbuch (inkl. Routing)
Routes nur bei Bedarf laden - Lazy Loading verstehen
Lazy Loading vorbereiten
Lazy Loading für das Rezeptbuch nutzen
Optional: Lazy Loading für die Einkaufsliste
Shared Modules: Wiederkehrende Inhalte teilen
Core Module: Kernfunktionalitäten outsourcen
Zusammenfassung zu Modulen und Lazy Loading
Mehr zu Angular 2 Modulen
Weitere Optimierung: Die Templates bereits VOR dem Start im Server kompilieren
Eine Angular 2 App hosten (Deployment)
Moduleinleitung
Vorbereitung der App
Beispiel: Hosting auf AWS S3
Wichtige Hinweise & Troubleshooting
Authentifizierung und Angular 2
Moduleinleitung und Überblick über Authentifizierung in einer Angular 2 App
Ein Beispielprojekt aufsetzen
Routing hinzufügen
Das Erstellen von Nutzern ermöglichen
Das Anmelden (Authentifizieren) von Nutzern ermöglichen
Eine erste kurze Zusammenfassung
Das Ausloggen ermöglichen (wenn angemeldet)
Den Authentifizierungsstatus überprüfen
Routes nur für angemeldete Nutzer zugänglich machen
Angular 2 Animationen nutzen
Animationen und Angular 4
Moduleinleitung
Animationen aufsetzen und verschiedene Status nutzen
Übergänge zwischen Status ergänzen
Mit vielen Status und "Wildcards" arbeiten
Übergänge in Phasen aufteilen
Das Erscheinen und Verschwinden von Elementen animieren (*ngIf)
Listen animieren - Vorbereitung
Listen animieren
Jedes Detail einer Animation mit "Keyframes" kontrollieren
Mehrere Animationen gruppieren und gleichzeitig abspielen
Animationsereignisse nutzen
Angular 2 CLI und eigenes Angular 2 Setup (mit Webpack)
Mehr über das CLI lernen
Eigenes Angular 2 Setup: Einleitung
Das Grundgerüst aufsetzen
Notwendige Pakete (bspw. Angular 2) installieren
Eine Beispiel-App erstellen
Die index.html Datei anpassen
Für den Workflow benötigte Pakete installieren
Webpack Konfigurationen aufsetzen
Den Workflow für den Entwicklungsmodus fertigstellen
Lazy Loading ermöglichen
Offline Compilation (AoT) ermöglichen
Den Produktivworkflow aufsetzen
Fertigstellung des Produktivworkflows & Bugfixing
Das Ende
Zusammenfassung & Nächste Schritte
Slides Download