Angular 11 kursbild

Schaffe in kürzester Zeit den praktischen Einstieg in die Frontend-Entwicklung mit Angular

... und lerne, wie du mithilfe von JavaScript und dem Angular Framework schöne Frontends für deine Webanwendungen programmieren kannst, um deinen persönlichen Wert auf dem Arbeitsmarkt drastisch zu steigern.

Jetzt deinen Premium Account aktivieren

Laufzeit des Kurses

ca. 5 Stunden

Benötigte Vorkenntnisse

HTML/CSS/JavaScript Kenntnisse

Moderne Webanwendungen bestehen heutzutage aus zwei Hauptbestandteilen, nämlich dem Frontend und dem Backend. Der Fokus wird in diesem Kurs auf einem der beliebtesten JavaScript Frameworks für die Frontend Entwicklung liegen, nämlich auf dem Angular Framework.

Mithilfe von diesem können wir moderne und sehr reaktive Webanwendungen entwickeln, die im Browser ausgeführt werden.

Im Kurs lernst du Angular also Schritt-für-Schritt und von Grund auf kennen.

Genauer gesagt wirst du lernen:

  • Wie man von Grund auf ein Frontend mithilfe von JavaScript und dem Angular Framework entwickelt
  • Was Komponenten und Services sind
  • Wie das Routing Modell von Angular funktioniert
  • Wie die Form Validierung funktioniert und umgesetzt wird
  • Wie man eine Angular Anwendung (also das Frontend) an einen Webserver (also das Backend) anbindet

All diese Kenntnisse wirst du "hands-on" anhand eines Praxisprojekts erwerben, denn wir programmieren eine komplette und funktionsfähige Webanwendung, über welche ein Hotel Buchungsanfragen entgegennehmen kann.

Wenn du also deinen JavaScript Wissensstand und somit deine Karriere als Softwareentwickler auf das nächste Level heben möchtest, um so in zukünftigen Bewerbungsgesprächen oder im Joballtag massiv zu punkten, solltest du diesen Kurs definitiv durcharbeiten.

Jetzt deinen Premium Account aktivieren

Inhaltsverzeichnis des Kurses

Modul 1: Einführung

angular kurs modul 1

In diesem Modul erhältst du eine detaillierte Einführung in diesen Kurs. Wir werden gemeinsam alle notwendigen Installationen Schritt-für-Schritt durchführen und die Hotel App (Praxisprojekt) in unserer Entwicklungsumgebung aufsetzen.

Diese Lektionen erwarten dich:

  • [Text] Quellcode und Links
  • [Video 1] Installationen: Node, NPM und Visual Studio Code
  • [Video 2] Installation von Angular CLI
  • [Video 3] Erstellung des Hotel App Projekts
  • [Video 4] Interpolating Syntax (Eine Eigenschaft aus der Component lesen)
  • [Video 5] CSS Styling mit Bootstrap

Modul 2: Buchung implementieren

angular kurs modul 2

In diesem Modul werden wir gemeinsam den Buchungs-Mechanismus für die Hotel-App implementieren. Du wirst dabei auch erfahren, was sogenannte Komponenten sind und wie ein Webserver funktioniert.

Diese Lektionen erwarten dich:

  • [Text] Wissenszeit: Components
  • [Video 1] Deine erste eigene Component (Bookings)
  • [Video 2] Booking anzeigen
  • [Video 3] Webserver Funktionalität
  • [Video 4] Mock Daten erstellen und implementieren

Modul 3: Routing

angular kurs modul 3

In diesem Modul wirst du lernen, wie man das Routing korrekt implementiert. Das Routing sorgt dafür, dass ein Nutzer von Website A auf Website B weitergeleitet wird. Es handelt sich hierbei also um ein essenzielles Grundkonzept, dass du unbedingt verstehen musst.

Diese Lektionen erwarten dich:

  • [Text] Wissenszeit: Router
  • [Video 1] Router Modul hinzufügen und einrichten
  • [Video 2] Startseite definieren (Redircet)
  • [Video 3] Navbar hinzufügen

Modul 4: Bookings erstellen, bearbeiten und löschen

angular kurs modul 4

In diesem Modul werden wir gemeinsam die Funktionalität implementieren, dass Buchungen erstellt, bearbeitet und gelöscht werden können. 

Diese Lektionen erwarten dich:

  • [Video 1] CreateBooking Component und Form hinzufügen
  • [Video 2] Formular verbinden
  • [Video 3] Booking mit Click-Handler erstellen
  • [Video 4] Booking bearbeiten (1)
  • [Video 5] Datepicker manuelles Binding einrichten
  • [Video 6] Booking bearbeiten (2)
  • [Video 7] Booking löschen

Modul 5: Services

angular kurs modul 5

Ein weiteres sehr wichtiges Konzept in der Webentwicklung sind die sogenannten Services. In diesem Modul wirst du deshalb erfahren, was man unter einem Service versteht und wie wir damit innerhalb unserer Anwendungen arbeiten können.

Diese Lektionen erwarten dich:

  • [Text] Wissenszeit: Services
  • [Video 1] Erklärung: Services
  • [Video 2] Booking Services erstellen
  • [Video 3] Booking Service implementieren (Teil 1)
  • [Video 4] Booking Service implementieren (Teil 2)

Modul 6: InMemory Web-API

angular kurs modul 6

In diesem Modul werden wir Schritt-für-Schritt eine InMemory Web-API an unser Frontend anbinden.

Diese Lektionen erwarten dich:

  • [Video 1] Node Packages installieren
  • [Video 2] InMemoryWebAPI konfigurieren
  • [Video 3] Get Bookings mit HttpClient implementieren
  • [Video 4] Delete Booking mit HttpClient implementieren
  • [Video 5] GetById, Update und Create mit HttpClient implementieren
  • [Video 6] Abschluss HttpClient

Modul 7: Styling

angular kurs modul 7

In diesem Modul werden wir das bereits funktionsfähige Frontend mithilfe von CSS nochmal etwas aufhübschen.

Diese Lektionen erwarten dich:

  • [Text] Styling
  • [Video 1] Dark Mode Styling

Modul 8: Form Validierung

angular kurs modul 8

In diesem Modul werden wir uns abschließend noch mit der Eingabe Validierung unseres Frontends beschäftigen, sodass sichergestellt ist, dass auch immer valide Daten an das Backend gesendet werden.

Diese Lektionen erwarten dich:

  • [Video 1] Einleitung in Form Validierung
  • [Video 2] Template Form Validierung Teil 1
  • [Video 3] Template Form Validierung Teil 2
  • [Video 4] Reactive Form Validierung Teil 1
  • [Video 5] Reactive Form Validierung Teil 2
  • [Video 6] Reactive Form Validierung Teil 3
  • [Video 7] So geht es weiter
Jetzt deinen Premium Account aktivieren