diff --git a/docs/uebungen/uebung-7.tex b/docs/uebungen/uebung-7.tex index fe969ab..752a6dd 100644 --- a/docs/uebungen/uebung-7.tex +++ b/docs/uebungen/uebung-7.tex @@ -16,7 +16,7 @@ \end{itemize} Routen werden (z.B. mit modulebasierten Komponenten) in app-routing.module.ts definiert: - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ @@ -32,30 +32,30 @@ \end{minted} Mit RouterOutlet kann wird dann gesagt, wo die Komponenten der Routen ausgegeben werden: - \begin{minted}{ng2} + \begin{minted}[breaklines]{ng2} \end{minted} Anstatt normalen anchor Elementen müssen dann auch RouterLinks verwendet werden, damit kein echter redirekt passiert, sondern Angular nur die Komponenten nachläd: - \begin{minted}{ng2} + \begin{minted}[breaklines]{ng2} ... \end{minted} \item Wie kann eine Route mit einem Parameter erstellt und ausgelesen werden? Routen mit Parametern werden wie folgt deklariert: - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} {path: 'URL/:NameDesParameters', component: Komponentenbezeichner} \end{minted} Geschrieben werden die Parameter in den RouterLinks so: - \begin{minted}{ng2} + \begin{minted}[breaklines]{ng2} ... ... \end{minted} Ausgelesen werden die Parameter in den Komponenten zu denen die Route führt (mit Dependency Injection): - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} constructor(private routeObject: ActivatedRoute) { const parameter = this.routeObject.snapshot.params['NameDesParameters']; } @@ -64,7 +64,7 @@ \item Erklären Sie, wie die Werte eines Observables empfangen werden können. Man übergibt der subscribe Methode eine Funktion, die aufgerufen wird, wenn Daten empfagen werden: - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} const data: Observable = this.sendeDaten(); const subscription = data.subscribe(value => console.log(value)); \end{minted} @@ -72,7 +72,7 @@ \item Wie kann der Empfang von Observables beendet werden? Mit der unsubscribe Methode: - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} const subscription = ...; subscription.unsubscribe(); \end{minted} @@ -88,7 +88,7 @@ \item Erstellen Sie eine Klasse Student mit den Attributen name (string) und matrikelnummer (number). Erstellen Sie zudem mittels Template Driven Forms ein Formular sowie die zugehörige Komponentenklasse, so dass alle Daten vom Typ Student eingegeben werden können. Die Formularfelder sollen dabei mit einem Objekt vom Typ Student in der Komponentenklasse bidirektional verknüpft sein. Unter dem Formular soll sich ein Knopf befinden, der, sobald er geklickt wird, eine Methode aufruft, die den (ggf. geänderten) Inhalt des Studentenobjekts in der Konsole ausgibt. Student.ts: - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} export class Student { constructor( private _name?: string, @@ -105,7 +105,7 @@ \end{minted} student-form.ts - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { Student } from '../Student'; @@ -126,7 +126,7 @@ \end{minted} student-form.css - \begin{minted}{css} + \begin{minted}[breaklines]{css} form { display: flex; flex-direction: column; @@ -135,7 +135,7 @@ \end{minted} student-form.html - \begin{minted}{ng2} + \begin{minted}[breaklines]{ng2}

Student:

@@ -149,7 +149,7 @@ \item Erstellen Sie das gleiche Formular wie in der vorhergehenden Aufgabe, diesmal jedoch mit Reactive Forms. Fügen Sie dem Formular eine Validierung hinzu, die die Matrikelnummer zum Pflichtfeld macht und die prüft, ob als Matrikelnummer ausschließlich Ziffern verwendet wurden. Falls dies nicht der Fall ist, soll das Textfeld einen hellroten Hintergrund erhalten. student-form-reactive.ts - \begin{minted}{ts} + \begin{minted}[breaklines]{ts} import { Component } from '@angular/core'; import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { Student } from '../Student'; @@ -179,7 +179,7 @@ \end{minted} student-form-reactive.css - \begin{minted}{css} + \begin{minted}[breaklines]{css} form { display: flex; flex-direction: column; @@ -192,7 +192,7 @@ \end{minted} student-form-reactive.html - \begin{minted}{ng2} + \begin{minted}[breaklines]{ng2}

Student: