Fachbücher kompakt zusammengefasst

    Angular (v8): 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.

    Neueste Beiträge

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

    Inhalt StrukturierungLifecycle-HooksDecoratorsState Management (Redux) Konzepte und Begriffe in Angular und ihre Bedeutung

    TypeScript: Grundlagen und Vorteile

    Inhalt Grundlagen TypeScriptVorteile der TypisierungBeispiele der TypisierungVariablen-Deklaration und InitialisierungArray-Deklaration und InitialisierungKlassen-Deklaration und Initialisierung ihrer EigenschaftenMethoden und die Initialisierung...

    JavaScript: Objekte erzeugen und Values abrufen

    Inhalt Grundlagen ArraysGrundlagen ObjekteObjekt mit enthaltenen ArraysObjekt mit verschachtelten Arrays 1. Grundlagen Arrays

    Ionic (V4): Bewährte User Interface Komponenten einfach implementieren

    Inhalt Anforderungen, um mit Ionic (V4) zu entwickelnImplementierung ausgewählter Komponenten ausführlich erklärt 1. Anforderungen, um...

    Git und die wichtigsten fortgeschrittenen Techniken

    Inhalt Schnelleinstieg - Befehle fortgeschrittener TechnikenKann man aus Git noch mehr herausholen?Fortgeschrittene Techniken ausführlich erklärt

    Ähnliche Beiträge

    Kommentar schreiben

    Deinen Kommentar abschicken
    Gebe bitte deinen Namen ein