\documentclass{uebung}

\author{Linus Nagel}
\chapter{6}

\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})
