Alles_bis_jetzt

1. Projektinitialisierung¶

Angular-Projekt initialisieren¶

Um ein neues Angular-Projekt zu erstellen, verwendest du den Befehl:

ng new projektname

Dieser Befehl startet einen interaktiven Prozess, bei dem du verschiedene Einstellungen für dein Projekt festlegen kannst, wie z. B. die Einbindung von Routing oder die Wahl des Stylesheet-Formats.

Unterschied zwischen `standalone: true` und `standalone: false`¶

In Angular können Komponenten entweder als eigenständig (standalone: true) oder als Teil eines Moduls (standalone: false) definiert werden:

standalone: true: Die Komponente ist unabhängig und benötigt kein Modul. Sie importiert ihre Abhängigkeiten direkt.

@Component({
  selector: 'app-beispiel',
  templateUrl: './beispiel.component.html',
  standalone: true,
  imports: [CommonModule],
})
export class BeispielComponent {}

standalone: false: Die Komponente ist Teil eines Moduls und wird dort deklariert.

@NgModule({
  declarations: [BeispielComponent],
  imports: [CommonModule],
})
export class BeispielModule {}

Weitere Informationen zu Standalone-Komponenten findest du in der offiziellen Angular-Dokumentation:

Wichtige Angular-Befehle¶

npm install: Installiert die in der package.json definierten Abhängigkeiten.
ng generate component oder ng g c: Erstellt eine neue Komponente.

ng g c komponentenname

ng serve: Startet einen Entwicklungsserver und ermöglicht die Vorschau der Anwendung im Browser.

ng serve

ng build: Erstellt eine Produktionsversion der Anwendung.

ng build

2. Komponenten und Aufbau¶

Hinzufügen von Komponenten¶

Um eine neue Komponente zu deinem Projekt hinzuzufügen, verwendest du den Befehl:

ng g c komponentenname

Dieser Befehl erstellt einen Ordner mit vier Dateien:

komponentenname.component.ts: Enthält die Logik der Komponente.
komponentenname.component.html: Definiert das HTML-Template der Komponente.
komponentenname.component.css: Beinhaltet die spezifischen Styles der Komponente.
komponentenname.component.spec.ts: Enthält Tests für die Komponente.

Aufbau eines Angular-Projekts¶

Ein typisches Angular-Projekt hat folgende Struktur:

src/: Hauptverzeichnis des Quellcodes.
app/: Beinhaltet die Anwendungslogik, Komponenten und Module.
assets/: Speichert statische Ressourcen wie Bilder und Schriftarten.
environments/: Enthält Umgebungsvariablen für verschiedene Betriebsmodi (z. B. Entwicklung, Produktion).
index.html: Einstiegspunkt der Anwendung.
main.ts: Startet die Anwendung.
styles.css: Globale Styles für die Anwendung.

Einbinden von Bootstrap in ein Angular-Projekt¶

Bootstrap ist ein beliebtes CSS-Framework zur Gestaltung responsiver Webanwendungen. So bindest du es in dein Angular-Projekt ein:

Installation:

npm install bootstrap

Einbindung der Styles:

Füge in der Datei angular.json unter dem Abschnitt styles den Pfad zur Bootstrap-CSS-Datei hinzu:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

angular.json öffnen
In deinem Projektbaum, öffne die Datei angular.json (im Wurzelverzeichnis deines Projekts).
Bootstrap-CSS einfügen
Suche in der angular.json-Datei nach dem Block "styles" und füge den Pfad zu Bootstrap dort ein. Es sollte so aussehen:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Falls nötig: Bootstrap-JavaScript hinzufügen
Wenn du Bootstrap-JavaScript (z. B. für Dropdowns oder Modals) benötigst, suche nach dem Block "scripts" und füge den Pfad zum Bootstrap-Bundle hinzu:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

Speichern und Angular-CLI neu starten
Speichere die Datei angular.json. Stoppe anschließend den Dev-Server (falls er läuft) mit CTRL + C und starte ihn neu:

ng serve

Testen in deiner Komponente Um sicherzustellen, dass Bootstrap funktioniert, füge in first.component.html folgendes Beispiel hinzu:

<div class="container">
  <h1 class="text-center text-primary">Bootstrap ist aktiv!</h1>
  <button class="btn btn-success">Test-Button</button>
</div>

Speichere die Änderungen und lade die App im Browser neu. Du solltest das Bootstrap-Styling sehen.

Verwendung in Komponenten:

Nach der Einbindung kannst du Bootstrap-Klassen in deinen Templates nutzen:

<button class="btn btn-primary">Klicken</button>

3. Datenbindung und Direktiven¶

Datenbindung¶

String Interpolation
Mit String Interpolation kannst du Werte aus der Komponente in das HTML einfügen.
Syntax: {{ variable }}

Beispiel:

// app.component.ts
export class AppComponent {
  title = 'Willkommen bei der Bike-App!';
}

<!-- app.component.html -->
<h1>{{ title }}</h1>

Ergebnis im Browser:
Willkommen bei der Bike-App!

Property Binding
Bindet Eigenschaften von HTML-Elementen an Werte aus der Komponente.
Syntax: [attribut]="variable"

Beispiel:

// app.component.ts
export class AppComponent {
  imageUrl = 'assets/bike.jpg';
}

<!-- app.component.html -->
<img [src]="imageUrl" alt="Bike">

Two-way Binding
Synchronisiert Daten zwischen dem Template und der Komponente.
Syntax: [(ngModel)]="variable"

Beispiel:

// app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  userName = '';
}

<!-- app.component.html -->
<input [(ngModel)]="userName" placeholder="Name eingeben">
<p>Hallo, {{ userName }}!</p>

Direktiven¶

*ngIf
Zeigt ein Element nur an, wenn die Bedingung wahr ist.

Beispiel:

// app.component.ts
export class AppComponent {
  isAvailable = true;
}

<!-- app.component.html -->
<p *ngIf="isAvailable">Das Bike ist verfügbar!</p>

*ngFor
Wiederholt Elemente basierend auf einer Liste.

Beispiel:

// app.component.ts
export class AppComponent {
  bikes = ['Mountainbike', 'E-Bike', 'Rennrad'];
}

<!-- app.component.html -->
<ul>
  <li *ngFor="let bike of bikes">{{ bike }}</li>
</ul>

Datenbindung und Direktiven einfach erklärt:¶

1. Two-way Binding¶

👉 Verbindung in beide Richtungen:
- Was du in ein Eingabefeld schreibst, wird in der Komponente gespeichert.
- Wenn die Komponente den Wert ändert, sieht man das auch im Eingabefeld.

Beispiel:

<input [(ngModel)]="name">
<p>Dein Name: {{ name }}</p>

Wenn du etwas ins Feld eingibst, steht es automatisch im Text darunter.

2. Property Binding¶

👉 Komponente → HTML:
- Du übergibst einen Wert aus der Komponente an ein HTML-Element.

Beispiel:

<input [value]="name">

Das Eingabefeld zeigt den Wert der Variable name an.

3. String Interpolation¶

👉 Komponente → Text:
- Du zeigst den Wert einer Variable direkt im HTML-Text.

Beispiel:

<p>Dein Name: {{ name }}</p>

Das zeigt einfach den Text aus der Variable name an.

4. ngIf¶

👉 Zeige etwas nur, wenn eine Bedingung stimmt.

Beispiel:

<p *ngIf="isVisible">Hallo!</p>

Der Text "Hallo!" wird nur angezeigt, wenn isVisible = true ist.

5. ngFor¶

👉 Wiederhole etwas für jede Sache in einer Liste.

Beispiel:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Das zeigt eine Liste an, z. B. für items = ['Apfel', 'Banane', 'Orange'].

ngModel einfach erklärt:¶

Was ist `ngModel`?¶

Mit ngModel kannst du in Angular ein Eingabefeld mit einer Variable in der Komponente verbinden. So bleibt der Wert immer aktuell, egal ob du ihn in der Komponente änderst oder der Benutzer etwas eingibt.

Voraussetzungen¶

Damit ngModel funktioniert, musst du im Modul FormsModule importieren:

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule],
})
export class AppModule {}

Einfaches Beispiel¶

HTML¶

<input [(ngModel)]="username" placeholder="Name eingeben">
<p>Hallo, {{ username }}!</p>

TypeScript (Component)¶

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  username: string = ''; // Variable für den Namen
}

Wie funktioniert es?¶

[(ngModel)]: Verbindet die Eingabe mit der Variable username.
Synchronisation: Wenn du etwas ins Feld schreibst, wird username automatisch aktualisiert. Ändert sich username in der Komponente, wird das Feld ebenfalls angepasst.

Beispiel mit Formular und Regeln¶

Du kannst auch Regeln wie "Pflichtfeld" einbauen:

<form>
  <input [(ngModel)]="email" name="email" type="email" required>
  <button [disabled]="!email">Abschicken</button>
</form>

- Der Button ist nur aktiv, wenn email ausgefüllt ist.

Braucht es mehr Beispiele oder ist das klar? 😊

4. Routing und Sicherheit¶

Routing-Modul einrichten¶

Routing in Angular ermöglicht die Navigation zwischen verschiedenen Komponenten.

Schritte zur Einrichtung:
1. Routing-Modul erstellen:

ng g m app-routing --flat --module=app

Dieser Befehl erstellt ein Modul app-routing.module.ts.

Routen definieren:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BikeListComponent } from './bike-list/bike-list.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'bikes', component: BikeListComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Verlinkung im HTML:

<a routerLink="/">Startseite</a>
<a routerLink="/bikes">Bikeliste</a>
<router-outlet></router-outlet>

Geschützte Route erstellen¶

Guard erstellen:
```
ng g guard auth
```
Dieser Befehl erstellt eine Auth-Guard-Datei auth.guard.ts.

Guard implementieren:

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    const isAdmin = true; // Beispiel: Hier würdest du prüfen, ob der Nutzer Admin ist.
    return isAdmin;
  }
}

Guard einer Route zuweisen:

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },
];

Admin-Komponente erstellen:
```
ng g c admin
```

Routing ganz einfach erklärt:¶

Was ist Routing?¶

Routing bedeutet: Wenn jemand eine bestimmte URL eingibt (z. B. /home), soll eine bestimmte Komponente (z. B. HomeComponent) angezeigt werden.
Es ist so, wie wenn du auf einer Webseite auf einen Link klickst und zu einer neuen Seite kommst – aber ohne die Seite komplett neu zu laden.

Wo wird Routing eingerichtet?¶

Routing wird in einer Datei definiert, die bei dir app.routes.ts heißt.

In dieser Datei sagst du dem Projekt: - Welche URL (z. B. /first) zu welcher Komponente (z. B. FirstComponent) gehört.

Schritt-für-Schritt-Anleitung**¶

Schritt 1: Eine Route definieren¶

Öffne die Datei app.routes.ts.

Schreibe folgenden Code rein:

import { Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';

export const appRoutes: Routes = [
  { path: 'first', component: FirstComponent }, // Wenn URL '/first' ist, zeige die FirstComponent
];

Schritt 2: Router aktivieren¶

Damit Angular weiß, dass du Routing benutzt: 1. Öffne die Datei app.module.ts (falls sie bei dir anders heißt, z. B. main.ts, such nach einer Datei mit @NgModule im Code). 2. Füge RouterModule hinzu:

import { RouterModule } from '@angular/router';
import { appRoutes } from './app.routes';

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes), // Füge deine Routen hinzu
  ],
  exports: [RouterModule] // Exportiere das Routing
})
export class AppRoutingModule {}

In der Datei app.component.html, füge Folgendes ein:

<nav>
  <a routerLink="/first">Zur First-Seite</a>
</nav>
<router-outlet></router-outlet>

Was passiert hier? - <a routerLink="/first">: Das ist ein Link, der zur FirstComponent führt. - <router-outlet>: Dort wird der Inhalt der aktuellen Seite (Route) angezeigt.

4. Wie teste ich das?¶

Starte dein Projekt mit ng serve.
Öffne den Browser und gehe auf:
http://localhost:4200/first → Du solltest die FirstComponent sehen.

Wichtig:¶

app.routes.ts: Definiere die Route (z. B. /first → FirstComponent).
app.component.html: Füge <router-outlet> hinzu, damit die Seiten angezeigt werden.
app.module.ts: Verbinde die Routen mit RouterModule.

5. Formular in Angular mit Validierung¶

1. Einfaches Beispiel¶

Das Ziel ist ein Formular mit drei Feldern: Name, E-Mail und Telefonnummer, inklusive grundlegender Validierung.

Schritt 1: Module importieren¶

In der Datei app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Schritt 2: Formular in der Komponente¶

In der Datei app.component.ts:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  contactForm = this.fb.group({
    name: ['', Validators.required], // Name muss ausgefüllt sein
    email: ['', [Validators.required, Validators.email]], // E-Mail erforderlich + Format prüfen
    phone: ['', Validators.required], // Telefon muss ausgefüllt sein
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    console.log(this.contactForm.value); // Gibt die Formulardaten aus
  }
}

Schritt 3: HTML-Template¶

In der Datei app.component.html:

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div>
    <label>Name:</label>
    <input formControlName="name">
    <small *ngIf="contactForm.get('name')?.invalid">Name ist erforderlich!</small>
  </div>

  <div>
    <label>E-Mail:</label>
    <input formControlName="email">
    <small *ngIf="contactForm.get('email')?.invalid">Ungültige E-Mail!</small>
  </div>

  <div>
    <label>Telefon:</label>
    <input formControlName="phone">
    <small *ngIf="contactForm.get('phone')?.invalid">Telefonnummer ist erforderlich!</small>
  </div>

  <button type="submit" [disabled]="contactForm.invalid">Abschicken</button>
</form>

Zusammenfassung¶

Module importieren: ReactiveFormsModule hinzufügen.
Formular erstellen: Verwende FormBuilder für Felder und Validatoren.
HTML: Binde die Felder mit formControlName und zeige Fehlermeldungen mit *ngIf an.
Submit: Überprüfe mit contactForm.invalid, ob das Formular abgeschickt werden darf.

Alles_bis_jetzt

1. Projektinitialisierung¶

Angular-Projekt initialisieren¶

Unterschied zwischen standalone: true und standalone: false¶

Wichtige Angular-Befehle¶

2. Komponenten und Aufbau¶

Hinzufügen von Komponenten¶

Aufbau eines Angular-Projekts¶

Einbinden von Bootstrap in ein Angular-Projekt¶

3. Datenbindung und Direktiven¶

Datenbindung¶

Direktiven¶

Datenbindung und Direktiven einfach erklärt:¶

1. Two-way Binding¶

2. Property Binding¶

3. String Interpolation¶

4. ngIf¶

5. ngFor¶

ngModel einfach erklärt:¶

Was ist ngModel?¶

Voraussetzungen¶

Einfaches Beispiel¶

HTML¶

TypeScript (Component)¶

Wie funktioniert es?¶

Beispiel mit Formular und Regeln¶

4. Routing und Sicherheit¶

Routing-Modul einrichten¶

Geschützte Route erstellen¶

Routing ganz einfach erklärt:¶

Was ist Routing?¶

Wo wird Routing eingerichtet?¶

Schritt-für-Schritt-Anleitung**¶

Schritt 1: Eine Route definieren¶

Schritt 2: Router aktivieren¶

Schritt 3: Navigation anzeigen¶

4. Wie teste ich das?¶

Wichtig:¶

5. Formular in Angular mit Validierung¶

1. Einfaches Beispiel¶

Schritt 1: Module importieren¶

Schritt 2: Formular in der Komponente¶

Schritt 3: HTML-Template¶

Zusammenfassung¶

Unterschied zwischen `standalone: true` und `standalone: false`¶

Was ist `ngModel`?¶