Grundbausteine in Angular (Folge 2)
In dieser Happy Angular Podcast Folge schauen wir uns die Grundbausteine einer Angular Anwendung. Wir schaffen uns damit einen Überblick über das Angular Framework und auch über die nächsten Episoden. Für dich, sind hier alle wichtigen Erkenntnisse zusammengefasst.
Komponente
Die Komponente ist ein elementarer Baustein einer Angular Anwendung und definiert den Inhalt deiner Anwendung. Jede Komponente hat zwei Bestandteile: Template und Logik. Das Template beantwortet mit einer HTML Datei die Frage, wie einen Komponente aussehen soll. Das Verhalten und die Inhaltsdaten werden durch eine TypeScript Klasse definiert (Logik). Eine Komponente kann Styles besitzen, die nur für diese eine Komponente gelten. Es gibt grundsätzlich zwei Arten, wie eine Komponente verwendet werden kann: Wiederverwendbar und spezifisch. In einer wiederverwendbaren Komponente wird das Aussehen und Verhalten festgelegt und der Inhalt von außen gesetzt. In einer spezifischen Komponente ist auch der Inhalt definiert.
Direktive
Eine Direktive sind Befehle, die das Aussehen des Templates anpassen und kann auf ein HTML-Element oder Komponente angewendet werden. Es gibt drei Arten einen Direktive: Attribute Direktive, strukturelle Direktive und eine Komponente. Eine Attribute Direktive verändert die HTML-Attribute und DOM-Properties. Eine strukturelle Direktive manipuliert die Struktur des DOM Baums und kann für die Darstellung von Listen und Fallunterscheidungen genutzt werden.
Service
Für die Bereitstellung von wiederverwendbaren Methode oder zur Datenhaltung werden Services in Angular verwendet. Diese werden mit Hilfe von Dependency Injections vom Angular Framework bereitgestellt.
Angular Router
Eine Webseite besteht in der Regel aus mehreren einzelnen Ansichten, die mit Links durcheinander verknüpft sind. Bei einer Single Page Applikation ist es nicht gewünscht, jede Seite vom Server zu laden und würde zum Verlust des lokalen Zustandes führen. Der Angular Router ermöglicht die Seitennavigation ohne Server-Request: Anpassung der URL, Verwendung der Browser-Historie und analoges Benutzerverhalten wie bei einer klassischen Webseite. Durch die Routen-Konfiguration kann der Entwickler festlegen, welche Komponente soll bei welcher Route dargestellt werden.
Module
Durch Module ist es möglich, die Angular Anwendung in Sinnabschnitte zu gliedern. Grundsätzlich kann dabei in zwei Arten unterschieden werden: Feature-Module und Shared-Module. Feature-Module gliedern die Anwendung in fachliche Teile. In Shared-Module werden wiederverwendbare Komponenten und Direktiven gepackt.
Formulare
Jede Benutzereingabe ist eine FormControl. Diese erlauben, den Benutzer die Werte anzupassen. Außerdem kann ein Entwickler auch den Zustand abfragen (unverändert/geändert, berührt/unberührt, gültig/ungültig). In Angular gibt es zwei Wege, wie Formulare aufgebaut werden können: Template-Driven-Forms und Reactive Forms. In Template-Driven-Forms wird das Formular im Template definiert. Validierungen können mit Hilfe von Direktiven durchgeführt werden. In Reactive Forms wird das Formular in der TypeScript Klasse beschrieben und anschließend im Template verknüpft. Validierungen werden mit Hilfe von Funktionen realisiert.
Pipes
Durch Pipes können wir Rohdaten von der Ausgabe formatieren, ohne die Rohdaten anzupassen. Dadurch können wir beispielsweise Zahlen und Datums für den Benutzer schön darstellen.
