App-Entwicklung ganz einfach: eine Einführung in Angular 2

Auf dieses Webframework haben Entwickler lange gewartet: Am 14. September 2016 erschien die erste Version von Angular 2. Im Vergleich zum Vorgänger AngularJS gibt es einige zentrale Änderungen. Im Folgenden werden einige Schritte zur Erstellung von Angular-2-Apps und Codebeispiele aufgeführt.

Die Basis

Ein sehr empfehlenswertes Tool ist Angular CLI (Achtung: Angular CLI benötigt mindestens Node v4 und NPM v3). Dieses Konsolen-Tool erleichtert die Arbeit mit Angular, da man darüber eine funktionierende Instanz automatisch erstellen und diese sowohl kompilieren als auch starten kann. 

Sobald Angular-CLI installiert ist, lässt sich über ng new my-app-name ein neues Angular-2-Projekt erstellen. Über ng serve startet man die Angular-App. Im Konsolenverlauf kann man erkennen, über welche lokale URL die Applikation zur Verfügung steht:

** NG Live Development Server is running on http://localhost:4200. **

Ein zweites Starterpaket ist das Angular-2-Webpack-Starterkit – ebenfalls eine laufende Angular-Instanz, die über Webpack kompiliert wird. Den Code sowie die Installations-Anleitung findet man hier. 

Das Herzstück der App

Ganz grob zusammengefasst kann man die Änderungen von Angular 2 im Vergleich zu AngularJS auf klassenbasiertes JavaScript und die Nutzung von TypeScript reduzieren. Natürlich gibt es noch viele weitere Änderungen, auf die an dieser Stelle jedoch nicht genauer eingegangen werden soll.

Über komponentenbasierte Scripts erweitert man den Angular Core, bis daraus eine eigene App entsteht. Daher muss die Applikation in Komponenten aufgeteilt werden.

Das Herzstück einer App ist die Datei app.module.ts, wobei es sich lediglich um eine Namensempfehlung handelt. Dort laufen alle Funktionalitäten auf unterschiedliche Weise zusammen. Alle Dateien werden über Imports eingebunden.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';

@NgModule({
  declarations: [
    AppComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Die Import-Zeilen geben an, welche Module aus dem Angular-Code verwendet werden. Das BrowserModule dient dazu, die App zu starten, während das NgModule das „Hauptmodul" der App ist. Der Basiscode stellt an dieser Stelle noch zwei häufig verwendete Module bereit: Forms für Formulare und Http für HTTP-Requests, um Daten zu laden. Außerdem wird die Eltern-Komponente namens „AppComponent" geladen, welche alle weiteren App-Komponenten als Kind-Komponente enthält (siehe unter declarations).

Mit @NgModule wird das App-Modul erstellt. Dort findet man dann auch alle Abhängigkeiten und Komponenten, die dieses Modul enthält. Beim Laden dieses Moduls wird der AppComponent gestartet, wie unter bootstrap angegeben. 

Die Komponenten

Eine Komponente kann verschiedene Dateien beinhalten und muss lediglich die Datei name.component.ts enthalten. An dieser Stelle bietet es sich an, die einzelnen Frontend-Parts zu unterscheiden: JavaScript/TypeScript, HTML und CSS. Der AppComponent sieht in diesem Beispiel wie folgt aus:

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

Der Selektor gibt an, wie dieses Modul eingebunden wird. Dabei gibt es verschiedene Möglichkeiten, zum Beispiel als HTML-Element oder als HTML-Attribut. Außerdem wird den Komponenten noch der Pfad zum Template (HTML) und zum Stylesheet (CSS) mitgegeben. Dadurch kann man die verschiedenen Logiken voneinander trennen. Es besteht hier allerdings auch die Möglichkeit, alle Styles und HTML-Elemente inline zu erstellen:

// users.component.ts

@Component({
    selector: 'users',
    styles: [
        `.superuser { color: red; }
        td, th { border: 1px solid #eee; }
        `
    ],
    template: `<h1>Users</h1>
    <table class="table">
      <thead>
        <tr>
          <th>id</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of usersList | async" [class.superuser]="user.superuser">
          <td>{{user.id}}</td>
          <td (click)="onClick(user.username)">
            {{user.username}} 
          <span *ngIf="user.superuser">(superuser)</span></td>
        </tr>
      </tbody>
    </table>`
})

Je nachdem, wie umfangreich die HTML-Templates und das Styling werden, ist es ratsam, diese auszulagern. Außerdem kann man an der Stelle auch SCSS oder LESS einbinden und diese einfach in eine CSS-Datei kompilieren.

Nutzen der Angular CLI

Mithilfe der Angular CLI ist es einfach, solche Komponenten generieren zu lassen. Der Befehl dazu lautet schlicht: ng generate component [path], zum Beispiel ng generate component users.

Im Angular-Verzeichnis unter src/app wird ein Ordner mit dem Namen „users“ erstellt. Außerdem werden sowohl TypeScript- als auch HTML- und CSS-Dateien für diese Komponente erzeugt.

Dabei aktualisiert Angular bereits die app.module.ts und erweitert diese um die neue Komponente UsersComponent – also eine neue Abhängigkeit. In der TypeScript-Datei des neuen Component sind nun auch bereits die Templates und Styles verlinkt:

// users.component.ts

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

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit{

  constructor() { }

  ngOnInit() {
  }

}

Durch die Verwendung des Konsolentools, wird die Fehleranfälligkeit beim Erstellen von Components reduziert, da nicht nur die Namenskonventionen, sondern auch die entsprechenden Verlinkungen als Abhängigkeiten definiert werden. Allerdings muss – sofern vorhanden – das Routing entsprechend aktualisiert werden.

Fazit: Die Konsolen-Unterstützung von Angular ist nicht zu unterschätzen. Man spart eine Menge Zeit, wenn man darüber Apps und Komponenten anlegt. Außerdem ist damit auch die Lernhemmschwelle etwas geringer, da man sich nicht durch die Flut an Dateien kämpfen muss, die man bei einer reinen Angular-2-App möglicherweise installieren muss – die Kompilierung von TypeScript zu verständlichem JavaScript für die Browser ist schon mit dabei und man kann direkt loslegen. Wo der Weg mit Angular 2 auch immer hinführen mag – es bleibt sicherlich spannend!

Wer einen Eindruck davon erhalten möchte, was man mit Angular 2 alles produzieren kann, der sollte einen Blick auf Angular Expo werfen.