uebung-6

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}