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 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