Wie man eine skalierbare Angular-Anwendungsarchitektur aufbaut: Konzepte und Best Practices

In einer Angular-Anwendung ist die Organisation des Codes von grundlegender Bedeutung, um eine wartbare, skalierbare und effiziente Architektur zu gewährleisten. Ein zentrales Konzept in Angular ist die Verwendung von Modulen, die den Code in logische Einheiten unterteilen, die getrennt geladen und verwaltet werden können. Diese Module können als Wurzelsystem oder als Feature-Module organisiert werden, wobei jedes Modul eine bestimmte Funktionalität innerhalb der Anwendung kapselt.

Ein Angular-Projekt kann nur ein Wurzelmodul haben, aber mehrere Feature-Module, die zusätzliche Funktionalitäten bieten. Diese Feature-Module sind dabei von zentraler Bedeutung, da sie es ermöglichen, die Anwendung in eigenständige, wiederverwendbare Teile zu unterteilen. Die Aufteilung des Codes in Module sorgt für eine bessere Organisation und ermöglicht es, die Anwendung effizienter zu laden, indem nicht alle Komponenten und Services zu Beginn geladen werden müssen. Stattdessen werden nur die Teile geladen, die für die aktuelle Ansicht erforderlich sind, was zu einer signifikanten Reduzierung der Ladezeiten führt.

Wichtig ist auch, dass in Angular Dienste (Services) standardmäßig als Singletons bereitgestellt werden. Das bedeutet, dass ein Service für ein ganzes Modul oder die gesamte Anwendung einmalig erstellt wird. Wenn jedoch der Service auf Modulebene oder Komponentenniveau bereitgestellt wird, können mehrere Instanzen dieses Services existieren, was zu Problemen bei der Dependency Injection führen kann. Ein solches Verhalten muss mit Bedacht eingesetzt werden, da mehrere Instanzen eines Services innerhalb einer Vererbungshierarchie zu unerwartetem Verhalten führen können.

Ein weiterer wichtiger Aspekt beim Entwerfen einer Angular-Anwendung ist das bewusste Management der Ladezeiten und der Performance. Wie Studien zeigen, verlassen 53% der mobilen Nutzer eine Webseite, wenn die Ladezeit 3 Sekunden überschreitet. Gerade auf mobilen Geräten, auf denen ein großer Teil des Datenverkehrs stattfindet, sind schnelle Ladezeiten entscheidend. Um diese zu erreichen, sollte man bei der Architektur der Anwendung von Anfang an Lazy Loading einplanen. So können beispielsweise Geschäftsbereiche oder Nutzerrollen als Feature-Module implementiert werden. Diese Module werden dann nur bei Bedarf geladen, was die Anwendung optimiert und die Benutzererfahrung verbessert.

Zu beachten ist hierbei, dass es wichtig ist, die richtigen Module für die Lazy-Loading-Strategie auszuwählen. So könnte man beispielsweise für unterschiedliche Nutzerrollen unterschiedliche Feature-Module definieren. Ein Daten-Entry-Spezialist würde nur eine eingeschränkte Anzahl von Funktionen benötigen, während ein Manager Zugang zu erweiterten Funktionen hat. Das bedeutet, dass für jede Nutzerrolle nur die relevanten Module geladen werden, was nicht nur die Ladezeiten verringert, sondern auch die Komplexität der Anwendung reduziert.

Um eine wirklich skalierbare und wartbare Architektur zu entwickeln, ist es entscheidend, eine stateless, datengesteuerte Designstrategie zu verfolgen. Dies bedeutet, dass die Anwendung so strukturiert ist, dass sie ihren Zustand nicht intern speichert, sondern über externe, unveränderliche Datenquellen verwaltet wird. Ein solches Design fördert eine bessere Skalierbarkeit und Wartbarkeit, da es das Risiko von Fehlern und unerwartetem Verhalten verringert und die Arbeit mit Tools wie NgRx oder anderen State-Management-Lösungen erleichtert.

Die Implementierung von Lazy Loading und die Aufteilung der Anwendung in klare, modularisierte Einheiten stellt sicher, dass die Anwendung auch bei steigender Komplexität leistungsfähig bleibt und schnell auf die Bedürfnisse der Nutzer reagieren kann. Entwickler sollten dabei stets darauf achten, dass die Trennung von Funktionalitäten klar definiert ist und die Module so konzipiert werden, dass sie bei Bedarf nachgeladen werden können, ohne die Benutzererfahrung zu beeinträchtigen.

Wie man benutzerdefinierte Steuerungen in Angular-Formularen erstellt: Ein praktisches Beispiel

Die Erstellung benutzerdefinierter Formularsteuerelemente in Angular ermöglicht es, wiederverwendbare, modularisierte und anpassbare Eingabefelder zu implementieren. Diese Steuerelemente können für verschiedene Arten von Benutzereingaben verwendet werden, wobei ein gutes Beispiel die Implementierung eines "Lemon Rater" (Zitronenbewertungssteuerelements) darstellt. In diesem Kapitel wird Schritt für Schritt erklärt, wie ein solches Steuerelement in eine Angular-Anwendung integriert wird.

Zunächst wird ein neues Steuerelement namens LemonRaterComponent im Ordner user-controls erstellt. Dieses Steuerelement implementiert das ControlValueAccessor-Interface, das erforderlich ist, um das Steuerelement als benutzerdefiniertes Eingabefeld in Angular-Formularen zu integrieren. Das Interface sorgt dafür, dass die Interaktionen mit dem Steuerelement korrekt in den Formularwert übernommen werden.

In der Datei lemon-rater.component.ts wird das Interface wie folgt implementiert:

typescript
Copy code
export class LemonRaterComponent implements ControlValueAccessor {
  disabled = false;
  private internalValue: number;
  get value() {
    return this.internalValue;
  }
  onChanged: any = () => {};
  onTouched: any = () => {};
  writeValue(obj: any): void {
    this.internalValue = obj;
  }

  registerOnChange(fn: any): void {

    this.onChanged = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
}

Dieses Beispiel zeigt, wie man das Steuerelement mit den notwendigen Funktionen ausstattet, um den Wert zu lesen und zu schreiben sowie auf Änderungen und Berührungen zu reagieren. Das Attribut writeValue sorgt dafür, dass der Wert des Steuerelements mit dem Formular synchronisiert wird, während registerOnChange und registerOnTouched dafür verantwortlich sind, dass das Steuerelement auf Änderungen im Formular reagiert.

Zusätzlich zur Implementierung des Interfaces müssen wir das Steuerelement bei Angulars Formularsystem registrieren. Dies geschieht mit dem NG_VALUE_ACCESSOR-Provider, der das Steuerelement an das Formular bindet:

typescript
Copy code
@Component({

  selector: 'app-lemon-rater',
  templateUrl: 'lemon-rater.component.html',
  styleUrls: ['lemon-rater.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => LemonRaterComponent),
      multi: true,
    },
  ],
  standalone: true,
  imports: [NgClass],
})

export class LemonRaterComponent implements ControlValueAccessor {

  // ... Implementierung wie oben
}

In diesem Fall sorgt die multi: true-Eigenschaft dafür, dass das Steuerelement in das Formularsystem integriert wird und mehrere Provider für den gleichen Token verwendet werden können.

Der nächste Schritt besteht darin, eine benutzerdefinierte Bewertungslogik zu erstellen, die es dem Benutzer ermöglicht, eine Bewertung basierend auf seiner Auswahl festzulegen. Diese Logik wird in der Methode setRating implementiert:

typescript
Copy code
setRating(lemon: any) {
  if (!this.disabled) {
    this.internalValue = lemon.value;
    this.ratingText = lemon.text;
    this.onChanged(lemon.value);
    this.onTouched();
  }
}

Hierbei wird die Bewertung in einer internen Variable gespeichert, und sowohl der angezeigte Text als auch der Wert werden mit den Formularereignissen synchronisiert.

css
Copy code
.lemons .lemon:hover~.lemon #fill-area {
  fill: #d8d8d8 !important;
}

.lemons .lemon.selected #fill-area {

  fill: #ffe200 !important;
}

Die CSS-Regeln sorgen dafür, dass sich das Aussehen der Steuerelemente dynamisch anpasst, wenn der Benutzer mit der Maus über die Elemente fährt oder sie auswählt.

Nachdem das Steuerelement vollständig implementiert ist, wird es in einem Formular verwendet. In diesem Fall wird der LemonRaterComponent in das Profil-Formular integriert, um den „Limoncu“-Level eines Mitarbeiters zu erfassen. Der Wert des level-Formularfeldes wird mit dem LemonRater synchronisiert:

typescript
Copy code
level: [user?.level || 0, Validators.required]

In der HTML-Datei des Formulars wird das benutzerdefinierte Steuerelement als reguläres Angular-Formularsteuerelement eingebunden:

html
Copy code
<app-lemon-rater formControlName="level"></app-lemon-rater>

Auf diese Weise wird das benutzerdefinierte Steuerelement nahtlos in das Formular integriert, sodass es wie jedes andere Formularsteuerelement verwendet werden kann.

Ein weiterer Aspekt, den man beachten sollte, ist die Flexibilität von benutzerdefinierten Steuerelementen. Sie können für eine Vielzahl von Anwendungsfällen angepasst werden, und es gibt viele Möglichkeiten, sie zu erweitern. Zum Beispiel könnten zusätzliche Funktionen wie die Möglichkeit, benutzerdefinierte Bewertungsstufen hinzuzufügen, oder die Implementierung von animierten Übergängen beim Hover-Ereignis in Betracht gezogen werden.

Es ist auch wichtig zu verstehen, dass die Verwendung benutzerdefinierter Steuerelemente in Formularen die Wiederverwendbarkeit von Code fördert. Anstatt immer wieder dieselben Formularelemente zu schreiben, können Entwickler benutzerdefinierte Steuerelemente erstellen, die in verschiedenen Formularen und Anwendungen eingesetzt werden können. Dies spart nicht nur Zeit, sondern macht den Code auch übersichtlicher und wartungsfreundlicher.