132 lines
3.3 KiB
Markdown
132 lines
3.3 KiB
Markdown
# 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
|
||
}
|
||
```
|