uebung-6
This commit is contained in:
248
docs/uebungen/uebung-6.tex
Normal file
248
docs/uebungen/uebung-6.tex
Normal file
@@ -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})
|
||||
Reference in New Issue
Block a user