📚 Angular Style Guide 2025 – Konventionen, Struktur & Teamflow

(Schreib Code, den du auch in 6 Monaten noch verstehst – und dein Team auch)

Ein konsistenter Stil macht Angular-Projekte wartbar, lesbar und teamfähig.
Hier kommt dein Guide für modernen Angular-Code im Jahr 2025.

1️⃣ Dateibenennung & Struktur

• user-profile.component.ts
• auth.service.ts
• core/, shared/, features/, ui/, state/ als Ordnerstruktur

📁 Beispiel:

src/
├── app/
│   ├── core/
│   ├── shared/
│   ├── features/
│   │   └── dashboard/
│   └── ui/

2️⃣ Komponentenstruktur

• Nutze Standalone Components (standalone: true)
• Trenne Smart (logikreich) von Dumb (präsentierend)

@Component({
  selector: 'app-user-card',
  standalone: true,
  ...
})

3️⃣ Naming Conventions

• PascalCase für Komponenten, Klassen, Interfaces
• camelCase für Variablen, Methoden, Signale
• Kein Präfix wie myCompanyComponent, sondern klar & kontextbasiert

4️⃣ Services, Signals, State

• Keine Services ohne klaren Zweck
• Nutze signal() und effect() statt übertriebener Observable-Logik
• State in Feature-Store kapseln

export const selectedUser = signal<User | null>(null);

5️⃣ HTML & Template Style

• Verwende @if, @for statt *ngIf, *ngFor
• Nutze async-Pipe, wo möglich
• Kein komplexes Binding im Template → lieber im Component Code vorbereiten

6️⃣ Testing & Docs

• Jede Komponente = Unit-Test + Storybook
• Dokumentiere komplexe Abläufe mit README.md im Feature-Ordner

Fazit

Dein Code ist nicht nur für dich – sondern auch für andere Entwickler.
Ein sauberer Style spart Nerven, Zeit und Bugs.

✅ Nächster Beitrag:
⚙️ Angular API-Integration – Clean, Typed, Testbar