Webentwicklung mit Angular und Angular Material

Seminarziel

Am Ende des Seminars sind die Teilnehmenden in der Lage, Angular und Angular Material effektiv zu nutzen, um leistungsstarke, skalierbare und visuell ansprechende Webanwendungen zu entwickeln und bereitzustellen. Sie lernen, wie sie Projekte planen, entwickeln, integrieren und testen, um verschiedene Anforderungen abzudecken und die Anwendungsleistung zu optimieren.

Inhalt

• Einführung in Angular
  • Überblick und Ziele: Was ist Angular und warum ist es wichtig? Historische Entwicklung und Hauptmerkmale.
  • Anwendungsbereiche: Typische Anwendungsbereiche und Szenarien, in denen Angular eingesetzt wird.
  • Vorteile von Angular: Vergleich mit anderen JavaScript-Frameworks wie React und Vue.js.
• Installation und Einrichtung
  • Systemvoraussetzungen: Voraussetzungen für die Installation und Ausführung von Angular.
  • Installation: Schritt-für-Schritt-Anleitung zur Installation des Angular CLI und Einrichtung eines neuen Projekts.
  • Erste Schritte: Erstellung und Konfiguration eines neuen Angular-Projekts.
• Grundlegende Konzepte und Architektur
  • Angular-Architektur: Überblick über die Komponenten-basierte Architektur von Angular.
  • Module und Komponenten: Erstellung und Nutzung von Angular-Modulen und -Komponenten.
  • Datenbindung und Direktiven: Einführung in die Datenbindung (Interpolation, Property Binding, Event Binding) und grundlegende Direktiven (ngIf, ngFor).
• Dienste und Dependency Injection
  • Einführung in Angular-Dienste: Erstellen und Verwenden von Diensten zur Trennung von Geschäftslogik und UI.
  • Dependency Injection: Nutzung der Dependency Injection zur Bereitstellung von Diensten.
  • Lebenszyklus-Hooks: Verständnis und Nutzung von Lebenszyklus-Hooks in Komponenten.
• Praktische Übung 1: Erstellung einer einfachen Angular-Anwendung
  • Problemstellung: Erstellung einer einfachen Angular-Anwendung zur Verwaltung einer To-Do-Liste.
  • Lösung: Installation und Konfiguration von Angular, Erstellung von Modulen und Komponenten, Nutzung von Datenbindung und Diensten.
  • Ergebnis: Eine funktionierende Angular-Anwendung zur Verwaltung von To-Dos.
• Einführung in Angular Material
  • Überblick und Ziele: Was ist Angular Material und warum ist es wichtig? Hauptmerkmale und Vorteile.
  • Installation: Schritt-für-Schritt-Anleitung zur Installation und Einrichtung von Angular Material in einem Angular-Projekt.
  • Erste Schritte: Nutzung grundlegender Angular Material-Komponenten.
• Grundlegende Angular Material-Komponenten
  • Layout-System: Nutzung des Layout-Systems und der Grid-Komponenten von Angular Material.
  • Formulare und Eingaben: Erstellung von Formularen und Nutzung von Eingabekomponenten.
  • Navigation: Implementierung von Navigationsleisten, Menüs und Tabs.
• Erweiterte Angular Material-Komponenten
  • Datenanzeige: Nutzung von Tabellen, Karten und Listen zur Datenanzeige.
  • Dialoge und Overlays: Implementierung von Dialogen, Modalen und Tooltips.
  • Medien und Icons: Einbindung und Nutzung von Medienkomponenten und Icons.
• Theming und Anpassung
  • Theming: Einführung in das Theming-System von Angular Material.
  • Anpassung von Styles: Nutzung von CSS und Angular Material-Utilities zur Anpassung von Komponenten.
  • Erstellung eines benutzerdefinierten Themes: Schritt-für-Schritt-Anleitung zur Erstellung eines benutzerdefinierten Themes.
• Praktische Übung 2: Erstellung einer erweiterten Anwendung mit Angular Material
  • Problemstellung: Erweiterung der bestehenden To-Do-Liste-Anwendung mit Angular Material-Komponenten und -Funktionalitäten.
  • Lösung: Installation und Konfiguration von Angular Material, Implementierung von Angular Material-Komponenten, Anpassung des Layouts und des Themas.
  • Ergebnis: Eine erweiterte To-Do-Liste-Anwendung mit Angular Material-Integration und benutzerdefiniertem Theme.
• Fortgeschrittene Angular-Konzepte
  • Routing: Einführung in Angular Router und die Implementierung von Routing in einer Angular-Anwendung.
  • State Management: Nutzung von Services und State Management Libraries (z.B. NgRx) zur zentralen Zustandsverwaltung.
  • Performance-Optimierung: Techniken zur Verbesserung der Leistung von Angular-Anwendungen.
• Fortgeschrittene Angular Material-Konzepte
  • Dynamische Formulare: Erstellung und Verwaltung dynamischer Formulare mit Angular Material.
  • API-Integration: Nutzung von Angular Material-Komponenten zur Darstellung von API-Daten.
  • Authentifizierung: Implementierung von Authentifizierungsmechanismen in Angular Material-Anwendungen.
• Testen und Debugging
  • Unit Testing: Einführung in das Unit Testing mit Angular Testbed und Jasmine.
  • End-to-End Testing: Nutzung von Protractor zur Durchführung von End-to-End-Tests.
  • Debugging: Techniken und Tools zur Fehlersuche und Debugging von Angular- und Angular Material-Anwendungen.
• Deployment und Wartung
  • Deployment: Einführung in Deployment-Strategien für Angular-Anwendungen.
  • CI/CD: Implementierung von Continuous Integration und Continuous Deployment für Angular-Projekte.
  • Wartung und Skalierung: Best Practices zur Wartung und Skalierung von Angular-Anwendungen.
• Praktische Übung 3: Entwicklung und Deployment einer kompletten Anwendung
  • Problemstellung: Entwicklung und Deployment einer vollständigen Angular-Anwendung mit Angular Material-Integration und API-Anbindung.
  • Lösung: Implementierung des Projekts unter Nutzung der erlernten Techniken und Tools, Durchführung von Tests und Deployment.
  • Ergebnis: Eine vollständige, funktionierende Angular-Anwendung mit Angular Material-Integration, die bereit für den Produktionseinsatz ist.