📖1. Hero Editor

Generieren von Componenten, Modulen, Directives, ...

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.

Component

In Angular erstellst du diverse Komponente welche in einer Seite geladen und angezeigt werden können. Komponente werden mit der folgenden Annotation gekennzeichnet.

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
  })

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.

Interfaces in TypeScript

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.

export interface Hero {
  id: number;
  name: string;
}

Data Binding

Das Data Binding mit Angular ist eines der Hauptvorteile des Frameworks:

One-Way Data Binding

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.

<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

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.

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

<div class="padding">
    <h1>Hello {{ username }}</h1>
    <input type="text" value="" (input)="changeUsername($event)">
</div>

...
export class TwoWayBindingExamplePage implements OnInit {

  username: string = "max.muster";
  ngOnInit() {
  }
  changeUsername(ev) {
    this.username = ev.target.value;
  }

}
...

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.

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

Nun binden wir den Namen des Helden an das Textfeld, so dass bei jeder Änderung im Formular das Property im Hintergrund geupdated wird.

<div>
  <label for="name">Hero name: </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

Pipe

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:

{{ ichBinEinCamelCaseText | uppercase }}

Output: ICHBINEINCAMELCASETEXT

Übung

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.

1. Passe dein Interface an, die Superkraft hat den Datentyp string

2. Füge der Heldin bei der Deklaration eine Superkraft hinzu

3. Erstelle ein zusätzliche Textfeld und binde die Superkraft daran

   1. Wir haben vorher zwei verschiedene Varianten angeschaut wie du Daten binden kannst, für welche entscheidest du dich?