Hinweise und Zusatzaufgaben zu Kapitel 1
Last updated
Last updated
WebStorm ermöglicht dir sehr einfach neue Elemente für dein Projekt zu erstellen, dazu führe einen Rechtsklick auf den Ordner aus in welchem du ein neues Element erstellen möchtest.
Nun kannst du unter new / Angular Schematic alle gewünschten Elemente einfügen. Während dem Tippen bringt dir WebStorm Vorschläge, was du eventuell erstellen möchtest. Probiere es aus.
In Angular erstellst du diverse Komponente welche in einer Seite geladen und angezeigt werden können. Komponente werden mit der folgenden Annotation gekennzeichnet.
Innerhalb der Komponente Referenziert du das Template (.html) und das dazugehörige Design (.scss). Ebenso wichtig ist der Selektor, mit diesem wählst du einen passenden Namen für deine Komponente. In Angular ist es Norm geworden, dass Komponente mit dem Prefix "app-" gekennzeichnet werden, halte dies doch ebenfalls ein.
Wie du bereits weisst, ist TypeScript eine typisierte Programmiersprache, welche auf JavaScript aufbaut. In dem du Interfaces nutzt, definierst du im Code Verträge (Strukturen) für Daten. Somit stellst du sicher, das beispielsweise ein Held eine Id und einen Namen benötigt. So kannst du verhindern, dass ein Objekt übergeben wird, welche diesen Vertrag bricht.
Das Data Binding mit Angular ist eines der Hauptvorteile des Frameworks:
Bei einer einfachen Applikation hat man Daten im Model (blau) und meist ein Template / HTML (rot) bei welchem die Daten einmalig zusammengefĂĽhrt werden und dem User in einer View (grĂĽn) dargestellt werden. Die Verschmelzung von Daten und Code passiert meist nur einmalig.
Das One-Way Data Binding ist nicht fĂĽr die Editierung oder Bearbeitung mittels Formularen geeignet. FĂĽr solche AnsprĂĽche folgt das Two-Way Data Binding.
Genau hier hat Angular seinen Vorteil. Das Data Binding in Angular synchronisiert das Model mit der View und umgekehrt. So kann ein Wert in der View geändert werden und gleichzeitig wird der Wert im Model auch angepasst. Umgekehrt natürlich auch, siehe Grafik rechts. Diese ständige Zweiweg-Synchronisation nennt man Two-Way Data Binding.
Dafür gibt es zwei gängige Arten dies zu ermöglichen:
Var 1 (mit Bedacht verwenden): Du bindest dein Formular Feld an eine Funktion, welche bei der AusfĂĽhrung deinen Wert aktualisiert
Durch das binden an eine Funktion wird die ChangeDetection von Angular sehr häufig getriggert, wenn du in der changeUsername Methode ein console.log einfügst, siehst du es.
Variante 2 (empfohlen): Die Verwendung von ngModel
ngModel
erlaubt es, eine Variable an ein Input-Feld in der App zu binden. Dies funktioniert nicht nur mit Textfelder (Inputs) sondern auch mit Radios, Selects, usw.
Nun binden wir den Namen des Helden an das Textfeld, so dass bei jeder Ă„nderung im Formular das Property im Hintergrund geupdated wird.
Filter resp. auch Pipes genannt können in Angular hinzugefügt werden um Daten zu formatieren oder sortieren. Anbei eine Auflistung der wichtigsten Filtermöglichkeiten welche dir Angular bereits mitbringt:
currency
Formatiert eine Nummer zu einem Währungs-Format
date
Formatiert ein Datum zu einem speziellen Format
json
Formatiert ein Objekt zu einem JSON string.
lowercase
Formatiert ein String zu kleinbuchstaben
uppercase
Formatiert ein String zu GROSSBUCHSTABEN.
number
Formatiert einen String in eine Zahl
async
Abonniert einen Observable oder ein Promise und gibt den letzten Wert zurĂĽck, den es ausgegeben hat. Sie dazu mehr unter: https://angular.io/api/common/AsyncPipe
Beispiel:
Output: ICHBINEINCAMELCASETEXT
Du kannst jetzt bereits einen Helden erstellt und kannst dessen Namen ändern. Jeder Held hat jedoch ebenfalls noch eine Superkraft. Dieser soll ebenso angezeigt und editierbar gemacht werden.
Passe dein Interface an, die Superkraft hat den Datentyp string
oder undefined
FĂĽge der Heldin bei der Deklaration eine Superkraft hinzu, du kannst selbst entscheiden welche Superkraft
Erstelle ein zusätzliche Textfeld und binde die Superkraft daran
Wir haben vorher zwei verschiedene Varianten angeschaut wie du Daten binden kannst, fĂĽr welche entscheidest du dich?