Projektstruktur erklärt
Sehen Sie sich die vom CLI generierten Dateien an.
Projektstruktur erklärt ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Projektstruktur erklärt
Ein Angular-Workspace verfügt über eine übersichtliche, vorhersehbare Struktur. Wenn Sie die wichtigsten Dateien und Ordner kennen, können Sie sich in jedem Projekt zurechtfinden.
Der src-Ordner
Der Ordner src/ enthält den Quellcode Ihrer Anwendung: den Einstiegspunkt, den Anwendungscode und globale Ressourcen wie index.html und styles.
main.ts
src/main.ts ist der Einstiegspunkt der Anwendung. Dort wird die Root-Komponente mit bootstrapApplication initialisiert.
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig);index.html
src/index.html ist die einzige HTML-Seite. Ihr Body enthält den Selektor Ihrer Root-Komponente, an dem Angular die Anwendung rendert.
<!-- inside body -->
<!-- <app-root></app-root> -->Der app-Ordner
src/app/ enthält Ihre Komponenten, Services, Routen und Konfigurationen. Ein neues Projekt umfasst app.component, app.config.ts und app.routes.ts.
app.component-Dateien
Die Root-Komponente besteht normalerweise aus einer .ts-Klasse, einem .html-Template und einem .css- (oder .scss-)Stylesheet sowie einer .spec.ts-Testdatei.
app.config.ts
app.config.ts exportiert eine ApplicationConfig mit dem beim Bootstrap verwendeten providers-Array, etwa für den Router und den HTTP-Client.
app.routes.ts
app.routes.ts exportiert das Array mit den Routendefinitionen, das von provideRouter verwendet wird.
import { Routes } from '@angular/router';
export const routes: Routes = [];angular.json
Im Stammverzeichnis des Workspace konfiguriert angular.json die CLI: Build-Ziele, Ausgabepfade, Ressourcen, Styles und Serve-Optionen für jedes Projekt.
package.json und tsconfig
package.json führt Abhängigkeiten und npm-Skripte auf. tsconfig.json-Dateien konfigurieren den TypeScript-Compiler für die Anwendung und die Tests.
public oder assets
Statische Dateien wie Bilder, Schriftarten und Favicon liegen in einem public- oder assets-Ordner und werden gemäß der Konfiguration in angular.json in die Build-Ausgabe kopiert.
Schnelltest: Struktur
Bestimmen Sie den Einstiegspunkt.
Zusammenfassung: Struktur
Sie haben den Workspace erkundet: src/ für den Quellcode, main.ts als Einstiegspunkt, index.html als Host-Seite, app/ für Komponenten und Konfiguration sowie angular.json für die CLI-Konfiguration. Als Nächstes generieren Sie Code mit der CLI.
Häufig gestellte Fragen
Ist die Lektion „Projektstruktur erklärt“ kostenlos?
Ja — der vollständige Text von „Projektstruktur erklärt“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Projektstruktur erklärt“?
Sehen Sie sich die vom CLI generierten Dateien an. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Projektstruktur erklärt“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Ein neues Projekt generieren
- Projektstruktur erklärt
- Code mit ng generate generieren
- Bauen und bereitstellen