Recap & Outlook

Teamwork mit Git · Angular

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)

Was ist Versionsverwaltung?

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

Wie funktioniert Git?

Git speichert Snapshots deines Projekts - du kannst jederzeit in der Zeit zurĂĽckspringen.

Git Flow Diagramm
  • 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 an
  2. Kopiere es lokal mit git clone
  3. Erstelle eine neue Datei index.html
  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
Angular Logo

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

RĂĽckblick auf das Modul

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

Heute: Wir verbinden alles zu einem echten Entwicklungsprozess.

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?