Angular 18 vorgestellt: Zoneless, Signals API, Material 3 und mehr - Detaillierte Analyse
Folge mir auf / gregorbiswanger
Komm zur Community auf / discord
Unser Fan-Shop auf http://my-coding-zone.de
Bereite dich auf das nächste große Update mit Angular 18 vor! In unserem Twitch Live-Stream, präsentiert vom Angular-Experten Gregor Biswanger, werden sowohl für Anfänger als auch für fortgeschrittene Angular-Entwickler spannende Einblicke geboten.
Wir werden die folgenden voraussichtlichen Features von Angular 18 erkunden:
Die neuen Unified Control State Change Events für Formulare verbessern die Reaktionsfähigkeit und Steuerung durch ein erweitertes Event-Handling-System, das Wert- und Statusänderungen effektiver überwacht.
Zudem wird das experimentelle Feature zur Änderungserkennung ohne Zone.js eingeführt, das durch die direkte Nutzung der Angular-APIs eine effizientere Performance verspricht. Diese Innovationen könnten die Entwicklung mit Angular dynamischer und anpassungsfähiger gestalten.
Darüber hinaus werden wir auch auf weitere spannende, bisher nicht erwähnte Features eingehen, die Angular weiter verbessern.
▼ ▼ ▼ Timestamps ▼ ▼ ▼
[00:00:00] Intro
[00:02:19] Willkommen
[00:18:35] Interaktive Umfrage
[00:42:29] Vorstellung der Tools für die Konsole ConEmu
[00:44:51] Angular 18 und neue Webseite
[00:45:59] Package Manager: pnpm
[00:53:04] Neuer Public-Ordner in Angular 18
[00:55:40] Diskussion über statische Assets
[01:00:01] Neue Alias-Namen in Angular 18
[01:01:09] Neue Optionen in der Angular CLI
[01:03:24] Aufbau einer ToDo-App
[01:06:27] Einbindung von Modulen
[01:09:23] Dynamische Listen in der ToDo-App
[01:10:37] Production-Ready Angular 18
[01:11:17] Zone.js Features in Angular 18
[01:12:26] Zone-less Feature in Angular 18
[01:13:25] SignalR vs. Signals in Angular 18
[01:16:36] Vergleich: Angular 18 und frühere Frameworks
[01:17:56] Change Detection und Push-Strategie
[01:21:20] Counter mit SetInterval in Angular 18
[01:23:01] Auswirkungen der Change Detection
[01:24:08] Kinderkomponente und Change Detection
[01:25:54] Zoneless Change Detection
[01:27:19] Entfernen von Zone Detection
[01:31:59] Promise und SignalR für Change Detection
[01:34:56] Unterschied: Signal und ngModel
[01:37:56] Signal als reaktiver Wert
[01:38:08] Verwendung von Signalwerten
[01:39:56] Änderungen in der Change Detection
[01:42:33] Change Detection in Angular-Anwendungen
[01:43:25] Methoden zur Wertzuweisung
[01:46:16] Effekte und Computeds in Angular 18
[01:52:10] Verwendung von Signalen in Angular 18
[01:53:36] Bedeutung von Konstruktoren
[01:56:26] Komplexität durch Signale
[01:57:57] Immutable Data in Angular-Anwendungen
[02:00:04] Lifecycle-Hook 'afterViewInit'
[02:02:26] Verwendung von Effekten
[02:04:22] Zusammenfassung zu Angular 18
[02:05:09] Content Projection in Angular
[02:06:10] Einführung in H3
[02:07:16] Default-Wertdefinitionen in Angular 18
[02:08:41] Standardwert für Styles
[02:09:51] Vererbung von Styles
[02:11:26] Empfehlung: REM statt Pixel
[02:13:24] Diskussion: Schriftgrößen und Einheiten
[02:17:02] Zweite Seite für Router-Features
[02:18:36] Reaktive Formulare
[02:20:14] Typisierte Formulare in Angular 18
[02:21:38] Formular mit Name, E-Mail und Nachricht
[02:23:11] Formularvalidierung und Submit-Button
[02:26:23] ESLint und HTML-Linting
[02:29:35] Zustände in reaktiven Formularen
[02:34:40] Events und Zustände in Angular 18
[02:37:10] Bedeutung neuer Features
[02:39:43] Neue Tools für Angular-Projekte
[02:42:22] Verabschiedung
[02:45:38] Diskussion: GPT-Versionen und AI
[02:46:04] Input-Output-Modell in Angular 18
[02:50:02] Aktualisierungen bei den Routen
[02:51:04] Web Components und Shadow DOM
[02:52:23] Prefixes in Angular Libraries
[02:53:26] Redirects und Error Handling
[03:01:14] Neuer Redirect Command in Angular 18
[03:03:53] Änderungserkennung und Signale
[03:05:54] Input und Output in Angular 18
[03:09:26] Event Emitters für Two-Way Binding
[03:16:15] Implementierung von Input- und Output-Eigenschaften
[03:23:10] Überblick über neue Features
[03:27:27] Änderungen in der Control Flow Syntax
[03:30:07] Zusammenfassung der neuen Features
[03:32:22] YouTube nutzt Angular
[03:34:40] Dank an die Community
[03:35:11] Verwendung von NX im Angular Monorepo
[03:49:46] Angular Material Setup
[03:52:28] Angular Schematics für die App-Shell
[03:56:44] Neue Design-Features und Farbpaletten
[03:58:49] Angular Material 3 Themes
[04:00:46] Primary, Secondary und Tertiary Farben
[04:04:52] Dark Theme Entscheidung
[04:10:46] Farbenregeln für Material Design
[04:13:28] Einbindung von Styles
[04:14:22] Farbdefinitionen in Angular
[04:17:12] Verwendung von Theme-Typen
[04:19:03] Importregeln in Angular
[04:21:15] Farbdefinitionen in Angular Material
[04:28:15] Farbgestaltung in Angular 18
[04:32:20] Standardfarben und Farbpaletten
[04:38:39] Quizspiel zu Angular 18
[04:50:00] Abschluss
✅ Mein Equipment: https://kit.co/GregorBiswanger/gregor...
Folge mir auf / gregorbiswanger
Komm zur Community auf / discord