Summary  
This chapter introduces the concept of component-based architecture, where each component encapsulates markup, styling, and logic into a reusable, self-contained unit to simplify development, maintenance, and styling isolation.  

General domain of usage  
Web applications

Wenn wir über **Angular** sprechen, stoßen wir zuerst auf **Komponenten**. Diese sind die grundlegenden **Bausteine** jeder Anwendung. Stellen Sie sich vor, Sie bauen eine Website aus kleinen Teilen zusammen, wie bei einem Puzzle. Jede **Schaltfläche**, jedes **Formular** oder jede **Produktkarte** ist eine Komponente.

Jede **Komponente** besteht aus **drei Hauptteilen**:

- **HTML-Template** – definiert das Aussehen der Komponente;

- **CSS-Stile** – steuern das visuelle Erscheinungsbild;

- **TypeScript-Code** – verarbeitet die Logik und die Dateninteraktion.

Zum Beispiel kann eine **Benutzerprofilseite** in **Komponenten** unterteilt werden:

## Vorteile des komponentenbasierten Ansatzes in Angular

Die Verwendung von Komponenten in **Angular** bietet **zahlreiche Vorteile**. Im Folgenden die **wichtigsten Vorteile**:

Was sind die wichtigsten Bausteine einer typischen Angular-Komponente?

Was ist der Hauptvorteil des komponentenbasierten Ansatzes?

Erfahren Sie, wie Sie moderne Webanwendungen mit Angular, einem der leistungsstärksten Frontend-Frameworks, entwickeln. Sie beginnen mit den grundlegenden Konzepten, richten Ihre Entwicklungsumgebung ein und erstellen schrittweise dynamische, interaktive Komponenten. Dabei arbeiten Sie mit Direktiven, Services, Routing und dem neuesten Ansatz mit Standalone Components. Mit jedem Schritt erwerben Sie praktische Fähigkeiten, um Angular-Anwendungen sicher und gemäß den Best Practices der Branche zu entwickeln und zu strukturieren.

Entdecken Sie die Kernkonzepte von Angular und wie dieses Framework die Webentwicklung vereinfacht. Informationen zu den wichtigsten Prinzipien, der Entwicklungsgeschichte und der Einrichtung der erforderlichen Werkzeuge für den Einstieg in die Anwendungsentwicklung.

Erfahren Sie die Grundlagen von Komponenten und Templates in Angular, einschließlich deren Erstellung, Strukturierung und Interaktion zur Entwicklung dynamischer, datengetriebener Anwendungen.

Tauchen Sie in die Direktiven und Pipes von Angular ein, um zu verstehen, wie sie Ihre Templates intelligenter und Ihre Daten sauberer machen. Erfahren Sie, wie Sie mit Direktiven das DOM-Verhalten steuern und mit leistungsstarken, integrierten oder benutzerdefinierten Pipes angezeigte Daten transformieren.

Erfahren Sie, wie Sie Logik in Ihren Angular-Anwendungen mithilfe von Services organisieren und wiederverwenden können. Sie lernen, wie Sie Services erstellen und diese mit dem integrierten Dependency Injection-System von Angular in Komponenten einbinden. Dies sorgt für sauberen, modularen und leichter wartbaren Code.

Erfahren Sie, wie Angular-Anwendungen früher auf Module angewiesen waren, und entdecken Sie, warum das Framework nun einen flexibleren Ansatz mit Standalone-Komponenten verfolgt. Tauchen Sie in die Struktur von NgModules ein, verstehen Sie deren Schlüsselelemente und erfahren Sie, wann und wie Standalone-Komponenten in der modernen Angular-Entwicklung eingesetzt werden.

Erfahren Sie, wie Angular Routing und Navigation verwaltet, um dynamische Single-Page-Anwendungen zu erstellen. In diesem Abschnitt entdecken Sie, wie Routen definiert und mit den integrierten Werkzeugen von Angular zwischen Ansichten navigiert wird.

Was ist eine Komponente?

Komponente

Vorteile des komponentenbasierten Ansatzes in Angular

1. Was sind die wichtigsten Bausteine einer typischen Angular-Komponente?

2. Was ist der Hauptvorteil des komponentenbasierten Ansatzes?

Awesome!

Was ist eine Komponente?

Komponente

Vorteile des komponentenbasierten Ansatzes in Angular

1. Was sind die wichtigsten Bausteine einer typischen Angular-Komponente?

2. Was ist der Hauptvorteil des komponentenbasierten Ansatzes?