In der Angular Basic Tutorialreihe werden wir Stück für Stück eine Anwendung mit Angular programmieren. Das Tutorial besteht aus Praxis- und Theorieteile, in denen wir entweder an der Anwendung weiterentwickeln oder uns Konzepte anschauen. Das Tutorial wendet sich speziell an Personen, die noch nicht so viel Entwicklungserfahrung haben oder sich Angular aneignen wollen. Einzelne Teile sind aber bestimmt auch für Entwickler:innen mit Vorerfahrung interessant.

Jedes Tutorial ist so aufgebaut, dass zunächst das Ziel des Kapitels definiert wird. Versuche gerne zunächst selbstständig dieses Ziel zu erreichen und gleiche am Ende ggf. deine Lösung mit der vorgestellten Lösung ab. Für jeden Praxisteil gibt es einen Branch in GitLab, welcher genau den Stand darstellt und auf welchem bei Bedarf weiter aufgebaut werden kann. Ich habe versucht, die Praxisteile möglichst kurz zu halten, so dass dort einzelne Aspekte betrachtet werden.

Umfang der Anwendung

Die App, die wir schreiben werden, wird ein Fitnessstudio darstellen mit Mitgliedern und Kursen. Am Ende können wir:

  • Mitglieder anzeigen, hinzufügen, editieren und löschen
  • Kurse anzeigen, hinzufügen, editieren und löschen
  • Zwischen Mitglieder- und Kursbereich über eine Navigation wechseln
  • Mitgliedern Kurse zuweisen
  • Für Kurse anzeigen, welche Mitglieder daran teilnehmen

Viel Spaß damit und hier geht’s zu Teil 1.

Inhalt des Tutorials:

Basic:

  • Aufsetzen eines Angular-Projektes
  • Aufbau eines Angular-Projektes
  • Hinzufügen einer Komponentenbibliothek
  • Erzeugen einer neuen Komponente
  • Kommunikation zwischen Komponenten
  • Erzeugen eines Services
  • Angular Flex-Layout
  • Routing
  • Darstellung von Daten in einer Angular-Material-Tabelle
  • MatTable: Pagination, Filtering, Sorting
  • Formulare
  • Daten aus einem Formular speichern
  • Dialoge
  • Observables
  • Der HttpClient - Kommunikation mit dem Backend
  • NgRx Store

Advanced:

  • Schreiben eines eigenen FormControls
  • Modularisierung der Anwendung
  • Routing Guards
  • Route Resolver
  • Permission Handling
  • Smart-/Presentational-Component Konzept
  • Komponentenentwicklung mit Storybook