Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Die Hauptkomponente in Angular | Components and Templates
Einführung in Angular

bookDie Hauptkomponente in Angular

Dateien im App-Ordner

Bevor wir uns mit der Hauptkomponente beschäftigen, werfen wir einen Blick auf die Dateien im App-Ordner und deren Aufgaben in der Anwendung.

Wenn ein neues Angular-Projekt erstellt wird, beginnt alles im App-Ordner. Hier befinden sich die Kern-Dateien, die die Struktur der Anwendung definieren. In diesem Abschnitt untersuchen wir den Inhalt dieses Ordners und betrachten die Hauptkomponente genauer, die als Einstiegspunkt für die Benutzeroberfläche dient.

Hauptkomponente

Nun betrachten wir die Hauptkomponente genauer, AppComponent. Diese Komponente wird standardmäßig beim Ausführen des Befehls ng new erstellt und dient als Wurzelkomponente der Anwendung.

component.ts

component.ts

copy

In Angular werden Komponenten mithilfe von Dekoratoren erstellt. Ein Dekorator ist eine spezielle Funktion, die einer Klasse zusätzliche Funktionalität hinzufügt.

Im @Component-Dekorator werden wichtige Einstellungen festgelegt, die das Aussehen und Verhalten der Komponente bestimmen. Im Folgenden werden diese erläutert:

Zentrale Elemente in der Datei app.component.ts:

  • Selector (selector) – definiert, wie die Komponente im HTML benannt wird. In diesem Fall kann sie als <app-root></app-root> verwendet werden;

  • Imports (imports) – eine Liste von Abhängigkeiten, die für die Funktionsfähigkeit der Komponente erforderlich sind. In diesem Beispiel wird RouterOutlet verwendet, das die Anzeige von Inhalten basierend auf der Route steuert;

  • Template (templateUrl) – der Pfad zur HTML-Datei (app.component.html), die das Template der Komponente enthält;

  • Styles (styleUrls) – der Pfad zur CSS-Datei (app.component.css), die das Erscheinungsbild der Komponente definiert.

Verwendung der Hauptkomponente

Der Prozess beginnt in der Datei index.html, die sich im Ordner src befindet. Sie enthält keinen typischen Inhalt, sondern nur eine grundlegende Struktur mit einem speziellen Tag:

index.html

index.html

copy

Dieses <app-root> Tag entspricht dem selector in app.component.ts. Wenn Angular initialisiert wird, findet es dieses Tag und ersetzt es durch den Inhalt aus app.component.html.

Fazit

Die Hauptkomponente ist das Herz der Anwendung. Sie wird zuerst geladen und verwaltet das zentrale Template. Alles, was auf dem Bildschirm angezeigt wird, läuft über sie. Das <app-root> Tag in index.html ist der Einstiegspunkt, durch den Angular die Seite betritt.

1. Was bewirkt der @Component-Dekorator in Angular?

2. Welche Datei enthält das Template für die Hauptkomponente?

question mark

Was bewirkt der @Component-Dekorator in Angular?

Select the correct answer

question mark

Welche Datei enthält das Template für die Hauptkomponente?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.13

bookDie Hauptkomponente in Angular

Swipe um das Menü anzuzeigen

Dateien im App-Ordner

Bevor wir uns mit der Hauptkomponente beschäftigen, werfen wir einen Blick auf die Dateien im App-Ordner und deren Aufgaben in der Anwendung.

Wenn ein neues Angular-Projekt erstellt wird, beginnt alles im App-Ordner. Hier befinden sich die Kern-Dateien, die die Struktur der Anwendung definieren. In diesem Abschnitt untersuchen wir den Inhalt dieses Ordners und betrachten die Hauptkomponente genauer, die als Einstiegspunkt für die Benutzeroberfläche dient.

Hauptkomponente

Nun betrachten wir die Hauptkomponente genauer, AppComponent. Diese Komponente wird standardmäßig beim Ausführen des Befehls ng new erstellt und dient als Wurzelkomponente der Anwendung.

component.ts

component.ts

copy

In Angular werden Komponenten mithilfe von Dekoratoren erstellt. Ein Dekorator ist eine spezielle Funktion, die einer Klasse zusätzliche Funktionalität hinzufügt.

Im @Component-Dekorator werden wichtige Einstellungen festgelegt, die das Aussehen und Verhalten der Komponente bestimmen. Im Folgenden werden diese erläutert:

Zentrale Elemente in der Datei app.component.ts:

  • Selector (selector) – definiert, wie die Komponente im HTML benannt wird. In diesem Fall kann sie als <app-root></app-root> verwendet werden;

  • Imports (imports) – eine Liste von Abhängigkeiten, die für die Funktionsfähigkeit der Komponente erforderlich sind. In diesem Beispiel wird RouterOutlet verwendet, das die Anzeige von Inhalten basierend auf der Route steuert;

  • Template (templateUrl) – der Pfad zur HTML-Datei (app.component.html), die das Template der Komponente enthält;

  • Styles (styleUrls) – der Pfad zur CSS-Datei (app.component.css), die das Erscheinungsbild der Komponente definiert.

Verwendung der Hauptkomponente

Der Prozess beginnt in der Datei index.html, die sich im Ordner src befindet. Sie enthält keinen typischen Inhalt, sondern nur eine grundlegende Struktur mit einem speziellen Tag:

index.html

index.html

copy

Dieses <app-root> Tag entspricht dem selector in app.component.ts. Wenn Angular initialisiert wird, findet es dieses Tag und ersetzt es durch den Inhalt aus app.component.html.

Fazit

Die Hauptkomponente ist das Herz der Anwendung. Sie wird zuerst geladen und verwaltet das zentrale Template. Alles, was auf dem Bildschirm angezeigt wird, läuft über sie. Das <app-root> Tag in index.html ist der Einstiegspunkt, durch den Angular die Seite betritt.

1. Was bewirkt der @Component-Dekorator in Angular?

2. Welche Datei enthält das Template für die Hauptkomponente?

question mark

Was bewirkt der @Component-Dekorator in Angular?

Select the correct answer

question mark

Welche Datei enthält das Template für die Hauptkomponente?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2
some-alt