04 Modularisierung

Modularisierung und eigne Direktive

Inhalt

1. Konzepte zur Modularisierung
2. Erstellung von Components
3. Kommunikation von Components
4. Parent>Child Kommunikation (Input)
5. Child>Parent Kommunikation (Output)
6. Eigene Direktive
7. Template-Auslagerung

Ausgangslage

Sie kennen bereits die Struktur-Direktive von Angular2 (z.B. ngIf) und können mit Data-Binding umgehen.

Ziel

Am Ende dieses Kapitel sind Sie in der Lage, Ihre Applikation in mehrere verknüpfte Module zu zerlegen. Dazu gehören bspw. die Erstellung von HTML-Template-Dateien, Methoden-Auslagerung in Direktive und Child-Parent-Componenten.

Begriffsbestimmung

In Folgenden sind die Wörter "Komponente" und die englische Übersetzung "Component" unterschiedlich zu verstehen. Die "Komponente" wird im Rahmen dieses Wikis als Teil einer Software verstanden, wohingegen mit "Component" die Angular2 spezifische Auslegung gemeint ist.

---

1. Konzepte zur Modularisierung

Definition Modularisierung:

„Modularisierung ist ein Prinzip, nach dem viele Systeme entwickelt werden. Die Idee besteht darin, das Gesamtsystem nach dem Baukastenprinzip aus Einzelbausteinen (den sogenannten Modulen) zusammenzusetzen.“

Quelle: http://www.inf-schule.de/modellierung/ooppython/bank/modularisierung/konzept_modularisierung

Modularisierung heißt, ein System in verschieden kleinere Bausteine aufzugliedern. Dabei gibt es im Grundsatz zwei verschiedene Ansätze nach denen modularisiert werden kann:

1. Modularisierung nach Type
2. Modularisierung nach Feature

Bei der Modularisierung nach Type wird die Applikation nach dem verschiedenen Typen der Anwendung gegliedert. Ähnlich dem MVC-Pattern kann ein Angular-Projekt in Controller, Services, Views, etc. gegliedert werden. Angular empfiehlt jedoch die Gliederung nach Feature.

2. Erstellung von Components

Um eine Modularisierung in einem Angular2 Projekt zu erreichen, wird die Applikation in verschieden kleinere Komponenten unterteilt.

Eine Komponente kann die sog. "Components" in Angular sein. Components enthalten sind Direktive mit einer View/Template, wohingegen Attribute- und Struktur-Direktive keine eigene View haben. Components sind damit Module, die das Aussehen einer View enthalten, Direktive ändern dagegen nur das Aussehen bzw. Verhalten von Elementen (z.B. Hintergrund bei Mouse-Hover gelb). Angular2 Docs

Zur Erstellung einer Component wird zunächste eine neue Typscript-Datei erstellt und nach dem Feature sowie Type benannt. Im Falle der Erstellung einer Hero-Detail-Component folglich "hero-detail.component.ts. In der Datei erfolgt zunächst ein Import des Component-Dekorators aus dem Angular-Core, sowie innerhalb des @Component Tags die Bennennung eines individuellen Selektor-Tags.

hero-detail.component.ts

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

@Component({
  selector: 'my-hero-detail',
  templateUrl: 'app/hero/hero-detail.component.html'
})
export class HeroDetailComponent {
  hero: Hero;
  }

Mit Hilfe des Selector-Tags kann die Component in eine weitere Component eingebunden werden: app.component.ts

  <my-hero-detail></my-hero-detail>

Nun muss noch die neue Component im App-Modul deklariert werden, damit sie auch von allen Komponenten genutzt werden kann.

app.module.ts

import {HeroDetailComponent} from "./hero/hero-detail.component";


@NgModule({
  imports: [ BrowserModule, FormsModule, HeroModule ],
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

3. Kommunikation von Components

Die Struktur von Components folgt dem Parent-Child-Muster, d.h. es gibt immer ein übergeordnete Component (Parent), welches wieder viele untergeordnete Components (Childs) haben kann. Dies lässt sich an folgender Abblidung verdeutlichen:

Um nun vom Parent zu Child zu kommunizieren wird der sog. "Input" verwenden, d.h. es wird etwas von dem Parent in das Child hineingegeben. Soll die Kommunikation von Child zu Parent erfolgen, müssen die Daten aus dem Child heraus ("Output") geholt werden.

3.1. Parent>Child Kommunikation (Input)

Für die Kommunikation vom Parent zu Child wird der Input-Dekorator von Angular2 verwendet. Dazu wird zunächst ein Import aus dem Angular-Core gemacht. Danach kann @Input() verwendet werden

hero-detail.component.ts

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

@Component({
  selector: 'my-hero-detail',
  templateUrl: 'app/hero/hero-detail.component.html'
})
export class HeroDetailComponent {
  @Input() hero: Hero;
  }

Um nun @Input im Child zu nutzen, müssen im Parent die Daten mittels Data-Binding übergeben werden: app.component.ts

  <my-hero-detail [hero]="selectedHero"></my-hero-detail>

Dabei wird hier die Property [hero] den Wert "selectedHero" zugewiesen und, da es innerhalb der Child-Selektor-Tag genutzt wird, diesem übergeben. Im Child wird das Property-Binding abgeschlossen, indem dort nach der Input-Annotation der Name der Property verwendet wird ("hero")

3.2. Child>Parent Kommunikation (Output)

Für die Kommunikation von Child zu Parent kann kein Property-Binding verwendet werden, da das Binding im Template des Parents steckt und das Child dadurch keinen Zugriff, d.h. in diesem Fall Werte/Daten dem Binding übergeben, hat. Daher wird ein Event gebraucht, welches die Kommunikation von Child zu Parent triggert.

Dazu wird zunächst wie beim Input der Output-Dekorator aus dem Angular-Core importiert. Ebenso wird der EventEmitter benötigt um ein Event zu triggern.

hero-detail.component.ts

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

@Component({
  selector: 'my-hero-detail',
  template: '[...]<label> Villian: </label> <input #villianInput (keyup)="onKeyup(villianInput.value)" placeholder="villian"/>[...]'
})
export class HeroDetailComponent {
  @Input() hero: Hero;

  @Output() addVillian: EventEmitter<string> = new EventEmitter<string>();

  onKeyup(value: string){
    this.addVillian.emit(value);
  }
  }

In diesem Fall wird onKeyup das Event getriggert und in den String addVillian geschrieben. Dieser wird wiederum mittels Output-Annotation dem Parent verfügbar gemacht.

Um nun im Parent auf den Child-Value zuzugreifen, muss der Wert des Strings mit $event aufgerufen werden.

app.component.ts

  <my-hero-detail [hero]="selectedHero" (addVillian)="villian = $event" ></my-hero-detail>

Im Beispielcode wird der Wert der Proberty villian zugeordnet, sodass im Template {{villian}} verwendet werden kann.

4. Eigene Direktive erstellen

Zur Wiederholung: Eine Direktive enthalten keine View/Template, sondern ändern das Verhalten und Aussehen von Elementen. Sie enthalten daher einen Construktor und ggf. weitere Mehtoden zur Änderung von Elementen.

Zur Erstellung von Direktiven wird

1. in einer neuen Typescript-Datei "Direktive" aus dem Angular-Core importiert
2. mittels @Directive und einem Selektor dir Art der Komponente festgelegt
3. die Direktive in eine Component eingebunden
4. die Direktive im App-Modul deklariert

my.directive.ts

import {Directive } from '@angular/core';

@Directive({
selector: '[myDirective]'
})

export class MyCustomDirective {
  constructor() {  }
  private function(){   }
  }

app.component.ts

<p myDirective>This text will change</p>

app.module.ts

import {MyCustomDirective} from "./mycustom.directive";
@NgModule({
declarations: [
    MyCustomDirective
      ]

4.1. Direktiven Werte übergeben

Direktiven können auch wie bei Components Werte übergeben werden. Die geschieht ebenfalls über die @Input-Annotation und Data-Binding.

app.component.ts

<input type="radio" (click)=„data=‚someData">
<p [myDirective] = „data“>This text will change</p>

my.directive.ts

import {Directive } from '@angular/core';

@Directive({
  selector: '[myDirective]'
  })

  export class MyCustomDirective {
@Input('myDirective') data: string;
  constructor() {  }
  private function(this.data){   }
  }

5. Template-Auslagerung

Das Template kann mittels templateUrl: /absolute/path/to/file.html innerhalb der @Component Metadaten ausgelagert werden.

Siehe Angular Dokumentation