=> { /* ... */ })
.catch(err => console.error(err));
Listing 1–2 Die Datei src/main.ts
Bootstrapping: die Anwendung zum Leben erwecken platformBrowser-Dynamic für den Browser
Die einzige Aufgabe der Datei ist es, das zentrale Angular-Modul AppModule zu starten. Das Starten der Anwendung nennt man in der Angular-Welt »Bootstrapping«. Das Bootstrapping ist spezifisch für die Zielplattform (z. B. Web/Hybrid/Nativ) und findet daher in einer eigenen Datei statt, um die Anwendung unabhängig von der Plattform zu halten. Diese Details sind für uns bis hierhin noch gar nicht wichtig. Wir nutzen zunächst nur die Plattform platformBrowserDynamic, denn wir wollen eine Webanwendung für den Browser entwickeln.
Achtung: Bootstrap hat nichts mit CSS zu tun!
Auch wenn wir im Zusammenhang mit Webanwendungen schnell an das CSS-Framework Bootstrap denken, besteht kein Zusammenhang mit dem Bootstrapping einer Angular-Anwendung.
1.3Das zentrale Angular-Modul
Der Decorator @NgModule()
Unsere nächste Station ist das zentrale Angular-Modul in der Datei app.module.ts im Unterverzeichnis app. Eine Angular-Anwendung hat immer ein solches zentrales Modul. Hier werden alle Bestandteile der Anwendung gebündelt, also alle Komponenten, Services, Feature-Module usw. Momentan besitzen wir genau ein Modul, das wird sich aber im Verlauf dieses Buchs noch ändern. Man erkennt ein Angular-Modul daran, dass es mit dem Decorator @NgModule() markiert ist.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Listing 1–3 Die Datei src/app/app.module.ts
Im AppModule wird unter anderem die Klasse AppComponent importiert. Das ist die Hauptkomponente der Anwendung, die wir uns gleich noch genauer ansehen. Die Komponente ist in den Abschnitten declarations und bootstrap im AppModule angegeben. Damit wird die Komponente in der Anwendung bekannt gemacht, sodass wir sie verwenden können. Die Eigenschaft bootstrap sorgt dafür, dass die Komponente beim Start der Anwendung geladen wird.
Achtung: JavaScript-Modul ≠ Angular-Modul
Der Begriff Modul ist doppelt besetzt. Zur besseren Unterscheidung reden wir von JavaScript-Modulen, wenn wir modularen JavaScript-Code nach dem ECMAScript-2015-Standard meinen. Mit dem Begriff »Modul« meinen wir meist ein Angular-Modul, also einen logischen Container für Bestandteile aus der Angular-Welt.
1.4Die erste Komponente
Wir haben jetzt die Reise vom HTML-Grundgerüst über das Bootstrapping bis hin zum zentralen Anwendungsmodul gemacht. Dort wurde unsere erste Komponente deklariert und in der Anwendung bekannt gemacht: die AppComponent. Hier beginnt der Spielplatz für unsere eigenen Inhalte!
Eine Komponente ist immer eine Kombination von sichtbarem Template und dazugehöriger Logik. Wir schauen uns das Komponentenkonzept im Verlauf dieses Buchs noch sehr ausführlich an, denn die Komponenten sind die Grundbausteine einer jeden Angular-Anwendung. Jede Anwendung besitzt eine Hauptkomponente (engl. Root Component), von der aus alle Inhalte aufgebaut werden.
Wir werfen zunächst einen Blick auf die Datei app.component.ts.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
}
Listing 1–4 Die Datei src/app/app.component.ts
Hauptkomponente der Anwendung
Hier sehen wir eine TypeScript-Klasse mit einer Besonderheit: dem Decorator @Component(). Hier wird später die Logik unserer Komponente untergebracht. Außerdem finden wir im selben Ordner die Datei app.component.html und eine CSS-Datei mit demselben Namen. Die HTML-Datei beinhaltet das Template der Komponente, also den Teil, der nachher tatsächlich im Browser zu sehen ist. In der CSS-Datei werden Stylesheets untergebracht, die zu dieser Komponente gehören.
Probieren Sie ein wenig herum: Bearbeiten Sie doch einmal das Template und sehen Sie, wie die Anwendung auf der rechten Seite automatisch aktualisiert wird.
Die genaue Bedeutung aller Angaben in der AppComponent betrachten wir bald. Wir werden im weiteren Verlauf dieses Buchs immer wieder mit Komponenten arbeiten und alle Aspekte klären.
Eine Angular-Anwendung startet jedoch nicht automatisch, nur weil eine passende Komponente vorhanden ist. Stattdessen muss die Verarbeitung der ersten Komponente explizit angestoßen werden. Dieser Schritt wurde bereits erledigt: Im AppModule finden wir unter bootstrap den Eintrag für unsere Hauptkomponente.
Die Hauptkomponente ins HTML einbinden
Wenn Sie die TypeScript-Klasse der AppComponent aufmerksam betrachtet haben, ist Ihnen sicher auch der Eintrag selector im Decorator aufgefallen. Mit diesem Eintrag können wir festlegen, in welchen Elementen unsere Komponente dargestellt wird. Und erinnern Sie sich? In der Datei index.html war bereits ein Element mit dem Namen <my-app></my-app> vorhanden. Dieses Element passt zum Selektor my-app der AppComponent. Der zuvor enthaltene Text »loading« verschwindet und wird durch den Inhalt der Komponente ausgetauscht.
Die HelloComponent
Sicher
