Angular ToDo-App

Eine einfache ToDo-Webanwendung als Lehrbeispiel für den Frontend-Unterricht.

Technologien

Tool	Zweck
Angular 21	UI-Framework (Standalone Components)
Vite	Build-Tool & Dev-Server
TypeScript	Typsicheres JavaScript
Fetch API	HTTP-Requests (nativ im Browser, kein Zusatz-Paket)

Projektstruktur

WebDev-Angular-ToDo-Example/
├── index.html              ← HTML-Einstiegspunkt
├── vite.config.ts          ← Vite-Konfiguration (mit Angular-Plugin)
├── tsconfig.json           ← TypeScript-Konfiguration
├── package.json            ← Abhängigkeiten & npm-Skripte
└── src/
    ├── main.ts             ← App-Bootstrap (Startpunkt)
    ├── styles.css          ← Globale CSS-Basis-Styles
    └── app/
        ├── app.component.ts  ← Root-Komponente (UI + Logik)
        ├── todo.model.ts     ← TypeScript-Interfaces (Datentypen)
        └── todo.service.ts   ← Service für API-Kommunikation

Installation & Start

# 1. Abhängigkeiten installieren
npm install

# 2. Entwicklungsserver starten (mit Hot Reload)
npm run dev

Der Dev-Server läuft standardmässig unter http://localhost:5173.

Build für Produktion

npm run build

Die fertigen Dateien landen im dist/-Ordner und können auf jedem statischen Webserver deployed werden.

API

Die App kommuniziert mit einer REST-API unter:

https://webdev.iten-web.ch/10003/api/

Die App verwendet Best-Practice-Routing mit REST-Pfaden:

https://webdev.iten-web.ch/10003/api/todos

Verwendete Endpoints

Methode	Pfad	Beschreibung
GET	/todos?page=1&limit=10	Alle ToDos (paginiert)
POST	/todos	Neues ToDo erstellen
PATCH	/todos/:id	ToDo teilweise aktualisieren
DELETE	/todos/:id	ToDo löschen

Angular-Konzepte im Überblick

Standalone Components

Seit Angular 14 können Komponenten ohne NgModule erstellt werden.
standalone: true im @Component-Decorator macht eine Komponente eigenständig.

Data Binding

<!-- Interpolation: Wert anzeigen -->
{{ todo.title }}

<!-- Property Binding: Attribut setzen -->
[checked]="todo.completed"
[disabled]="loading"

<!-- Event Binding: Methode aufrufen -->
(click)="deleteTodo(todo.id)"
(change)="toggleTodo(todo)"

<!-- Two-Way Binding: Lesen und Schreiben -->
[(ngModel)]="newTitle"

Strukturdirektiven

<!-- Element nur anzeigen, wenn Bedingung wahr ist -->
*ngIf="loading"

<!-- Element für jedes Element im Array wiederholen -->
*ngFor="let todo of todos"

<!-- CSS-Klasse bedingt hinzufügen -->
[class.completed]="todo.completed"

Dependency Injection

Services werden im Konstruktor deklariert – Angular stellt die Instanz automatisch bereit:

constructor(private todoService: TodoService) {}

Lifecycle Hooks

ngOnInit() wird einmalig nach der Initialisierung der Komponente aufgerufen:

ngOnInit(): void {
  this.loadTodos(); // Daten beim Start laden
}