Quelle - Angular Mastery Workshop

Aus Zweites Gehirn, dem persönlichen Wiki
Quelle - Angular Mastery Workshop
TypQuelle
Rohdateisources/angular_kurs.pdf (nur lokal, per .gitignore vom Repository ausgeschlossen)
AutorTomas Trajan und Kevin Kreuzer
Datum_quellePDF erstellt 2024-01-21, Inhalt auf Stand Angular 12 (ca. 2021)
FormatPDF (Foliensatz eines kommerziellen Kurses), 396 Folien in 3 Kurstagen, Code meist nur als Bild
Erstellt2026-09-26
Aktualisiert2026-09-26
Tagsangular, webentwicklung, typescript, rxjs, kurs

Folien eines dreitägigen Angular-Kurses von Tomas Trajan und Kevin Kreuzer. Sie führen von modernem JavaScript und TypeScript über die Bausteine von Angular, RxJS und Tests bis zu Routing, Formularen, Architektur und State Management. Stand ist Angular 12, vieles ist inzwischen überholt.

Lizenz

Das PDF ist kommerzielles Kursmaterial. Es liegt nur lokal in sources/ und ist per .gitignore vom Repository ausgeschlossen (Entscheid des Nutzers vom 2026-09-26). Die Wiki-Seiten fassen den Inhalt in eigenen Worten zusammen. Auf Wunsch des Nutzers sind die Code-Beispiele vollständig von den Folienbildern abgeschrieben und auf den Themenseiten eingefügt, jeweils mit Folienangabe (2026-09-26).

Aufbau der Quelle

Folien Thema Eingeflossen in
1–26 Trainer, Kursziele, Reife der Frontend-Entwicklung Tomas Trajan, Kevin Kreuzer, Angular
27–66 Modernes JavaScript: let/const, Pfeilfunktionen, ES-Module, Array- und Objektmethoden, Destrukturierung, async/await Modernes JavaScript
67–90 Angular: Einführung, Ökosystem, Release-Zyklus, Plattform, Neuheiten (Ivy) Angular
91–119 Angular CLI: Arbeitsbereich, serve/build/test, Budgets, Schematics, Prettier Angular CLI
120–146 TypeScript für Angular-Entwickler TypeScript
147–185 Überblick, Bausteine, Services, Module und Dependency Injection Angular, Dependency Injection, Angular-Architektur
187–243 Daten anzeigen, Ereignisse, @Input/@Output, Lebenszyklus, Services Angular-Komponente
244–256 Testen: Ebenen, Karma/Jest, Protractor/Cypress, TestBed, Mocking Softwaretest
257–283 Reaktive Programmierung und RxJS Reaktive Programmierung, RxJS
284–296 Backend-Kommunikation: HttpClient, Fehlerbehandlung, Interceptors Angular-Backend-Kommunikation
298–314 Routing, Lazy Loading, Guards, Resolver, Pfad-Parameter Angular-Routing
315–324 Template-driven und Reactive Forms, Validierung Angular-Formular
325–342 Pipes, Direktiven, @ViewChild, Content Projection Angular-Komponente
343–350 Umgebungen und CI: „einmal bauen, überall ausliefern“ Angular-Architektur
351–358 Change Detection, Zone.js, Architektur und Ordnerstruktur Angular-Komponente, Angular-Architektur
359–383 State Management: Zustandsarten, Heuristiken, NgRx State Management, NgRx
384–396 Community-Bibliotheken (Nx, NgRx, Augury, ngx-translate, ng-bootstrap, ngx-charts, CDK) Angular

Kernaussagen

  1. Angular ist ein TypeScript-Framework von Google für Single Page Applications. Es ist bewusst stark vorgegeben („opinionated“) und laut den Autoren die beste Wahl für mittlere bis grosse Anwendungen in Unternehmen mit vielen Teams (Folie 70–72) (Angular).
  2. Eine Angular-App besteht zu etwa 95 % aus Modulen, Komponenten, Direktiven, Pipes und Services. Komponenten zeigen Daten an und bleiben schlank, die Logik gehört in Services, die per Dependency Injection bereitgestellt werden (Folie 150, 163, 240) (Angular-Komponente, Dependency Injection).
  3. RxJS bringt reaktive Programmierung: Ein Observable ist eine „asynchrone Sammlung von Werten“. Man abonniert am besten mit | async, verschachtelt nie subscribe und wählt den passenden Flattening-Operator (Folie 263–277) (Reaktive Programmierung, RxJS).
  4. Architektur: Core, Shared und lazy geladene Features. Features importieren nie etwas voneinander. Diese Isolation garantiert, dass eine Änderung keine anderen Features bricht (Folie 357–358) (Angular-Architektur).
  5. State Management: Es gibt sechs Arten von Zustand. Ob Komponente, Service oder Bibliothek wie NgRx den Zustand verwaltet, entscheidet man nach fünf Heuristiken (Folie 363–373) (State Management).

Bewertung

Einordnung (Claude)

Der Kurs ist praxisnah und voller Faustregeln („nie Funktionen im Template aufrufen“, „keine Resolver“, „immer aufräumen in ngOnDestroy“). Die Grundideen sind weiterhin gültig: schlanke Komponenten, Services, DI, Lazy Loading, isolierte Features und die Zustandsarten. Die Werkzeuge und APIs sind aber veraltet. Obwohl das PDF von 2024 stammt, zeigt es Angular 12 („We start with Angular 12!“, Folie 77): NgModules, *ngIf/*ngFor, Zone.js, Klassen-Guards, Karma, Protractor, TSLint, Augury. Was sich bis Angular 22 (2026) geändert hat, steht in Quelle - Recherche - Angular heute 2026 und ist auf den einzelnen Seiten als Widerspruch markiert.

Kleinigkeiten in der Quelle
  • Folie 66: Die Bildunterschrift „Rename lastname to name…“ ist von Folie 65 kopiert und passt nicht zu async/await.
  • Folie 184 heisst „Visibility Modifiers“, zeigt aber die DI-Decorators @Optional, @Self, @SkipSelf und @Host.
  • Folie 354: Die Methode heisst runOutsideAngular(), nicht runOutsideAngularZone() (Einordnung Claude, nicht eigens geprüft).
  • Tippfehler wie „FromBuilder“ statt FormBuilder (Folie 317, 319) und „HTTP_INTERCEPTOR“ statt HTTP_INTERCEPTORS (Folie 291, 293).

Fehler im Code und in den Aussagen (beim Abschreiben aufgefallen, Details auf den Themenseiten):

  • Folie 58: Emojis sind keine gültigen JavaScript-Variablennamen (Modernes JavaScript).
  • Folie 62: behicle statt vehicle im Spread-Beispiel (Modernes JavaScript).
  • Folie 236: Die Behauptung, ohne OnPush reagiere ngOnChanges auf jede geänderte Eigenschaft („deep equals“), ist falsch (Angular-Komponente).
  • Folie 274: map(value => value * 2) auf 1, 2, 3 ergibt 2, 4, 6, nicht „2, 3, 6“ (RxJS).
  • Folie 255: Der Test „will fail, why?“ erwartet 2 Einträge, der Mock liefert nur einen (Softwaretest).
  • Kleinere Code-Fehler: fehlendes this. (Folie 230), ngOnViewInit statt ngAfterViewInit (238), Semikolon statt Klammer (224), this,customer (268), Csutomer (311), sortCriteria fehlt als Argument (164), User[] statt Observable<User[]> (269), doppeltes Komma (169).

Neu angelegte Seiten

Verwandt

Links auf diese Seite

Kategorien: angular | webentwicklung | typescript | rxjs | kurs