werden.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BookMonkey</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<bm-root></bm-root>
</body>
</html>
Listing 5–3 Die Datei index.html des BookMonkeyProjekts
Bootstrapping der Anwendung
Die Angular CLI hat automatisch die Datei app.module.ts angelegt, siehe Listing 5–4. In dieser Datei steckt das zentrale Modul unserer Anwendung, das AppModule. Hier werden alle Teile der Anwendung zusammengefasst und gebündelt. Das bringt den Vorteil, dass genau definiert ist, was zu unserer Anwendung gehört und welche Abhängigkeiten zu anderen Modulen bestehen.
Den Begriff des Moduls haben wir schon im Schnellstart auf Seite 7 kennengelernt. Ein Modul ist eine einfache Klasse, die mit einem Decorator geschmückt ist. Über den Ausdruck @NgModule(...) werden Metadaten an die Klasse angehängt. Unter bootstrap wird die Komponente angegeben, mit der unsere Anwendung starten soll, in unserem Fall die AppComponent.
Was die weiteren Abschnitte dieser Deklaration bedeuten und wie wir sie einsetzen, werden wir schrittweise im Verlauf dieses Buchs erläutern.
In der ersten Iteration ab Seite 73 widmen wir uns den declarations. Den Abschnitt providers betrachten wir im Kapitel zu Dependency Injection ab Seite 131. Im Kapitel zum Modulkonzept ab Seite 401 gehen wir noch ausführlicher auf das Modulsystem ein und betrachten auch, wie wir unsere Anwendung in mehrere Module aufteilen können.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Listing 5–4 Das zentrale AppModule unserer Anwendung (app.module.ts)
main.ts
Wir sehen uns als Nächstes die Datei main.ts an (Listing 5–5). Die Datei besteht aus wenigen Zeilen Code. Ihre Aufgabe ist es ausschließlich, den Bootstrapping-Prozess von Angular mit unserem AppModule anzustoßen und die Anwendung damit zu starten. Dazu wird die Funktion platformBrowserDynamic() benötigt.
Environments
Außerdem wird die Variable environment geladen. Im Verzeichnis
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Listing 5–5 Bootstrapping der BookMonkey-App (main.ts)
Die Angular CLI hat uns ein Grundgerüst mit allen essenziellen Teilen einer Angular-Anwendung erstellt, sodass wir sofort mit der Implementierung unserer Komponenten beginnen können.
Den Webserver starten
Im Projektordner führen wir den Befehl ng serve aus, um den Webserver zu starten.
$ ng serve
Listing 5–6 Den Webserver starten
Webpack
Das Kommando sorgt dafür, dass der vorhandene TypeScript-Code transpiliert, mithilfe von Webpack gebündelt und schließlich vom »Angular Live Development Server« ausgeliefert wird. In der Kommandozeile wird der Status des Prozesses angezeigt. Erscheint die Meldung Compiled successfully., ist der Build abgeschlossen.
Abb. 5–6 Aufruf von ng serve auf der Kommandozeile
Die fertige Anwendung ist nun über die URL http://localhost:4200 im Browser erreichbar. Rufen wir diese URL auf, so erscheint die Ausgabe »book-monkey app is running!«.
Abb. 5–7 Die Anwendung im Browser aufrufen
Live Reload
Solange der Server gestartet ist und wir Änderungen an Dateien des Projekts vornehmen und speichern, aktualisiert sich die geöffnete Website stets automatisch im Browserfenster, sodass wir immer eine korrekte Ansicht vom gerade erstellten Projektstand haben.
5.3Style-Framework Semantic UI einbinden
Zu einer Webanwendung gehört natürlich noch mehr als nur Logik, Struktur und Templates. Wir wollen uns in diesem Buch aber vor allem auf die Arbeit mit Angular konzentrieren und nicht mit aufwendigen Style-Definitionen aufhalten. Trotzdem soll unsere Anwendung ein ansprechendes Layout besitzen.
Style-Framework Semantic UI
Im Laufe der