Angular 12 für Frontend-Entwickler

Angular ist ein erfolgreiches clientseitiges JavaScript-Webframework zur Erstellung von Single-Page-Webanwendungen. Es wird gerne für die Programmierung von kommerziellen und industriellen Anwendungen verwendet, da es viele vorgefertigte Lösungen wie Datenbindung, Formularunterstützung, Routing und Testautomatisierung mitbringt.

In diesem Kurs entwickeln Sie gemeinsam mit Ihrem Trainer Jannick Leismann eine Anwendung mit einer Struktur, wie sie auch bei großen Websites wie Facebook, Twitter und Google zum Einsatz kommt. Damit Sie schnell produktiv arbeiten können, lernen Sie zunächst die Grundlagen. Sie machen sich mit TypeScript vertraut, denn damit entwickeln Sie mit Angular. Außerdem beschäftigen Sie sich mit Komponenten und Modulen und lernen die Template-Syntax kennen. Für Ihr Projekt verwenden Sie Atomic Design Patterns und Component Service Design Patterns. Es folgen fortgeschrittene Themen wie Services, Routing und HTTP-Requests. Sie lernen, wie Sie mit dem Router durch die Anwendung navigieren, wie Sie ein Server-Backend über http Rest anbinden und wie Sie Ihre Anwendung deployen. Am Ende des Kurses sind Sie in der Lage, eine vollständige, interaktive Anwendung mit Angular zu erstellen.

Alle Video-Lektionen im Überblick:

• 1. Einführung und Einrichtung

  • Herzlich willkommen in diesem Kurs

  • Node, NPM und Visual Studio Code installieren

  • Angular CLI installieren

  • Projekt Hotel-App erstellen

  • Eine Eigenschaft aus der Component lesen

  • CSS Styling mit Bootstrap

  • Quiz: Einführung und Einrichtung

• 2. Buchungen implementieren

  • Intro

  • Deine erste eigene Component

  • Booking anzeigen

  • Webserver-Funktionalität

  • Mock-Daten erstellen und implementieren

  • Quiz: Buchungen implementieren

• 3. Routing

  • Intro

  • Router-Modul hinzufügen und einrichten

  • Startseite definieren mit Redirect

  • Navigationsbar hinzufügen

  • Quiz: Routing

• 4. Booking erstellen, bearbeiten und löschen

  • Intro

  • CreateBooking Component und Form hinzufügen

  • Formular verbinden

  • Booking mit Click-Handler erstellen

  • Booking bearbeiten

  • Datepicker: Manuelles Binding einrichten

  • Booking bearbeiten

  • Booking löschen

  • Quiz: Booking erstellen, bearbeiten und löschen

• 5. Services

  • Intro

  • Was sind Services?

  • Booking Service erstellen

  • Bookings im Service holen und löschen

  • Bookings im Service hinzufügen und bearbeiten

  • Quiz: Services

• 6. InMemory Web-API

  • Intro

  • Node Packages installieren

  • InMemoryWebAPI konfigurieren

  • Get Bookings mit HttpClient implementieren

  • Delete Booking mit HttpClient implementieren

  • GetById, Update und Create mit HttpClient implementieren

  • HttpClient abschließen

• 7. Styling

  • Intro

  • Styling anpassen: Dark Mode

• 8. Form-Validierung

  • Intro

  • Einleitung

  • Template Form erstellen

  • Fehler abfragen

  • Das FormsModule importieren

  • Form mit Component verbinden

  • Validators verwenden

  • Quiz: Form-Validierung

  • Fazit und Kursabschluss

So lernen Sie mit diesem Videokurs:

In den Videokursen der heise Academy lernen Sie IT-Themen anschaulich und verständlich. In den Videos schauen Sie Experten bei der praktischen Arbeit zu und lassen sich alles genau erklären. Das Wissen ist in kleine Lernschritte und Aufgaben unterteilt. So können Sie den Kurs Lektion für Lektion durcharbeiten oder gezielt zu Themen springen, die Sie interessieren. Die persönliche Lernumgebung der heise Academy bietet viele Funktionen, die Sie beim Lernen unterstützen:

• Flexibler Videoplayer mit vielen Steuerungsmöglichkeiten

• Wissensquiz zur Lernkontrolle

• Lernhistorie und Lernfortschritt

• Lesezeichen und Notizen

• Volltextsuche in den Videos

• Frage-den-Experten-Modul

• Übungsmaterial zum Mitmachen

• Responsive Web-App und Videostreaming für alle Endgeräte

Technische Voraussetzungen:

Für diesen Videokurs werden lediglich ein Browser (mit eingeschalteter JavaScript-Funktionalität) und eine Internetverbindung benötigt.