Zum Inhalt

Beispiel Ordnerstruktur

  • test_app
  • node_modules
  • public
  • src
    • app
    • bike-list
      • bike-list.component.ts
      • bike-list.component.html
      • bike-list.component.css
    • renter-form
      • renter-form.component.ts
      • renter-form.component.html
      • renter-form.component.css
    • shared
      • bike.model.ts
      • renter.model.ts
    • app.component.ts
    • app.component.html
    • app.component.css
    • app.routes.ts
    • main.ts
    • index.html
    • styles.css

Schritte und Umsetzung

1. Projektinitialisierung

  1. Terminal-Befehle: 

    ng new test_app
cd test_app
npm install bootstrap

  2. Bootstrap in angular.json einbinden: Datei: angular.json 

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

2. Komponenten erstellen

  1. Komponente für Fahrräder-Liste: 

    ng generate component bike-list

  2. Komponente für das Mieter-Formular: 

    ng generate component renter-form

3. Datenmodell erstellen

  1. Fahrradmodell: Datei: src/app/shared/bike.model.ts 

    export interface Bike {
    id: number;
    name: string;
    available: boolean;
}

  2. Mietermodell: Datei: src/app/shared/renter.model.ts 

    export interface Renter {
    id: number;
    name: string;
    email: string;
    phone: string;
}

4. Fahrräder-Liste anzeigen

  1. Daten hinzufügen: Datei: bike-list.component.ts 

    import { Component } from '@angular/core';
import { Bike } from '../shared/bike.model';

@Component({
    selector: 'app-bike-list',
    templateUrl: './bike-list.component.html',
    styleUrls: ['./bike-list.component.css']
})
export class BikeListComponent {
    bikes: Bike[] = [
        { id: 1, name: 'E-Bike 1', available: true },
        { id: 2, name: 'E-Bike 2', available: false },
        { id: 3, name: 'E-Bike 3', available: true }
    ];
}

  2. HTML-Ansicht: Datei: bike-list.component.html 

    <div class="container">
    <h2>Verfügbare Fahrräder</h2>
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let bike of bikes">
            {{ bike.name }} - 
            <span [class.text-success]="bike.available">Verfügbar</span>
            <span [class.text-danger]="!bike.available">Nicht verfügbar</span>
        </li>
    </ul>
</div>

5. Formular für Mieter mit Validierung

  1. Formular in renter-form.component.html: 

    <form (ngSubmit)="onSubmit()" #renterForm="ngForm">
    <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" id="name" class="form-control" required ngModel name="name">
    </div>
    <div class="mb-3">
        <label for="email" class="form-label">E-Mail</label>
        <input type="email" id="email" class="form-control" required ngModel name="email">
    </div>
    <div class="mb-3">
        <label for="phone" class="form-label">Telefonnummer</label>
        <input type="text" id="phone" class="form-control" required ngModel name="phone">
    </div>
    <button type="submit" class="btn btn-primary" [disabled]="!renterForm.valid">Absenden</button>
</form>

  2. Logik in renter-form.component.ts: 

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

@Component({
    selector: 'app-renter-form',
    templateUrl: './renter-form.component.html',
    styleUrls: ['./renter-form.component.css']
})
export class RenterFormComponent {
    onSubmit(form: NgForm) {
        console.log('Mieter-Daten:', form.value);
        form.reset();
    }
}

6. Routing einrichten

  1. Routes in app.routes.ts: 

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

const routes: Routes = [
    { path: 'bikes', component: BikeListComponent },
    { path: 'rent', component: RenterFormComponent },
    { path: '', redirectTo: '/bikes', pathMatch: 'full' }
];

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

  2. Routing in app.component.html: 

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Bike-Verleih</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" routerLink="/bikes">Fahrräder</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/rent">Mieter</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<router-outlet></router-outlet>

7. Hauptdateien

  • main.ts und index.html bleiben standardmäßig unverändert.
  • styles.css kann für globale Stile erweitert werden.

2. Beispiel:

Schritt-für-Schritt-Anleitung: Entwicklung einer Bike-Verleih-Applikation in Angular

1. Projektinitialisierung

  1. Erstellen des Angular-Projekts: Öffne ein Terminal und führe folgende Befehle aus: 
    ng new bike-rental
cd bike-rental
  2. ng new: Erstellt ein neues Angular-Projekt.

  3. Der Name des Projekts lautet bike-rental.

  4. Bootstrap integrieren (für Styling): Installiere Bootstrap: 

    npm install bootstrap
    Füge Bootstrap zur Datei angular.json hinzu:

  5. Datei: angular.json

  6. Ändern: 

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

  7. Projektstruktur vorbereiten: Das Projekt wird in folgende Module aufgeteilt:

  8. Mieter-Management (Renter Form): Formular zur Eingabe von Mieterdaten.
  9. Verleihverwaltung (Bike List): Liste der verfügbaren Fahrräder.

2. Erstellen der Komponenten

Angular-Komponenten sind die Bausteine der Anwendung.

  1. Erstellen der bike-list-Komponente: 
    ng generate component bike-list

  2. Erstellt eine Komponente, die die verfügbaren Fahrräder anzeigt.

  3. Erstellen der renter-form-Komponente: 

    ng generate component renter-form

  4. Erstellt eine Komponente für das Formular zur Aufnahme von Mieterdaten.

  5. Erstellen eines Moduls für geteilte Modelle und Daten:

  6. Datei: shared/bike.model.ts 
    export interface Bike {
    id: number;
    name: string;
    available: boolean;
}
  7. Datei: shared/renter.model.ts 
    export interface Renter {
    id: number;
    name: string;
    email: string;
    phone: string;
}

3. Anzeige der verfügbaren Fahrräder

  1. Logik in bike-list.component.ts: Datei: src/app/bike-list/bike-list.component.ts 

    import { Component } from '@angular/core';
import { Bike } from '../shared/bike.model';

@Component({
    selector: 'app-bike-list',
    templateUrl: './bike-list.component.html',
    styleUrls: ['./bike-list.component.css']
})
export class BikeListComponent {
    bikes: Bike[] = [
        { id: 1, name: 'Mountain Bike', available: true },
        { id: 2, name: 'City Bike', available: false },
        { id: 3, name: 'E-Bike', available: true },
    ];
}

  2. HTML-Ansicht in bike-list.component.html: Datei: src/app/bike-list/bike-list.component.html 

    <div class="container">
    <h2>Fahrrad-Verleih</h2>
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let bike of bikes">
            <strong>{{ bike.name }}</strong> - 
            <span [ngClass]="bike.available ? 'text-success' : 'text-danger'">
                {{ bike.available ? 'Verfügbar' : 'Nicht verfügbar' }}
            </span>
        </li>
    </ul>
</div>

  3. CSS-Design in bike-list.component.css: Datei: src/app/bike-list/bike-list.component.css 

    .text-success {
    font-weight: bold;
}
.text-danger {
    font-weight: bold;
}

4. Formular für Mieter (mit Validierung)

  1. Formular-HTML in renter-form.component.html: Datei: src/app/renter-form/renter-form.component.html 

    <form (ngSubmit)="onSubmit()" #renterForm="ngForm">
    <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" id="name" class="form-control" required ngModel name="name">
    </div>
    <div class="mb-3">
        <label for="email" class="form-label">E-Mail</label>
        <input type="email" id="email" class="form-control" required ngModel name="email">
    </div>
    <div class="mb-3">
        <label for="phone" class="form-label">Telefonnummer</label>
        <input type="text" id="phone" class="form-control" required ngModel name="phone">
    </div>
    <button type="submit" class="btn btn-primary" [disabled]="!renterForm.valid">Absenden</button>
</form>

  2. Logik in renter-form.component.ts: Datei: src/app/renter-form/renter-form.component.ts 

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

@Component({
    selector: 'app-renter-form',
    templateUrl: './renter-form.component.html',
    styleUrls: ['./renter-form.component.css']
})
export class RenterFormComponent {
    onSubmit(form: NgForm) {
        console.log('Mieter-Daten:', form.value);
        form.reset();
    }
}

  3. CSS in renter-form.component.css: Datei: src/app/renter-form/renter-form.component.css 

    .form-label {
    font-weight: bold;
}

5. Routing einrichten

  1. Routen in app.routes.ts: Datei: src/app/app.routes.ts 

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

const routes: Routes = [
    { path: 'bikes', component: BikeListComponent },
    { path: 'rent', component: RenterFormComponent },
    { path: '', redirectTo: '/bikes', pathMatch: 'full' },
];

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

  2. Navigation in app.component.html: Datei: src/app/app.component.html 

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Bike-Verleih</a>
        <ul class="navbar-nav me-auto">
            <li class="nav-item">
                <a class="nav-link" routerLink="/bikes">Fahrräder</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/rent">Mieter</a>
            </li>
        </ul>
    </div>
</nav>
<router-outlet></router-outlet>

Zusammenfassung

Das Projekt enthält: - Bike-Liste: Anzeige aller Fahrräder mit Verfügbarkeitsstatus. - Mieter-Formular: Aufnahme von Kontaktdaten mit Validierung. - Routing: Navigation zwischen den Seiten.

Falls gewünscht, könnte die nächste Stufe das Hinzufügen einer API sein, um Fahrraddaten dynamisch abzurufen.