line breaks
This commit is contained in:
@@ -16,7 +16,7 @@
|
|||||||
\end{itemize}
|
\end{itemize}
|
||||||
|
|
||||||
Routen werden (z.B. mit modulebasierten Komponenten) in app-routing.module.ts definiert:
|
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 { NgModule } from '@angular/core';
|
||||||
import { Routes, RouterModule } from '@angular/router';
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
@@ -32,30 +32,30 @@
|
|||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
Mit RouterOutlet kann wird dann gesagt, wo die Komponenten der Routen ausgegeben werden:
|
Mit RouterOutlet kann wird dann gesagt, wo die Komponenten der Routen ausgegeben werden:
|
||||||
\begin{minted}{ng2}
|
\begin{minted}[breaklines]{ng2}
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
\end{minted}
|
\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:
|
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}
|
||||||
<a routerLink="/Pfad">...</a>
|
<a routerLink="/Pfad">...</a>
|
||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
\item Wie kann eine Route mit einem Parameter erstellt und ausgelesen werden?
|
\item Wie kann eine Route mit einem Parameter erstellt und ausgelesen werden?
|
||||||
|
|
||||||
Routen mit Parametern werden wie folgt deklariert:
|
Routen mit Parametern werden wie folgt deklariert:
|
||||||
\begin{minted}{ts}
|
\begin{minted}[breaklines]{ts}
|
||||||
{path: 'URL/:NameDesParameters', component: Komponentenbezeichner}
|
{path: 'URL/:NameDesParameters', component: Komponentenbezeichner}
|
||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
Geschrieben werden die Parameter in den RouterLinks so:
|
Geschrieben werden die Parameter in den RouterLinks so:
|
||||||
\begin{minted}{ng2}
|
\begin{minted}[breaklines]{ng2}
|
||||||
<a routerLink="/URL/ParameterWert">...</a>
|
<a routerLink="/URL/ParameterWert">...</a>
|
||||||
<a [routerLink]="['/URL', ParameterWert]">...</a>
|
<a [routerLink]="['/URL', ParameterWert]">...</a>
|
||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
Ausgelesen werden die Parameter in den Komponenten zu denen die Route führt (mit Dependency Injection):
|
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) {
|
constructor(private routeObject: ActivatedRoute) {
|
||||||
const parameter = this.routeObject.snapshot.params['NameDesParameters'];
|
const parameter = this.routeObject.snapshot.params['NameDesParameters'];
|
||||||
}
|
}
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
\item Erklären Sie, wie die Werte eines Observables empfangen werden können.
|
\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:
|
Man übergibt der subscribe Methode eine Funktion, die aufgerufen wird, wenn Daten empfagen werden:
|
||||||
\begin{minted}{ts}
|
\begin{minted}[breaklines]{ts}
|
||||||
const data: Observable<string> = this.sendeDaten();
|
const data: Observable<string> = this.sendeDaten();
|
||||||
const subscription = data.subscribe(value => console.log(value));
|
const subscription = data.subscribe(value => console.log(value));
|
||||||
\end{minted}
|
\end{minted}
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
\item Wie kann der Empfang von Observables beendet werden?
|
\item Wie kann der Empfang von Observables beendet werden?
|
||||||
|
|
||||||
Mit der unsubscribe Methode:
|
Mit der unsubscribe Methode:
|
||||||
\begin{minted}{ts}
|
\begin{minted}[breaklines]{ts}
|
||||||
const subscription = ...;
|
const subscription = ...;
|
||||||
subscription.unsubscribe();
|
subscription.unsubscribe();
|
||||||
\end{minted}
|
\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.
|
\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:
|
Student.ts:
|
||||||
\begin{minted}{ts}
|
\begin{minted}[breaklines]{ts}
|
||||||
export class Student {
|
export class Student {
|
||||||
constructor(
|
constructor(
|
||||||
private _name?: string,
|
private _name?: string,
|
||||||
@@ -105,7 +105,7 @@
|
|||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
student-form.ts
|
student-form.ts
|
||||||
\begin{minted}{ts}
|
\begin{minted}[breaklines]{ts}
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { FormsModule } from '@angular/forms';
|
import { FormsModule } from '@angular/forms';
|
||||||
import { Student } from '../Student';
|
import { Student } from '../Student';
|
||||||
@@ -126,7 +126,7 @@
|
|||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
student-form.css
|
student-form.css
|
||||||
\begin{minted}{css}
|
\begin{minted}[breaklines]{css}
|
||||||
form {
|
form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -135,7 +135,7 @@
|
|||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
student-form.html
|
student-form.html
|
||||||
\begin{minted}{ng2}
|
\begin{minted}[breaklines]{ng2}
|
||||||
<p>Student: </p>
|
<p>Student: </p>
|
||||||
<form #formularName="ngForm">
|
<form #formularName="ngForm">
|
||||||
<label for="name">Name: </label>
|
<label for="name">Name: </label>
|
||||||
@@ -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.
|
\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
|
student-form-reactive.ts
|
||||||
\begin{minted}{ts}
|
\begin{minted}[breaklines]{ts}
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
import { Student } from '../Student';
|
import { Student } from '../Student';
|
||||||
@@ -179,7 +179,7 @@
|
|||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
student-form-reactive.css
|
student-form-reactive.css
|
||||||
\begin{minted}{css}
|
\begin{minted}[breaklines]{css}
|
||||||
form {
|
form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -192,7 +192,7 @@
|
|||||||
\end{minted}
|
\end{minted}
|
||||||
|
|
||||||
student-form-reactive.html
|
student-form-reactive.html
|
||||||
\begin{minted}{ng2}
|
\begin{minted}[breaklines]{ng2}
|
||||||
<p>Student: </p>
|
<p>Student: </p>
|
||||||
<form [formGroup]="form">
|
<form [formGroup]="form">
|
||||||
<label for="name">Name: </label>
|
<label for="name">Name: </label>
|
||||||
|
|||||||
Reference in New Issue
Block a user