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 entwickelst du gemeinsam mit deinem Trainer Jannick Leismann eine Anwendung mit einer Struktur, wie sie auch bei großen Websites wie Facebook, Twitter und Google zum Einsatz kommt. Damit du schnell produktiv arbeiten kannst, lernst du zunächst die Grundlagen. Du machst dich mit TypeScript vertraut, denn damit entwickelst du mit Angular. Außerdem beschäftigst du dich mit Komponenten und Modulen und lernst die Template-Syntax kennen. Für dein Projekt verwendest du Atomic Design Patterns und Component Service Design Patterns. Es folgen fortgeschrittene Themen wie Services, Routing und HTTP-Requests. Du lernst, wie du mit dem Router durch die Anwendung navigierst, wie du ein Server-Backend über http Rest anbindest und wie du deine Anwendung deployen. Am Ende des Kurses bist du 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 lernst du mit diesem Videokurs:

In den Videokursen der heise academy lernst du IT-Themen anschaulich und verständlich. Du siehst den Experten bei der praktischen Arbeit zu und lässt dir dabei alles genau erklären. Das Wissen ist in kompakte Lerneinheiten unterteilt, sodass du den Kurs Schritt für Schritt durcharbeiten oder gezielt zu Lektionen springen kannst, die dich interessieren. Die persönliche Lernumgebung der heise academy hält viele Funktionen für dich bereit, die dich 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.