migrate app

.gitignore

@@ -40,3 +40,10 @@ build/
 ### nix / direnv
 .direnv
 result
+
+### jetty
+**/.jetty/home
+**/.jetty/base
+
+### Angualr Demo ###
+**/node_modules

demo/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

demo/.gitignore

@@ -0,0 +1,43 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db

demo/angular.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "server": "src/main.server.ts",
+            "outputMode": "server",
+            "ssr": {
+              "entry": "src/server.ts"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            },
+            "development": {
+              "buildTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

demo/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "demo",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "serve:ssr:demo": "node dist/demo/server/server.mjs"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "packageManager": "npm@11.6.2",
+  "dependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/platform-server": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@angular/ssr": "^21.0.2",
+    "express": "^5.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.0.2",
+    "@angular/cli": "^21.0.2",
+    "@angular/compiler-cli": "^21.0.0",
+    "@types/express": "^5.0.1",
+    "@types/node": "^20.17.19",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

demo/src/app/Auto.ts

@@ -0,0 +1,18 @@
+export class Auto {
+  constructor(
+    private _hersteller: string,
+    private _typ: string,
+    private _kennzeichen: string,
+  ) {
+
+  }
+
+  get typ(): string { return this._typ; }
+  set typ(typ: string) { this._typ = typ; }
+
+  get hersteller(): string { return this._hersteller; }
+  set hersteller(hersteller: string) { this._hersteller = hersteller; }
+
+  get kennzeichen(): string { return this._kennzeichen; }
+  set kennzeichen(kennzeichen: string) { this._kennzeichen = kennzeichen; }
+}

demo/src/app/app.config.server.ts

@@ -0,0 +1,12 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(withRoutes(serverRoutes))
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

demo/src/app/app.config.ts

@@ -0,0 +1,12 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes), provideClientHydration(withEventReplay())
+  ]
+};

demo/src/app/app.html

@@ -0,0 +1,19 @@
+<style></style>
+
+<main class="main">
+  <div class="content">
+    <div class="uebung-6">
+      <app-create-auto (autoInitializedEvent)="setAuto($event)"></app-create-auto>
+      <div> Typ: {{ auto?.typ ?? "N/A" }} </div>
+      <div> Hersteller: {{ auto?.hersteller ?? "N/A" }} </div>
+      <div> Kennzeichen: {{ auto?.kennzeichen ?? "N/A" }} </div>
+    </div>
+
+    <div class="praktikum-6">
+      <app-display-html html="<b>initialer text</b>"></app-display-html>
+    </div>
+
+  </div>
+</main>
+
+<router-outlet />

demo/src/app/app.routes.server.ts

@@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];

demo/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

demo/src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo');
+  });
+});

demo/src/app/app.ts

@@ -0,0 +1,23 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { Auto } from './Auto';
+import { CreateAutoComponent } from './create-auto/create-auto';
+import { DisplayHtmlComponent } from './display-html/display-html';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, CreateAutoComponent, DisplayHtmlComponent],
+  templateUrl: './app.html',
+  styleUrl: './app.css'
+})
+export class App {
+  protected readonly title = signal('demo');
+
+  constructor(public auto?: Auto) {
+
+  }
+
+  setAuto(auto: Auto) {
+    this.auto = auto;
+  }
+}

demo/src/app/create-auto/create-auto.html

@@ -0,0 +1 @@
+<button (click)="createAuto()">Auto erstellen</button>

demo/src/app/create-auto/create-auto.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateAuto } from './create-auto';
+
+describe('CreateAuto', () => {
+  let component: CreateAuto;
+  let fixture: ComponentFixture<CreateAuto>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateAuto]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateAuto);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/create-auto/create-auto.ts

@@ -0,0 +1,17 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { Auto } from '../Auto';
+
+@Component({
+  selector: 'app-create-auto',
+  imports: [],
+  templateUrl: './create-auto.html',
+  styleUrl: './create-auto.css',
+})
+export class CreateAutoComponent {
+  @Output() autoInitializedEvent: EventEmitter<Auto> = new EventEmitter<Auto>();
+
+  createAuto() {
+    var auto = new Auto("BMW", "e36", "DE-RS-7331");
+    this.autoInitializedEvent.emit(auto);
+  }
+}

demo/src/app/display-html/display-html.html

@@ -0,0 +1,4 @@
+<div>
+  <p innerHtml="{{ html }}"></p>
+  <button (click)="updateHtml()">Update Html</button>
+</div>

demo/src/app/display-html/display-html.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DisplayHtml } from './display-html';
+
+describe('DisplayHtml', () => {
+  let component: DisplayHtml;
+  let fixture: ComponentFixture<DisplayHtml>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DisplayHtml]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DisplayHtml);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

demo/src/app/display-html/display-html.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-display-html',
+  imports: [],
+  templateUrl: './display-html.html',
+  styleUrl: './display-html.css',
+})
+export class DisplayHtmlComponent {
+  html: string = '';
+
+  updateHtml() {
+    this.html = "<i>neuer text ???</i>";
+  }
+}

demo/src/index.html

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

demo/src/main.server.ts

@@ -0,0 +1,8 @@
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { config } from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(App, config, context);
+
+export default bootstrap;

demo/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

demo/src/server.ts

@@ -0,0 +1,68 @@
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
+import express from 'express';
+import { join } from 'node:path';
+
+const browserDistFolder = join(import.meta.dirname, '../browser');
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/{*splat}', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.use(
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+    redirect: false,
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use((req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next(),
+    )
+    .catch(next);
+});
+
+/**
+ * Start the server if this module is the main entry point, or it is ran via PM2.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url) || process.env['pm_id']) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, (error) => {
+    if (error) {
+      throw error;
+    }
+
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+/**
+ * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
+ */
+export const reqHandler = createNodeRequestHandler(app);

demo/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

demo/tsconfig.app.json

@@ -0,0 +1,17 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
+  ]
+}

demo/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

demo/tsconfig.spec.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
+  ]
+}

docs/uebungen/uebung-5.tex

@@ -9,12 +9,63 @@
 
 \begin{exercises}
     \item Worum handelt es sich bei Facelets und welche Vorteile bietet die Verwendung von Facelets?
+
+    Facelets sind eine Tag Library, die zusätzliche Tags bereitstellt.
+    Mit Facelets können Templates erstellt werden, oder wiederholte Ausgaben von html deklerativ in xml erstellt werden.
+
     \item Wie können Templates mit Facelets erstellt bzw. verwendet werden?
+
+    In Templates wird der generelle Aufbau einer Seite definiert. Dies erfolgt wie in einer normale xhtml Seite, nur mit Platzhaltern (\texttt{<ui:insert>}):
+    \begin{xmlCode}
+    ...
+    <body>
+        <ui:insert name="header">
+            <ui:include src="default-header.xhtml">
+        </ui:insert>
+        <ui:insert name="content">
+        </ui:insert>
+        <ui:insert name="footer">
+        </ui:insert>
+    </body>
+    ...
+    \end{xmlCode}
+
+    Verwendet wird ein Template dann, in dem man mit \texttt{<ui:composition>} das template angibt, und mit ui:define die Platzhalter fŭllt:
+    \begin{xmlCode}
+    <ui:composition template="template.xhtml">
+        <ui:define name="content">
+            <p>hello world</p>
+        </ui:define>
+    </ui:composition>
+    \end{xmlCode}
+
     \item Worum handelt es sich bei PrimeFaces?
+
+    PrimeFaces stellen eine Komponentenbibliothek dar, die Komponenten mit AJAX-Unterstützung anbieten.
+
     \item Welcher Namespace wird für die Verwendung von PrimeFaces benutzt?
+
+    \texttt{xmlns:p}
+
     \item Wie kann per Ajax auf die Eingabe eines Tastenklicks reagiert werden?
+
+    Indem man auf das \textit{keydown} Event reagiert:
+
+    \begin{xmlCode}
+    <p:ajax event="keydown" .../>
+    \end{xmlCode}
+
     \item Zählen Sie vier PrimeFaces-Komponenten auf und geben deren Funktion an.
+
+    \begin{itemize}
+        \item \texttt{<p:autocomplete>}: Ermöglicht completion-Vorschläge für ein Input-Feld
+        \item \texttt{<p:calendar>}: Kalendar-Datum Eingabe-Element
+        \item \texttt{<p:gmap>}: Google-Maps Element
+        \item \texttt{<p:textEditor>}: Ein Wysiwyg Texteditor
+    \end{itemize}
+
     \item Erstellen Sie eine JSF-Seite, die eine Klappliste anzeigt in der einer der Werte „Farben“, „Zahlen“ oder „Buchstaben“ ausgewählt werden kann. Darunter befindet sich eine Klappliste die zunächst nur den Inhalt „---“ hat. Nach einer Auswahl in der ersten Klappliste soll ein AJAX-Request generiert werden, der den Inhalt der zweiten Klappliste setzt (denken Sie sich zu den in Klappliste 1 auswählbaren Werten passende Werte aus).
+
 \end{exercises}
 
 \end{document}

docs/uebungen/uebung-6.tex

@@ -0,0 +1,248 @@
+\documentclass{uebung}
+
+\author{Linus Nagel}
+\chapter{5}
+
+\begin{document}
+
+\maketitle
+
+\begin{exercises}
+    \item Worin bestehen die Vorteile von Single Page Applications?
+
+    \begin{itemize}
+        \item Geringerer Web Traffic: Höhere Performance durch eine geringere Datenmenge bei der Kommunikation: Mobile Devices profitieren von der Reduzierung des notwendigen online Volumens.
+        \item Kein 'Flackern' der Seite, da sie nicht jedes Mal komplett neu geladen wird.
+        \item Durch die direkte Reaktion des Frontends auf Bedienereingaben besteht insgesamt eine bessere User Experience als bei klassischen Web Applications.
+        \item Solange keine Informationen nachgeladen werden müssen, wird ein Offline-Betrieb ermöglicht.
+    \end{itemize}
+
+    \item Erläutern Sie die Vorteile von TypeScript gegenüber JavaScript.
+
+    \begin{itemize}
+        \item Statische Typisierung
+        \item TypeScript ermöglicht die Nutzung vieler aus der Objektorientierung bekannten Sprachkonstrukte
+        \item TypeScript ermöglicht die Verwendung von Lambda-Ausdrücken und Dekoratoren (in Java Annotation genannt).
+    \end{itemize}
+
+    \item Wie werden in TypeScript Klassen erstellt?
+
+    z.B. so:
+
+    \begin{minted}{ts}
+    class Person {
+        constructor(private _name: string) {
+        }
+        get name(): string {
+            return this._name;
+        }
+        set name(name: string) {
+            this._name = name;
+        }
+    }
+    \end{minted}
+
+    \item Wie werden in TypeScript Konstruktoren erstellt? Können mehrere Konstruktoren erstellt werden?
+
+    Es kann nur ein constructor erstellt werden. Dieser kann dafür dann aber default-Werte haben, damit der caller nicht alle Attribute setzen muss:
+
+    \begin{minted}{ts}
+    class Person {
+        constructor(private _name: string = "Max Mustermann") {
+        }
+    }
+    \end{minted}
+
+    \item Wie werden in TypeScript Methoden erstellt?
+
+    \begin{minted}{ts}
+    getStuff(param: paramType = paramDefault): StuffType {
+        ...
+        return ...
+    }
+    \end{minted}
+
+    \item Worum handelt es sich, wenn von einem ist Dekorator gesprochen wird?
+
+    Schlüsselwörter, die mit dem Zeichen @ beginnen. Durch in runden Klammern folgende Attribute können Dekoratoren noch weitere Konfigurationsdaten aufnehmen.
+
+    \item Beschreiben Sie den Aufbau einer Komponente.
+
+    \begin{minted}{ts}
+    @Component({
+        selector: '...',
+        standalone: true,
+        imports: [...],
+        templateUrl: '...',
+        styleUrls: ['..']
+    })
+    export class NameDerKomponente {
+        ...
+    }
+    \end{minted}
+
+    In @Component wird zunächst im Attribut selector ein Selektor angegeben, der die Elemente im DOM auswählt, an die die Komponente gebunden werden soll.
+    Dabei handelt es sich um einen Namen der Komponente, der an anderer Stelle als Tag verwendet werden kann.
+    An der Stelle, an der dieser Selektor angegeben wird, wird zur Laufzeit der View der Komponente eingefügt.
+    Das auf den Selektor matchende Element wird dabei als Host- Element bezeichnet.
+    Wird als selector nur ein Elementname angegeben, wird ein entsprechendes HTML-Tag gesucht und dessen Inhalt durch den View der Komponente ersetzt.
+    In der eigentlichen Klasse der Komponente wird das Datenmodell und die Businesslogik der Komponente erstellt.
+
+    \item Worum handelt es sich bei Lifecycle-Hooks?
+
+    Methoden, die, falls sie vom Entwickler definiert wurden, automatisch aufgerufen werden (Callback-Methoden). Sobald eine Komponente den Zustand wechselt, wird die entsprechende Lifecycle-Hook-Methode aufgerufen.
+
+    \item Welchen Zweck erfüllt das Angular-CLI?
+
+    Das CLI umfasst eine Reihe von Befehlen für sich wiederholende Tätigkeiten, so dass Entwicklern die manuelle Erstellung dieser Dateien abgenommen wird. Mit dem CLI können die Bestandteile der Angular-Anwendung, wie beispielsweise Komponenten oder Klassen, bis hin zum ganzen Angular-Projekt erstellt werden, und stellt somit das Standardvorgehen zum Erstellen
+projektrelevanter Dateien dar.
+
+    \item Worum handelt es sich bei der Interpolation?
+
+    Bei der Interpolation können Daten aus der Komponentenklasse im Template angezeigt werden.
+
+    z.B:
+
+    Komponent:
+    \begin{minted}{ts}
+    export class AppComponent {
+        location: string;
+        constructor(){ this.location = 'Welt'; }
+    }
+    \end{minted}
+
+    Template:
+    \begin{minted}{ng2}
+    Hallo {{ location }}!
+    \end{minted}
+
+    \item Wie kann durch ein Property Binding ein Attribut einer Kind-Komponente gesetzt werden? Geben Sie ein Beispiel hierfür an.
+
+    Im Template der Root-Komponente:
+
+    \begin{minted}{ng2}
+    <kind-komponente [Eigenschaft der Kind-Komponente]="Eigenschaft der Eltern-Komponente">
+        ..
+    </kind-komponente>
+    \end{minted}
+
+    \item Wie wird ein Event-Binding mit einem JavaScript-Event erstellt? Geben Sie ein Beispiel mit einem Knopf und dem click-Event an.
+
+    Template:
+    \begin{minted}{ng2}
+    <button (click)="verarbeiteKlick()">Klick</button>
+    Anzahl der Klicks: {{ klickZaehler }}
+    \end{minted}
+
+    Komponent:
+    \begin{minted}{ts}
+     export class EventComponent implements OnInit {
+        klickZaehler!: number;
+        ngOnInit() { this.klickZaehler = 0; }
+        verarbeiteKlick() {
+            this.klickZaehler++;
+        }
+    }
+    \end{minted}
+
+    \item Beschreiben Sie das Vorgehen, um ein selbstdefiniertes Event in der Kind-Komponente zu erstellen und in der Eltern-Komponente zu empfangen.
+
+    In der Kind-Komponente muss zunächst das event erstellt werden:
+    \begin{minted}{ts}
+    @Output() event = new EventEmitter();
+    \end{minted}
+
+    Dieses kann dann in der Eltern-Komponente verwendet verwenden:
+    \begin{minted}{ng2}
+    <tag (event)="funktionsname()">...
+    \end{minted}
+
+    Das event kann wie folgt aktiviert werden, damit die Eltern-Komponente dann auch das Event bekommt:
+    \begin{minted}{ts}
+    this.event.emit();
+    \end{minted}
+
+    \item Erklären Sie die Verwendung der Strukturdirektive *ngIf.
+
+    Die Strukturdirektive *ngIf wird verwendet, um ein DOM Element nur unter einer Bedingung einzufügen.
+
+    \item Beschreiben Sie, wie die Strukturdirektive *ngFor verwendet werden kann.
+
+    Die Strukturdirektive *ngFor wird verwendet, um ein DOM Element bei der Instanziierung des Templates mehrfach einzufügen.
+
+    \item Erstellen Sie eine TypeScript Klasse namens Auto mit den Attributen Hersteller, Typ und Kennzeichen vom Typ string.
+
+    \begin{minted}{ts}
+    class Auto {
+      constructor(
+        private _hersteller: string,
+        private _typ: string,
+        private _kennzeichen: string,
+      ) {
+
+      }
+
+      get typ(): string { return this._typ; }
+      set typ(typ: string) { this._typ = typ; }
+
+      get hersteller(): string { return this._hersteller; }
+      set hersteller(hersteller: string) { this._hersteller = hersteller; }
+
+      get kennzeichen(): string { return this._kennzeichen; }
+      set kennzeichen(kennzeichen: string) { this._kennzeichen = kennzeichen; }
+    }
+    \end{minted}
+
+    \item Erstellen Sie ein Programm in dem im Template einer Komponente ein Knopf erstellt wird, der beim click-Event eine Methode aufruft. In dieser Methode soll ein Objekt vom Typ Auto (siehe vorherige Aufgabe) erstellt werden. Dieses Objekt soll anschließend per Event-Binding an eine Eltern-Komponente gesendet und dort in einem Attribut gespeichert werden. Abschließend geben Sie die Attribute des empfangenen Auto-Objekts im Template der Eltern-Komponente aus. Bei der Ausgabe soll beachtet werden, dass es zu keinem Fehler kommen darf (siehe Konsole), falls das Event noch nicht empfangen wurde und das Auto-Attribut (noch) undefined ist. \textit{Die Konsole wird in den meisten Browsern über F12 oder CMD-alt-i geöffnet.}
+
+    Main page:
+    \begin{minted}{ts}
+    export class AppComponent {
+      title = 'demo';
+
+      constructor(public auto?: Auto) {
+
+      }
+
+      setAuto(auto: Auto) {
+        this.auto = auto;
+      }
+    }
+    \end{minted}
+
+    Main page template:
+    \begin{minted}{ng2}
+    <main class="main">
+      <div class="content">
+        <create-auto (autoInitializedEvent)="setAuto($event)"/>
+        <div> Typ: {{ auto?.typ ?? "N/A" }} </div>
+        <div> Hersteller: {{ auto?.hersteller ?? "N/A" }} </div>
+        <div> Kennzeichen: {{ auto?.kennzeichen ?? "N/A" }} </div>
+      </div>
+    </main>
+    \end{minted}
+
+    Auto erstellen kompolnente:
+    \begin{minted}{ts}
+    export class CreateAutoComponent {
+      constructor(
+        @Output() public autoInitializedEvent: EventEmitter<Auto>
+      ) {
+        autoInitializedEvent = new EventEmitter<Auto>();
+      }
+
+      createAuto() {
+        var auto = new Auto("BMW", "e36", "DE-gho-st");
+        this.autoInitializedEvent.emit(auto);
+      }
+    }
+    \end{minted}
+
+    Auto erstellen template:
+    \begin{minted}{ng2}
+    <button (click)="createAuto">Auto erstellen</button>
+    \end{minted}
+
+\end{exercises}
+
+\end{document})

docs/uebungen/uebung.cls

@@ -15,6 +15,10 @@
 \RequirePackage{graphicx}
 \RequirePackage{amsmath}
 \RequirePackage{hyperref}
+\RequirePackage{minted}
+
+% Minted config
+\usemintedstyle{default}
 
 % Define chapter counter for exercise sheets
 \newcounter{chapter}

flake.lock

@@ -5,11 +5,11 @@
         "nixpkgs-lib": "nixpkgs-lib"
       },
       "locked": {
-        "lastModified": 1762980239,
+        "lastModified": 1763759067,
-        "narHash": "sha256-8oNVE8TrD19ulHinjaqONf9QWCKK+w4url56cdStMpM=",
+        "narHash": "sha256-LlLt2Jo/gMNYAwOgdRQBrsRoOz7BPRkzvNaI/fzXi2Q=",
         "owner": "hercules-ci",
         "repo": "flake-parts",
-        "rev": "52a2caecc898d0b46b2b905f058ccc5081f842da",
+        "rev": "2cccadc7357c0ba201788ae99c4dfa90728ef5e0",
         "type": "github"
       },
       "original": {
@@ -20,17 +20,33 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1763283776,
+        "lastModified": 1762844143,
-        "narHash": "sha256-Y7TDFPK4GlqrKrivOcsHG8xSGqQx3A6c+i7novT85Uk=",
+        "narHash": "sha256-SlybxLZ1/e4T2lb1czEtWVzDCVSTvk9WLwGhmxFmBxI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "50a96edd8d0db6cc8db57dab6bb6d6ee1f3dc49a",
+        "rev": "9da7f1cf7f8a6e2a7cb3001b048546c92a8258b4",
         "type": "github"
       },
       "original": {
         "owner": "NixOS",
-        "ref": "nixos-unstable",
         "repo": "nixpkgs",
+        "rev": "9da7f1cf7f8a6e2a7cb3001b048546c92a8258b4",
+        "type": "github"
+      }
+    },
+    "nixpkgs-angular-cli": {
+      "locked": {
+        "lastModified": 1764947035,
+        "narHash": "sha256-EYHSjVM4Ox4lvCXUMiKKs2vETUSL5mx+J2FfutM7T9w=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "a672be65651c80d3f592a89b3945466584a22069",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "a672be65651c80d3f592a89b3945466584a22069",
         "type": "github"
       }
     },
@@ -52,7 +68,8 @@
     "root": {
       "inputs": {
         "flake-parts": "flake-parts",
-        "nixpkgs": "nixpkgs"
+        "nixpkgs": "nixpkgs",
+        "nixpkgs-angular-cli": "nixpkgs-angular-cli"
       }
     }
   },

flake.nix

@@ -1,20 +1,19 @@
 {
-  description = "Description for the project";
+  description = "Web Engineering";
 
   inputs = {
     flake-parts.url = "github:hercules-ci/flake-parts";
-    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+    nixpkgs.url = "github:NixOS/nixpkgs/9da7f1cf7f8a6e2a7cb3001b048546c92a8258b4";
+    nixpkgs-angular-cli.url = "github:NixOS/nixpkgs/a672be65651c80d3f592a89b3945466584a22069";
   };
 
-  outputs = inputs @ {flake-parts, ...}:
+  outputs = inputs @ {
+    flake-parts,
+    self,
+    ...
+  }:
     flake-parts.lib.mkFlake {inherit inputs;} {
-      imports = [
+      imports = [];
-        # To import an internal flake module: ./other.nix
-        # To import an external flake module:
-        #   1. Add foo to inputs
-        #   2. Add foo as a parameter to the outputs function
-        #   3. Add here: foo.flakeModule
-      ];
       systems = ["x86_64-linux" "aarch64-linux" "aarch64-darwin" "x86_64-darwin"];
       perSystem = {
         config,
@@ -51,6 +50,14 @@
                   upquote
                 ]))
           ];
+
+          pkgs-angular-cli = import inputs.nixpkgs-angular-cli {
+            inherit system;
+          };
+
+          angularPackages = with pkgs-angular-cli; [
+            nodejs_25
+          ];
         in {
           # Per-system attributes can be defined here. The self' and inputs'
           # module parameters provide easy access to attributes of the same
@@ -85,19 +92,57 @@
                     mkdir -p $out/share $out/log $out/artifacts
                     cp out/uebung-${toString n}.pdf "$out/share/${name}"
                     cp out/*.log $out/log/
-                    cp out/* $out/artifacts
+                    cp -r out/* $out/artifacts
                   '';
               }
               // args;
           in {
             "uebung-5" = mkUebungPdf 5 {};
+            "uebung-6" = mkUebungPdf 6 {};
           };
 
           devShells.default = with pkgs;
             mkShell {
               nativeBuildInputs = [];
-              packages = [mermaid-cli] ++ latexPackages;
+              packages =
-              shellHook = ''
+                [
+                  mermaid-cli
+                  openjdk
+                  jetty
+                  maven
+                ]
+                ++ latexPackages
+                ++ angularPackages;
+
+              shellHook =
+                # bash
+                ''
+                  # jetty docs: https://jetty.org/docs/jetty/12.1/operations-guide/begin/index.html
+                  export JETTY_HOME="$(readlink -f .)/.jetty/home"
+                  export JETTY_BASE="$(readlink -f .)/.jetty/base"
+
+                  mkdir -p "$JETTY_HOME" "$JETTY_BASE"
+                  for item in ${pkgs.jetty}/*; do
+                      ln -sf "$item" "$JETTY_HOME/"
+                  done
+
+                  jetty() {
+                    mkdir -p $JETTY_BASE/webapps/
+                    ln -fs "$(readlink -f target/*.war)" $JETTY_BASE/webapps/
+
+                    java \
+                      -Djetty.home="$JETTY_HOME" \
+                      -Djetty.base="$JETTY_BASE" \
+                      -jar $JETTY_HOME/start.jar $@
+                  }
+
+                  jetty --add-modules=http,ee11-cdi,ee11-ext,ee11-deploy,ee11-environment,ee11-annotations,ee11-glassfish-jstl,ee11-jndi,ee11-jsp,ee11-jstl,ee11-plus,ee11-security,ee11-servlet,ee11-servlets,ee11-webapp,ee11-websocket-jakarta,ee11-websocket-jetty,ee11-websocket-jetty-client-webapp
+
+                  echo "Usage Example:"
+                  echo "mvn clean package # build demo.war"
+                  echo "jetty # run webserver"
+
+                  alias ng="npx ng"
                 '';
             };
         };

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@angular/cli": "^21.0.2",
+    "@angular/core": "^21.0.3"
+  }
+}

pom.xml

@@ -1,59 +1,70 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<project xmlns="http://maven.apache.org/POM/4.0.0"
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
-         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
-
   <groupId>org.example</groupId>
   <artifactId>demo</artifactId>
   <version>1.0-SNAPSHOT</version>
   <name>demo</name>
   <packaging>war</packaging>
-
   <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-    <maven.compiler.target>8</maven.compiler.target>
+    <project.report.sourceEncoding>UTF-8</project.report.sourceEncoding>
-    <maven.compiler.source>8</maven.compiler.source>
+    <maven.compiler.release>21</maven.compiler.release>
     <junit.version>5.11.0-M2</junit.version>
+    <compiler-plugin.version>3.13.0</compiler-plugin.version>
+    <war-plugin.version>3.4.0</war-plugin.version>
   </properties>
-
   <dependencies>
     <dependency>
       <groupId>jakarta.platform</groupId>
       <artifactId>jakarta.jakartaee-web-api</artifactId>
-      <version>11.0.0-M3</version>
+      <version>11.0.0</version>
       <scope>provided</scope>
-    </dependency><dependency>
+    </dependency>
-      <groupId>org.jboss.weld.se</groupId>
+    <dependency>
-      <artifactId>weld-se-core</artifactId>
+      <groupId>org.glassfish</groupId>
-      <version>6.0.0.Beta1</version>
+      <artifactId>jakarta.faces</artifactId>
+      <version>4.1.3</version>
+    </dependency>
+    <dependency>
+      <groupId>jakarta.enterprise</groupId>
+      <artifactId>jakarta.enterprise.cdi-api</artifactId>
+      <version>4.1.0</version>
+    </dependency>
+    <dependency>
+      <groupId>jakarta.enterprise</groupId>
+      <artifactId>jakarta.enterprise.cdi-el-api</artifactId>
+      <version>4.1.0</version>
+    </dependency>
+    <dependency>
+      <groupId>org.jboss.weld.servlet</groupId>
+      <artifactId>weld-servlet-core</artifactId>
+      <version>5.1.2.Final</version>
     </dependency>
     <dependency>
       <groupId>org.junit.jupiter</groupId>
       <artifactId>junit-jupiter-api</artifactId>
       <version>${junit.version}</version>
-      <scope>test</scope>
-    </dependency>
-      <dependency>
-        <groupId>org.junit.jupiter</groupId>
-        <artifactId>junit-jupiter-engine</artifactId>
-        <version>${junit.version}</version>
-        <scope>test</scope>
     </dependency>
     <dependency>
       <groupId>org.projectlombok</groupId>
       <artifactId>lombok</artifactId>
-          <version>RELEASE</version>
+      <version>1.18.30</version>
-          <scope>provided</scope>
     </dependency>
   </dependencies>
-
   <build>
+    <finalName>demo</finalName>
     <plugins>
+      <plugin>
+        <groupId>org.apache.maven.plugins</groupId>
+        <artifactId>maven-compiler-plugin</artifactId>
+        <version>${compiler-plugin.version}</version>
+      </plugin>
       <plugin>
         <groupId>org.apache.maven.plugins</groupId>
         <artifactId>maven-war-plugin</artifactId>
-        <version>3.4.0</version>
+        <version>${war-plugin.version}</version>
-      </plugin>    </plugins>
+      </plugin>
+    </plugins>
   </build>
 </project>

src/main/webapp/WEB-INF/beans.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<beans xmlns="https://jakarta.ee/xml/ns/jakartaee"
+       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/beans_4_0.xsd"
+       version="4.0" bean-discovery-mode="annotated">
+</beans>

src/main/webapp/WEB-INF/web.xml

@@ -3,11 +3,18 @@
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
          version="6.0">
+
+    <context-param>
+        <param-name>jakarta.faces.CONFIG_FILES</param-name>
+        <param-value>/WEB-INF/faces-config.xml</param-value>
+    </context-param>
+
     <servlet>
         <servlet-name>Faces Servlet</servlet-name>
         <servlet-class>jakarta.faces.webapp.FacesServlet</servlet-class>
         <load-on-startup>1</load-on-startup>
     </servlet>
+
     <servlet-mapping>
         <servlet-name>Faces Servlet</servlet-name>
         <url-pattern>*.xhtml</url-pattern>