feat(refactor-frontend-advanced): refactor 02_6_angular_stylesheet.md…

…, 02_7_angular_unit_test.md, 02_8_angular_directives.md. 02_9_angular_control_flow.md, 02_10_angular_services.md, 02_11_angular_modules.md, 02_12_angular_routing.md. 02_13_angular_rendering.md and began refactoring of 02_14_angular_lazy_loading.md (deferred)

content/en/docs/web/angular/02_10_angular_services.md

@@ -34,5 +34,6 @@ export class WeaponService {
 ```
 
 ## providedIn
-Innerhalb der `@Injectable`-Annotation findet sich immer die Konfiguration `providedIn`. Diese bestimmt, innerhalb welchen Scopes sich der Service injizieren lässt. Standardmässig hat die Konfiguration 
-den Wert `root` inne, der aussagt, dass der Service innerhalb der gesamten Applikation injiziert werden kann. Insofern ein Service nur in einem bestimmten Teil der Applikation injiziert werden soll, kann der Scope mithilfe von `providedIn` angepasst werden.  
+
+Innerhalb der `@Injectable`-Annotation findet sich immer die Konfiguration `providedIn`. Diese bestimmt, innerhalb welchen Scopes sich der Service injizieren lässt. Standardmässig hat die Konfiguration
+den Wert `root` inne, der aussagt, dass der Service innerhalb der gesamten Applikation injiziert werden kann. Insofern ein Service nur in einem bestimmten Teil der Applikation injiziert werden soll, kann der Scope mithilfe von `providedIn` angepasst werden.

content/en/docs/web/angular/02_11_angular_modules.md

@@ -15,7 +15,7 @@ description: >
 
 ## Modules
 
-Wichtig: Dieser Abschnitt ist im Rahmen der Veröffentlichung von Angular 18 inzwischen mehr oder weniger überflüssig, da seit Angular 18 alle Komponenten standardmässig als standalone behandelt werden. Da es aber nach wie vor möglich ist, mit Modulen zu arbeiten, ist es dennoch empfehlenswert, sich diesen Abschnitt kurz zu Gemüte zu führen. 
+Wichtig: Dieser Abschnitt ist im Rahmen der Veröffentlichung von Angular 18 inzwischen mehr oder weniger überflüssig, da seit Angular 18 alle Komponenten standardmässig als standalone behandelt werden. Da es aber nach wie vor möglich ist, mit Modulen zu arbeiten, ist es dennoch empfehlenswert, sich diesen Abschnitt kurz zu Gemüte zu führen.
 
 In Angular ist ein Modul ein Mechanismus, um Components, Directives und Pipes und Services zu gruppieren, die miteinander zusammenhängen. Auf diese Weise können sie mit anderen Modulen kombiniert werden, um eine Anwendung zu erstellen.
 

content/en/docs/web/angular/02_12_angular_routing.md

@@ -63,7 +63,7 @@ const routes: Routes = [
 ];
 ```
 
-Seit Angular 18 muss in der  `app.component.ts`-Datei `RouterOutlet` in den imports hinzugefügt werden, da das Routing ansonsten nicht funktioniert. 
+Seit Angular 18 muss in der `app.component.ts`-Datei `RouterOutlet` in den imports hinzugefügt werden, da das Routing ansonsten nicht funktioniert.
 
 ```typescript
 import { Component } from '@angular/core';
@@ -208,13 +208,17 @@ Beispielsweise:
 ```
 
 ## Resolvers
-Ein Resolver ist ein Interface, welches von Klassen als Daten-Provider implementiert werden kann. Ein solcher Provider kann in zusammenarbeit mit dem Router verwendet werden, um Daten während der navigation zu liefern. 
-Es gibt in jedem Resolver eine `resolve()`-Methode. Der Router wartet jeweils, bis die Daten geliefert sind, bevor die Route aktiviert wird. Nachfolgend ein Beispiel für einen Resolver: 
+
+Ein Resolver ist ein Interface, welches von Klassen als Daten-Provider implementiert werden kann. Ein solcher Provider kann in zusammenarbeit mit dem Router verwendet werden, um Daten während der navigation zu liefern.
+Es gibt in jedem Resolver eine `resolve()`-Methode. Der Router wartet jeweils, bis die Daten geliefert sind, bevor die Route aktiviert wird. Nachfolgend ein Beispiel für einen Resolver:
 
 ```typescript
 interface Resolve<T> {
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): MaybeAsync<T | RedirectCommand>;
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+  ): MaybeAsync<T | RedirectCommand>;
 }
 ```
 
-Genauere Infos zu Resolvern findest du in der Angular-Dokumentation: [Resolvers](https://angular.dev/api/router/Resolve)
+Genauere Infos zu Resolvern findest du in der Angular-Dokumentation: [Resolvers](https://angular.dev/api/router/Resolve)

content/en/docs/web/angular/02_13_angular_rendering.md

@@ -9,9 +9,10 @@ description: >
 ---
 
 ### Ziele
-- Du weisst, was Server Side Rendering ist und welche Vorteile dieses bietet. 
-- Du weisst, was Static Site Generation ist und welche Vorteile diese bietet. 
-- Du kennst das Konzept der Hydration und weisst, wie man diese für ein Angular-Projekt aktiviert. 
+
+- Du weisst, was Server Side Rendering ist und welche Vorteile dieses bietet.
+- Du weisst, was Static Site Generation ist und welche Vorteile diese bietet.
+- Du kennst das Konzept der Hydration und weisst, wie man diese für ein Angular-Projekt aktiviert.
 
 ## Server Side Rendering (SSR)
 
@@ -28,10 +29,12 @@ Die Hauptvorteile von SSR im Vergleich zu clientseitigem Rendering (CSR) sind:
 Seit Angular 17 muss man keine speziellen Schritte mehr durchführen, um das Server-Side-Rendering in seine Angular-Applikaton zu integrieren.
 Wird ein neues Angular-Projekt mit `ng new <>` generiert, wird seit Angular 17 direkt beim Generieren gefragt, ob SSR für das Projekt aktiviert werden soll.
 
-Um SSR zu einem bereits existierenden Angular-Projekt hinzuzufügen, kann man den folgenden Befehl ausführen: 
+Um SSR zu einem bereits existierenden Angular-Projekt hinzuzufügen, kann man den folgenden Befehl ausführen:
+
 ```shell
 ng add @angular/ssr
 ```
+
 Diese Befehle erstellen und aktualisieren den Anwendungscode, um SSR zu aktivieren, und fügen dem Projekt strukturspezifische Dateien hinzu.
 
 ### Projektstruktur
@@ -55,16 +58,16 @@ Der wesentliche Unterschied liegt im Ansatz, dass Seiten als statischer Inhalt b
 Wenn die für das serverseitige Rendering erforderlichen Daten bei allen Benutzern konsistent bleiben, erweist sich die Strategie des Prerenderings als wertvolle Alternative.
 Anstatt Seiten dynamisch für jede Benutzeranfrage zu rendern, geht das Prerendering proaktiv vor und rendert sie im Voraus.
 
-Insofern ein Angular-Projekt mit SSR-Funktionalitäten erstellt wird oder SSR zu einem bestehenden Angular-Projekt hinzugefügt wird, wird auch automatisch SSG aktiviert. 
-Es ist möglich, SSG je nach Wunsch ein- oder auszuschalten. Das lässt sich in der `angular.json`-Datei bewerkstelligen: 
+Insofern ein Angular-Projekt mit SSR-Funktionalitäten erstellt wird oder SSR zu einem bestehenden Angular-Projekt hinzugefügt wird, wird auch automatisch SSG aktiviert.
+Es ist möglich, SSG je nach Wunsch ein- oder auszuschalten. Das lässt sich in der `angular.json`-Datei bewerkstelligen:
 
 ```json
 {
   "architect": {
     "build": {
       "options": {
         "server": "src/main.server.ts",
-        //Mithilfe des "prerender"-Settings lässt sich SSG für das Projekt ein- oder ausschalten  
+        //Mithilfe des "prerender"-Settings lässt sich SSG für das Projekt ein- oder ausschalten
         "prerender": false,
         "ssr": {
           "entry": "server.ts"
@@ -87,15 +90,15 @@ Es ist ebenfalls möglich, nur SSG ohne SSR zu verwenden. Die Konfiguration sieh
           "routesFile": "prerender-routes.txt"
           "discoverRoutes": false
         },
-        //Mithilfe des "ssr"-Settings lässt sich SSR für das Projekt ein- oder ausschalten 
+        //Mithilfe des "ssr"-Settings lässt sich SSR für das Projekt ein- oder ausschalten
         "ssr": false
       }
     }
   }
 }
 ```
 
-Um zu prüfen, ob alles funktioniert wie gewünscht, kannst du das Projekt mit dem folgenden Befehl lokal builden. 
+Um zu prüfen, ob alles funktioniert wie gewünscht, kannst du das Projekt mit dem folgenden Befehl lokal builden.
 
 ```shell
 ng build

content/en/docs/web/angular/02_8_angular_directives.md

@@ -136,8 +136,9 @@ export class TriumphsComponent {
 }
 ```
 
-Wenn man den Index bei einem `*ngFor` benötigt, kann dieser sehr einfach angegeben werden. Dazu muss man nach dem `*ngFor` den Code `; let i = index` hinzufügen. Nun kann man in den Elementen innerhalb des `*ngFor` auf den Index der Elemente zu greifen. 
-Der Index ist insofern relevant, dass man einzelne Elemente anhand dessen identifizieren kann, zudem ist direkt ersichtlich, welchen Index das gerenderte Element innehat. 
+Wenn man den Index bei einem `*ngFor` benötigt, kann dieser sehr einfach angegeben werden. Dazu muss man nach dem `*ngFor` den Code `; let i = index` hinzufügen. Nun kann man in den Elementen innerhalb des `*ngFor` auf den Index der Elemente zu greifen.
+Der Index ist insofern relevant, dass man einzelne Elemente anhand dessen identifizieren kann, zudem ist direkt ersichtlich, welchen Index das gerenderte Element innehat.
+
 ```html
 <div *ngFor="let triumph of triumphs; let i = index">
   <p>{{ triumph }}, {{ i }}</p>

content/en/docs/web/angular/02_9_angular_control_flow.md

@@ -7,10 +7,11 @@ date: 2024-02-16
 description: >
   Modul #F6 - Angular - Neuer Control Flow in Angular
 ---
+
 ### Ziele
-- Du weisst, was ein control flow ist und wofür dieser verwendet wird. 
-- Du kennst die relevanten Änderungen der control flows, die im Rahmen von Angular 17 entstanden sind. 
 
+- Du weisst, was ein control flow ist und wofür dieser verwendet wird.
+- Du kennst die relevanten Änderungen der control flows, die im Rahmen von Angular 17 entstanden sind.
 
 ## Control Flow
 
@@ -110,7 +111,7 @@ Es ist auch möglich, den Index des aktuellen Elements zu erhalten, das wird mit
 
 In diesem Beispiel gibt `{{$index}}` den Index des aktuellen Elements in der Sammlung zurück und `{{item}}` gibt den Wert des aktuellen Elements zurück.
 Dies ist besonders nützlich, wenn du sowohl den Index als auch den Wert des Elements in deinem Template benötigst.
-Relevant ist hierbei, dass im Vergleich zu früher das Tracken des Index nicht mehr optional ist, sondern bei jeder Verwendung eines `@for`-Flows benötigt wird. 
+Relevant ist hierbei, dass im Vergleich zu früher das Tracken des Index nicht mehr optional ist, sondern bei jeder Verwendung eines `@for`-Flows benötigt wird.
 
 Passend zum `@for` gibt es `@empty`, welches einen Standardwert für den Fall bereitstellt, dass es keine Elemente gibt, über die iteriert werden kann. Hier ein Beispiel dazu: