249 lines
8.8 KiB
TeX
249 lines
8.8 KiB
TeX
\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})
|