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 / .html / .css
    ├── core/
    │   ├── models/
    │   │   └── todo.model.ts
    │   └── services/
    │       └── todo.service.ts
    └── features/
      └── todos/
        └── components/
          ├── error-message/
          ├── loading-indicator/
          ├── todo-form/
          ├── todo-item/
          ├── todo-list/
          └── todo-pagination/

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
}

3.3 KiB Raw Permalink Blame History Unescape Escape