Viele Anwendungsfälle im Webdevelopement wiederholen sich in beinahe jedem neuen Projekt. Deswegen ist es wichtig, häufig benutzten Code nicht jedesmal neu zu schreiben, sondern ihn als Codesnippet zu speichern. Hier sind 5 praktische, kurze Codesnippets vorgestellt.

Sortieren in Angular

Listen, wie beispielsweise Personen sollten oft sortierbar nach z.B. dem Alphabet sein, mit folgenden Snippets lässt sich das bewerkstelligen:

Sortieren nach Zahlen

return this.persons.sort((n1,n2) => n1.id - n2.id);

Sortieren nach String

return this.persons.sort((a,b) => a.firstname.localeCompare(b.firstname));

Suchfunktion für die Angular Web-App einbauen

In diesem Beispiel wird eine Liste von Personen ausgegeben, eine Person aber nur angezeigt, wenn sie mit den Kriterien der Suche übereinstimmt (also dem Nachnamen)

<div *ngIf="matches(person)" >
    <app-person-detail [person]="person" (deleted)="deletePerson(i)"></app-person-detail>
  </div>
matches(person){
  return (person.lastname.toUpperCase()).indexOf(this.searchstring.toUpperCase())==0||(person.firstname.toUpperCase()).indexOf(this.searchstring.toUpperCase())==0;
}

Uhrzeit

Auch die grundsätzlichen Funktionen der Date Klasse sollte man kennen und ein mögliches Datumsformat.

var today = new Date();
var d = today.getDate();
var m = today.getMonth() + 1;
var y = today.getFullYear();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
new Date('Jul 15 01:30:00 2001');

Tabellen in Angular mit Objekten befüllen

Oft müssen wir Werte in Tabellen angeben und diese dynamisch verändern können. Dabei sind derartige Tabellen immer recht ähnlich aufgebaut.

Da das Dropdown bidirektional ist wird das aktuell selektierte Element auf die Variable actSchoolclass gespeichert. Wenn sich am Dropdown etwas verändert, so wird die Funktion getClass aufgerufen. Die leere Option wird benötigt, damit das erste Element im Dropdown leer ist, um zu verhindern, dass eine Klasse ausgewählt ist, ohne das es vom Benutzer so gewollt wurde.

Danach geht man die Liste an Classes in einem ngFor durch und erstellt für jede Klasse eine eigene Option.

Die Funktion ChangeTeacher wird aufgerufen, wenn sich im Dropdown etwas ändert. Als Parameter wird die Value des gerade ausgewählten Elements zurückgegeben. Zusätzlich muss man noch i und j übergeben, um die aktuelle Unit herausfinden zu können, um den neuen Teacher zu speichern.

<select name=”teacher” (change)=”changeTeacher($event.target.value,i,j)”>
          
          <option *ngFor=”let t of teachers” [value]=”t.id” [selected]=”getUnit(i,j).teacher.id==t.id”>
            
          </option>
        </select>

Erstellen eines RestServices

Um am Client Daten vom Server abfragen oder an den Server senden zu können wird mit REST kommuniziert.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class RestService {
private http;
constructor(http: HttpClient) {
  this.http = http;
}

Abfragen aller Daten einer Entity-Klasse

Durch Anlegen einer Methode im RestService und Verwendung der jeweiligen http-Methode können bestimmte Aufrufe an den Server gesendet werden. Dazu muss lediglich der Serverlink bzw. benötigte Daten in der Methode mitgegeben werden.

getAllTeacher() {
  return this.http.get('http://localhost:8080/server/api/rest/teacher/findall');
}
getAllClasses() {
  return this.http.get('http://localhost:8080/server/api/rest/class/findall');
}

Beispiel: Abfragen bestimmter Daten nach einer anderen Klasse

Um Daten abzufragen, die zu einem anderen Objekt zugehörig sind wird der Pfad der zugehörigen Serverfunktion als Parameter der http-Funktion mitgegeben. Zusätzlich wird die Id des jeweiligen Filter-Objekts mitgegeben.

findByClass(id) {
  return this.http.get('http://localhost:8080/server/api/rest/unit/findbyclass/' + id);
}

Beispiel: Abfrage zur Speicherung eines Objekts

Um Daten speicher zu können, müssen diese an den Server gesendet werden. Das zu speichernde Objekt wird dabei einfach als zweiter Parameter der put, oder post-Funktion im Request-Body mitgegeben. Der erste Parameter ist wieder die jeweilige URL.

save(unit) {
  return this.http.put('http://localhost:8080/server/api/rest/unit/save', unit);
}
}