Recap & Outlook

Angular · Git · Teamwork

Dozent: Daniel Schlecht
Session 5 – Moderne Webentwicklung & Zusammenarbeit

Lernziele 🎯

• Verständnis für die Arbeitsweise mit Git (K2)
• Fundamentale Git-Kommandos anwenden (K3)
• Mit Merge Requests im Team arbeiten (K3)

Rückblick auf das Modul

• HTML → Struktur
• CSS → Gestaltung
• JS & TS → Logik & Sicherheit
• Git → Zusammenarbeit

Heute: Wir verbinden alles zu einem echten Entwicklungsprozess.

Was ist Versionsverwaltung?

• Ein System zur Nachverfolgung von Änderungen im Code
• Ermöglicht Teamarbeit und Versionssicherheit
• Beispiele: Git, Mercurial, SVN

Wie funktioniert Git?

Git speichert Snapshots deines Projekts – du kannst jederzeit in der Zeit zurückspringen.

• Lokales Repository = deine Arbeitskopie
• Remote Repository = z. B. GitHub, GitLab
• Branches = parallele Entwicklungszweige

Typischer Git-Workflow

# Projekt herunterladen
git clone https://github.com/meinprojekt.git

# Branch wechseln
git checkout -b feature/header

# Änderungen vorbereiten & speichern
git add index.html
git commit -m "Header hinzugefügt"

# Änderungen hochladen
git push origin feature/header
          

• clone – Repository kopieren
• checkout – Branch wechseln/erstellen
• add – Dateien zum Commit vormerken
• commit – Änderungen sichern
• push – Änderungen hochladen
• pull – Neues vom Server holen

Übung 1 🧩

Starte dein eigenes Git-Projekt:

1. Lege ein neues Repo auf GitHub oder GitLab an
2. Kopiere es lokal mit git clone
3. Erstelle eine neue Datei readme.md
4. Führe git add und git commit aus
5. Push dein Projekt online

Branches & Teamwork

Branches erlauben parallele Entwicklung ohne Konflikte.

git checkout -b feature/footer
# Änderungen machen
git add footer.html
git commit -m "Footer hinzugefügt"
git push origin feature/footer
          

→ Später kann der Branch wieder in den Hauptzweig gemerged werden.

Merge Requests (Pull Requests)

Merge Requests sind Vorschläge, um Codeänderungen in den Hauptzweig zu übernehmen.

• Teamkollegen prüfen den Code („Code Review“)
• Diskussionen & Kommentare direkt im Tool
• Qualitätssicherung durch Zusammenarbeit

Übung 2 🧩

Arbeitet im Team:

• Jede Person erstellt einen eigenen Branch
• Bearbeitet eine Datei (z. B. team.html)
• Push zum Remote Repo
• Erstellt einen Merge Request
• Gebt gegenseitig Feedback

Merge-Konflikte verstehen

Wenn zwei Personen denselben Code ändern, entsteht ein Konflikt. Git zeigt ihn deutlich an:

<<<<<<< HEAD
Version A
=======
Version B
>>>>>>> feature-branch
          

→ Konflikte manuell lösen, dann committen & pushen.

Ausblick: Angular Framework

Angular ist ein modernes TypeScript-Framework für skalierbare Webanwendungen.

• Komponentenbasiert
• Zentrale Datenbindung & Routing
• Starke Integration mit TypeScript

Beispiel: Eine einfache Angular-Komponente

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

@Component({
  selector: 'app-hello',
  template: `
Hello {{ name }}
`
})
export class HelloComponent {
  name = 'World';
}
          

→ TypeScript trifft HTML – das ist moderne Webentwicklung!

Zusammenfassung

• Git = Sicherheit, Nachvollziehbarkeit, Teamarbeit
• Grundbefehle: clone, checkout, add, commit, push, pull
• Merge Requests = Zusammenarbeit mit Review
• Angular = Nächster Schritt in der Webentwicklung

Glückwunsch 🎉

Du hast die Grundlagen von HTML, CSS, JavaScript, TypeScript und Git gemeistert!

Next Steps: Vertiefe dich in Angular, React oder Vue – oder baue dein erstes eigenes Projekt.

Der beste Weg zu lernen ist: Coden, Committen, Wiederholen.

Fragen oder Feedback?

Was nimmst du aus dem Kurs mit? Welche Themen willst du weiter vertiefen?