Angular Basics & Essentials
Eure Entwickler bauen ihre ersten produktionsreifen Angular-Features – mit Components, Signals, Formularen, Routing und Tests vom ersten Tag an.
- 2 bis 4 Tage
- Einsteiger
- Remote oder Inhouse
- Deutsch & Englisch
Passt dieses Training zu eurem Team?
Für wen
- Entwickler, die neu in Angular sind
- Teams, die von React, Vue, AngularJS oder serverseitigen Frameworks wechseln
- Backend-Entwickler, die Frontend-Aufgaben übernehmen
Danach kann euer Team
- Standalone Components, Templates und Formulare selbstständig bauen
- Daten mit HttpClient, RxJS und Signals laden und anzeigen
- Routing, Services und Dependency Injection richtig strukturieren
- Erste Unit- und End-to-End-Tests mit Vitest und Playwright schreiben
Voraussetzungen
- Programmiererfahrung in einer beliebigen Sprache
- Grundkenntnisse in HTML, CSS und JavaScript
- Node.js und ein Editor installiert – wir schicken vorab eine Checkliste
Angular ist gross, und ein Team, das es aus Blogposts lernt, übernimmt so viele schlechte Gewohnheiten wie gute. In zwei bis vier Tagen – je nachdem, wie tief ihr gehen wollt – lernen eure Entwickler, wie man Angular-Anwendungen heute baut – Standalone Components, Signals, Reactive Forms, Routing, HttpClient und RxJS – und warum man es so macht.
Alles wird live gecodet und auf den Rechnern eurer Entwickler geübt. Am Ende hat das Team eine kleine, aber vollständige Anwendung gebaut, inklusive Tests mit Vitest und Playwright, und weiss, wie es in eurem Projekt weitergeht.
Agenda
Reihenfolge und Tiefe der Blöcke passen wir an euer Team an – was ihr schon beherrscht, lassen wir weg, eure Fragen bekommen die Zeit.
Angular Grundlagen
- Einführung in Angular und moderne Webanwendungen
- Standalone Components: Architektur und Vorteile
- Change Detection, Signals und Zoneless Angular
- Projekt-Setup mit der Angular CLI
Komponenten
- Standalone Components erstellen und strukturieren
- Lifecycle Hooks verstehen und nutzen
- Signal Inputs, Outputs und Models: input(), output(), model()
- Komponenten und ihr Einfluss auf die Architektur
Templates, Data Binding und Signals
- Property, Event und Two-Way Binding in Templates
- Signals, computed() und linkedSignal()
- Control Flow mit @if, @for und @switch
- Deferrable Views mit @defer
- Performance-Optimierung mit der OnPush-Strategie
Komponentenkommunikation
- Parent-Child-Kommunikation mit Inputs und Outputs
- Shared Services für reaktives Datenmanagement
- Signals für die komponentenübergreifende Kommunikation
- Queries mit viewChild() und contentChild()
HTTP-Kommunikation & Observables, RxJS
- Einführung in den HttpClient für API-Zugriffe
- CRUD-Operationen und Data Binding in Standalone Components
- Observables und Subscriptions verwenden
- Daten laden mit resource() und httpResource()
- Funktionale HTTP Interceptors
- RxJS für reaktive HTTP-Datenströme einsetzen
Services, Dependency Injection, Pipes
- Angular Services erstellen und verwenden
- Dependency Injection nutzen
- Eingebaute und eigene Pipes zur Datenformatierung
- AsyncPipe vs Signals: Umgang mit Datenströmen
- Best Practices zur Organisation von Services
Formulare und Validierung
- Reactive Forms mit Standalone Components
- Form Builder für dynamische Formulare
- Validierungslogik: eingebaute und eigene Validators
- Fehlerbehandlung und visuelles Feedback in Formularen
- Integration mit Backend-Validierungen
Routing
- Standalone Components als Routenziele
- Lazy Loading mit loadComponent und loadChildren
- Funktionale Guards und Resolver
- Parameter in Routen und Query Strings übergeben
Testing (Vitest, Playwright)
- Unit Tests für Standalone Components mit Vitest
- Mocking von Services und HTTP-Aufrufen
- End-to-End-Tests mit Playwright
- Strategien zum Testen von Dependency Injection
- Automatisierung in CI/CD Pipelines
Eure Trainer
Tim Honermann
Senior Software Engineer
Senior Software Engineer für Angular und Java, baut Full-Stack-Anwendungen für Kunden und schreibt darüber in seinem Blog.
Ganzes Profil →
Fabian Gosebrink
Microsoft MVP, Google Developer Expert
Baut jede Woche mit Teams Angular-Anwendungen und hat 120+ Konferenzvorträge zu Angular, State Management und Architektur gehalten.
Auf Pluralsight hat er den Kurs Modern State Management with Angular Signals and NgRx SignalStore aufgenommen – dieselben Themen als Video.
Ganzes Profil →
“Die Schulung war hervorragend!”★★★★★
“Fabian verfügt über ein sehr umfangreiches praktisches Wissen.”★★★★★
“Man spürt deutlich, dass Fabian sich aktiv & professionell mit Angular auseinandersetzt, nicht "nur" darüber doziert!”★★★★★
“Diese Schulung war definitiv eine der besten, die ich bislang besuchen durfte.”★★★★★
“Wir [...] konnten direkt im Kurs den aktualisierten Code pullen und selbst ausprobieren.”★★★★★
“Exkurse und detaillierte Erklärung oder Wiederholung, wo notwendig.”★★★★★
“Sehr gut auf unsere Bedürfnisse eingegangen.”★★★★★
“NgRx Konzept sehr gut erläutert.”★★★★★
“Bester Kurs den ich bis jetzt hatte.”★★★★★
“Obwohl es ein Kurs für Fortgeschrittene war, konnten auch Anfänger gut folgen.”★★★★★
Holt dieses Training in euer Team
Nur für euer Team – remote oder bei euch vor Ort, an Terminen, die euch passen, wo sinnvoll mit Beispielen aus eurer eigenen Codebasis.
- bis zu 12 Teilnehmende (mehr auf Anfrage)
- ab CHF 2’400 pro Tag für das ganze Team
- Vor Ort: zuzüglich Reisekosten
- Fixes Angebot innerhalb eines Werktags
- Agenda als PDF – zum Weiterleiten an eure Vorgesetzten
Newsletter
Nur die neuesten Artikel und Ankündigungen.
Kein Spam. Versprochen. Mit der Anmeldung akzeptiert ihr unsere Datenschutzerklärung.
