# 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

```bash
# 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

```bash
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
```html
<!-- 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
```html
<!-- 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:
```typescript
constructor(private todoService: TodoService) {}
```

### Lifecycle Hooks
`ngOnInit()` wird einmalig nach der Initialisierung der Komponente aufgerufen:
```typescript
ngOnInit(): void {
  this.loadTodos(); // Daten beim Start laden
}
```