7 Angular Projektstruktur

7.1 Grundlegende Verzeichnisstruktur

Ein modernes Angular Projekt weist eine definierte Verzeichnis- und Dateistruktur auf. Hier ist die aktuelle Strukturübersicht eines neu erstellten Projekts.

7.2 Hauptbestandteile eines Angular-Projekts

7.2.1 Quellcode-Verzeichnis (src/)

Das src/-Verzeichnis enthält den gesamten Quellcode der Anwendung. Hier finden sich folgende wichtige Elemente:

7.2.1.1 src/app/

Das Herzstück der Angular-Anwendung mit folgenden Schlüsseldateien:

app.component.ts: Die Hauptkomponente, die als Einstiegspunkt für die Anwendungslogik dient.
- app.config.ts: In Angular 17 enthält diese Datei die Anwendungskonfiguration für Standalone-Anwendungen (eingeführt ab Angular 14).
app.routes.ts: Definiert die Routing-Struktur der Anwendung im modernen Format.

7.2.1.2 src/main.ts

Die Einstiegspunktdatei für die Angular-Anwendung.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

7.2.1.3 src/index.html

Die Haupt-HTML-Datei, die den Einstiegspunkt für die Anwendung definiert:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="public/favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

7.2.2 Konfigurationsdateien

7.2.2.1 angular.json

Die Hauptkonfigurationsdatei für Angular-Projekte wurde in Angular 17 aktualisiert und unterstützt nun:

Erweiterte Build-Optimierungen
Verbesserte Bundling-Strategien
Esbuild als Standard-Builder (schnellere Builds)

7.2.2.2 package.json

Enthält die Abhängigkeiten und Skripte zum Bauen, Testen und Starten der Anwendung:

{
  "name": "angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.0",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.2.2"
  }
}

7.3 Aktuelle Funktionen in Angular

Aktuelle Angular Versionen haben signifikante Änderungen und Verbesserungen:

7.3.1 Standalone-Komponenten als Standard

Seit Angular 14 wurden Standalone-Komponenten eingeführt, sind in Angular 17 der empfohlene Ansatz und seit Angular 19 der Default. NgModules werden für einfache Anwendungen nicht mehr benötigt, können aber nach wie vor verwendet werden.

// app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-app';
}

7.3.2 Verbesserte Konfigurationsdatei

Die Anwendungskonfiguration erfolgt über die neue app.config.ts:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

7.3.3 Signals für Reaktivität (eingeführt in Angular 16)

Angular 17 erweitert die Unterstützung für Signals, die eine Alternative zu RxJS für bestimmte reaktive Programmierungsansätze bieten, aber RxJS nicht ersetzen.

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  count = signal(0);
  
  increment() {
    this.count.update(value => value + 1);
  }
}

7.3.4 Deferrable Views (neu in Angular 17)

Angular 17 führt Deferrable Views ein, die das selektive Laden von Template-Teilen ermöglichen:

<!-- in einer Komponente-Template-Datei -->
@defer {
  <heavy-component />
} @loading {
  <p>Loading...</p>
} @error {
  <p>Error loading component</p>
}

7.3.5 Control Flow in Templates (neu in Angular 17)

Angular 17 führt eine neue, deklarativere Syntax für Control Flow ein:

@if (condition) {
  <p>Shown when true</p>
} @else {
  <p>Shown when false</p>
}

@for (item of items; track item.id) {
  <p>{{ item.name }}</p>
}

7.4 Empfohlene Projektstruktur für größere Anwendungen

Für größere Angular-Anwendungen wird folgende Struktur empfohlen:

7.5 Best Practices

Verwenden Sie Standalone-Komponenten anstelle von NgModules für einfachere Anwendungsstruktur.
Nutzen Sie Signals für reaktive UI-Status, während RxJS weiterhin für komplexe asynchrone Operationen verwendet wird.
Implementieren Sie Deferrable Views für bessere Performance durch selektives Laden.
Setzen Sie auf Typed Forms für bessere Typsicherheit in Formularen.
Verwenden Sie den Esbuild-Builder für schnellere Builds (ist in Angular 17 bereits standardmäßig aktiviert).
Nutzen Sie die neue Control Flow Syntax anstelle von NgIf, NgFor.
Verwenden Sie Server-Side Rendering (SSR) mit Angular Universal für bessere SEO und schnelleres initiales Laden.

7.6 Entwicklungsumgebung einrichten

Um ein neues Angular 17-Projekt zu erstellen, verwenden Sie folgende Befehle:

# Angular CLI installieren
npm install -g @angular/cli

# Neues Projekt erstellen (mit Standalone-Komponenten)
ng new my-app --standalone

# Entwicklungsserver starten
cd my-app
ng serve

Angular bietet eine moderne, effiziente Struktur für Webanwendungen mit Fokus auf:

Standalone-Komponenten anstelle von NgModules
Verbesserte Reaktivität durch Signals (ergänzend zu RxJS)
Optimierte Performance durch Deferrable Views und verbesserte Build-Tools
Moderne Template-Syntax mit @if/@for
Vereinfachte Konfiguration und Bootstrapping

Diese aktuellen Konzepte und Strukturen ermöglichen eine effizientere Entwicklung und verbesserte Performance in modernen Angular-Anwendungen.