Angular: die wichtigsten Konzepte und Begriffe verständlich erklärt

Inhalt

  1. Strukturierung
  2. Lifecycle-Hooks
  3. Decorators
  4. State Management (Redux)

Konzepte und Begriffe in Angular und ihre Bedeutung

Angular als eines der umfangreichsten JavaScript Web-Applikations-Frameworks verwendet teilweise Begriffe die erklärungsbedüftig sind, sodass dir dieser Artikel als kleines Angular-Wiki oder Glossar der wichtigsten Konzepte und Begriffe weiterhelfen soll.

1. Strukturierung

1.1 Interfaces

Zum beschreiben von Eigenschaften und Methoden von Objekten kann der Constructor einer Klasse oder ein Interface verwendet werden. Letzteres ist in Angular die empfohlene Herangehendweise zur Typisierung.

export interface Country {
  city: string;
  capital: boolean;
  population: number;
}

Damit wird die Struktur eines Objektes (Country) angegeben, die nach dem Import in einer oder mehrerer Klassen dort für die weitere Initialisierung verwendet werden kann.

2. Lifecycle-Hooks

Angular Komponenten haben einen Lebenszyklus, während dem einzelne Elemente geladen und später wieder abgegeben werden. Die Lifecycle-Hooks bieten und die Möglichkeit in den Lebenszyklus einzugreifen.

2.1 ngOnInit

In einer Komponente soll der Code für die Initialisierung ausgeführt werden, wenn die Komponente geladen wird. Da dies in Angular nicht mit dem Constructor der Klasse gelöst wird, verwendet man die Methode ngOnInit, die automatisch geladen wird, sobald die Komoponente initialisiert wurde.

import { OnInit } from '@angular/core';
...

ngOnInit() {
  ...
}

Zum Implementieren der ngOnInit-Methode verwendet man den Import des OnInit Interface.

3. Decorators

Dekoratoren haben in Angular die Aufgabe, Klassen um bestimmte Funktionalitäten zu ergänzen und zu erweitern.

3.1 @Input Decorator

Mit dem @Input-Decorator werden in den meisten Fällen Daten aus einer Eltern-Komponente an eine Kind-Komponente weitergeleitet.
Im folgenden Beispiel wird der Wert eines Counters aus der countComponent an die appComponent übergeben:

child.component.ts

import { Component, Input} from '@angular/core';
...

export class ChildComponent {
  @Input() counterChild = 0;
  ...
}

Das counterChild Property wird in der ChildComponent über den @Input-Decorator initialisiert.

child.component.html

<h1>{{ counterChild }}</h1>

Im Template wird das Property angezeigt. Bei richtigem Property Binding aus dem App-Selector der ParentComponent wird der Wert aktualisiert.

parent.component.ts

<import { Component} from '@angular/core';
...

export class ParentComponent {
  counterParent = 0;

  increment() {
    this.counterParent = this.counterParent + 10;
  }
}

Die ParentComponent initialisiert das eigene Property counterParent, das über die increment-Methode hochgezählt wird.

parent.component.html

<ion-button (click)="increment()">+ 10</ion-button>
<app-child [counterChild]="counterParent"></app-dhild>

Im Template der ParentComponent kann ein Click-Event implementiert werden, mit dem die increment-Methode angesprochen wird.

Das Entscheidende ist das Property Bindung in der 2. Zeile. Hier wird mittels CSS-Selektor die ChildComponent geladen und der geänderte Wert counterParent per Binding an das Property counterChild übergeben und somit in der ChilComponent aktualisiert.

4. State Management (Redux)

4.1 Daten zentral aktualisieren mit dem BehaviorSubject

Service

import {State} from './state';
import {BehaviorSubject} from 'rxjs';

...

export class Service {
  private state: State = {
    counter: 0
  };
  state$ = new BehaviorSubject<State>(this.state);

  increment() {
    this.state.counter++;
    this.state$.next(this.state);
  }
...

Im Service wird das State Objekt mit dem Interface MyState typisiert und erzeugt.

state.ts

export interface State {
  counter: number;
}

In dem separat angelegten Interface wird die Eigenschaft Counter deklariert.

count.component.ts

import {Service} from '../../shared/service.service';
import {map} from 'rxjs/operators';

...

export class CountComponent {

constructor(
  public service: Service
) { }

counter$ = this.service.state$.pipe(
  map(state => state.counter)
);

In der Komponente wird wieder per Dependency Injection eine Instanz des Service erstellt. Die Daten werden aus dem BehaviorSubject geholt und werden mit dem map-Operator mit den entsprechenden Daten des State-Objekt ausgewählt.

count.component.html

<p>{{ counter$ | async }}</p>

Im Template wird das Observable mittels der Async-Pipe abonniert.

menu.component.html

<button (click)="service.increment()">Increment</button>

An zentraler Stelle der Anwendung wird der Button implementiert, der per Click-Event die Eigenschaft Counter hochzählt.

© All rights reserved.

Supported by