Grundlage ist die Basisumsetzung mit Angular im Rahmen der Projektvorlesungen an Pfingsten. Der Zustand der Applikation muss in localstorage gespeichert werden, so dass nach einem Neustart des Browsers weitergearbeitet werden kann. Die Schuldaten müssen also dieses Mal in localstorage gespeichert werden. Die Daten müssen bei einem Neuladen der Applikation resp. des Browser oder auch kompletter Reboot wieder vorhanden sein.
- Login
- Lehrer auflisten, anlegen, bearbeiten, löschen
Attribute: Vorname, Nachname, Mail, Passwort - Klassen auflisten,anlegen, bearbeiten, löschen
Attribute: Stufe, Name - Schüler auflisten,anlegen, bearbeiten, löschen
Attribute: Vorname, Nachname, Verweis auf Klasse - Notizen für einen Schüler auflisten, anlegen, bearbeiten, löschen
Attribute: Text, Zeitstempel, Verweis auf Lehrer (der die Notiz angelegt hat), Verweis auf Schüler - Logout
Die obigen Funktionalitäten sind Mindestfunktionen.
Man darf kreativ sein, aber am Thema bleiben.
- Dashboard / Klassenübersicht
- Schnelle Möglichkeit, nach dem Login zunächst die Klasse auszuwählen und direkt in der Schülerübersicht eine neue Notiz zu einem Schüler anzulegen resp. anzustoßen.
- Jeder Lehrer muss sich anmelden können (Passwort)
Eine lokale Angular Applikation komplett als Zip-Archiv. Bitte entfernt das node_modules Verzeichnis vor oder aus dem Ziparchiv, damit dieses nicht zu groß wird. Ich werde auf Kommandozeile in dieses Verzeichnis wechseln und dort: npm install npm start ausführen und dann muss die Applikation laufen. Falls ihr das abweichend konfiguriert habt, dann bitte im Text schreiben. Danke.
1. das Speichern der Kurse je Student im LocalStorage ist Fehlerhaft
beim neu laden der Seite werden diese nicht mehr automatisch ausgewählt
Lösung (nicht das komplette Objekt sondern nur den Namen bei ngValue
verwenden), Achtung Nachteil wird ein Kurs umbenannt geht die Verbindung
verloren, normalerweise würde man hier eine eindeutige ID verwenden und
diese verwenden wenn vorhanden.
<select style="width: 300px;" multiple [(ngModel)]="current.courses"
size="5">
<option *ngFor="let c of dataService.courses"
_[NGVALUE]=__"C.NAME"_>{{c.name}}</option>
</select>
2. Optional für das Speichern im LocalStorage nur ein Objekt verwenden
(vermeidet eventuell vorkommende nullpointer beim Aufruf):
CONSTRUCTOR() {
IF (_LOCALSTORAGE_.getItem("DATA") == NULL) {
LET s = NEW Student("HANS", "MÜLLER", 123456);
THIS.STUDENTS.push(s);
THIS.COURSES.push(NEW Course("INF16A"));
} ELSE {
THIS.get();
}
}
save() {
LET s = {STUDENTS: THIS.STUDENTS, COURSES: THIS.COURSES};
_LOCALSTORAGE_.setItem("DATA", _JSON_.stringify(s));
}
get() {
LET data = _JSON_.parse(_LOCALSTORAGE_.getItem("DATA"));
THIS.COURSES = data.COURSES;
THIS.STUDENTS = data.STUDENTS;
}
3. Eigenes HTML verwenden
in der src/index.html sowie app/app.component.html darf auch ein anderes
template verwendet werden, zu beachten ist hier:
im head wird
<BASE HREF="/">
benötigt
bilder/ css files etc.. im Ordner assets ablegen und natürlich darauf
Verlinken
und innerhalb des Bodys
<APP-ROOT></APP-ROOT>
hier wird die app.component.html
geladen
in dieser ist es wichtig
<ROUTER-OUTLET></ROUTER-OUTLET>
dort zu verwenden wo der Inhalt der einzelnen components angezeigt
werden soll.
This project was generated with Angular CLI version 1.4.1.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.