Читать книгу Angular - Manfred Steyer - Страница 14

Die von der CLI generierte Projektstruktur orientiert sich an Best Practices, die sich auch in anderen Projekten finden. Für einen ersten Überblick präsentiert Tabelle 1-1 die wichtigsten Dateien. Wir gehen im Laufe des Buchs auf diese und weitere Dateien bei Bedarf genauer ein.

Tabelle 1-1: Projektstruktur

Ordner/Datei	Beschreibung
src/	Beinhaltet alle Quellcodedateien (TypeScript, HTML, CSS etc.).
src/main.ts	Dieser Quellcodedatei kommt besondere Bedeutung zu. Die CLI nutzt sie als Einstiegspunkt in die Anwendung. Deswegen wird ihr Code beim Programmstart zuerst ausgeführt. Standardmäßig beinhaltet sie ein paar Zeilen zum Starten von Angular. Normalerweise müssen Sie diese Datei nicht anpassen.
src/styles.scss	Hier können Sie Ihre eigenen globalen Styles eintragen. Die Dateiendung, z.B. css oder scss, hängt von der beim Generieren des Projekts gewählten Option ab.
src/app/	Dieser Ordner und seine Unterordner beinhalten die entwickelten Programmdateien wie zum Beispiel Angular-Komponenten.
src/assets/	Ordner mit statischen Dateien, die die CLI beim Build in das Ausgabeverzeichnis kopiert. Hier könnten Sie zum Beispiel Bilder oder JSON-Dateien ablegen.
dist/	Beinhaltet die von ng build generierten Bundles für die Auslieferung auf einen Server. Der Einsatz von ng serve schreibt diese Bundles hingegen nicht auf die Platte, sondern hält sie lediglich im Hauptspeicher vor.
node_modules/	Beinhaltet sämtliche Module, die über npm bezogen wurden. Dazu gehören der TypeScript-Compiler und andere Werkzeuge für den Build, aber auch sämtliche Bibliotheken für Angular.
tsconfig.json	Konfigurationsdatei für TypeScript. Hier wird zum Beispiel festgelegt, dass der TypeScript-Compiler Ihren Quellcode nach ECMAScript 2015 kompilieren soll. Das ist jene JavaScript-Version, die von allen modernen Browsern der letzten Jahre unterstützt wird.
.browserslistrc	Listet sämtliche Browser, die die Angular-Anwendung unterstützen soll. Aus dieser Liste ermittelt die Angular CLI nötige CSS-Präfixe, die es beim Kompilieren einfügt. Bis Angular 12 wurde aus dieser Datei auch abgeleitet, ob zusätzlich Legacy-Bundles (ECMAScript 5) für Browser wie Internet Explorer 11 zu erzeugen sind.
package.json	Referenziert sämtliche Bibliotheken, die benötigt werden, inklusive der gewünschten Versionen. Wenn Sie einen Blick auf die Abschnitte dependencies und devDependencies werfen, sehen Sie alle von ng new installierten Pakete. Da der Ordner node_modules mit diesen Paketen nicht in die Quellcodeverwaltung eingecheckt wird, sind diese Hinweise notwendig. Ihre Entwickler-Kolleginnen und -Kollegen müssen lediglich die Anweisung npm install ausführen, um sie in den node_modules-Ordner zu laden.
index.html	Die Startseite. Der Build-Prozess erweitert sie um Referenzen auf die generierten Bundles.
angular.json	Mit dieser Datei lässt sich das Verhalten der CLI anpassen. Beispielsweise referenziert sie globale Styles oder Skripte, die es einzubinden gilt.

Lassen Sie uns nun ein paar der Programmdateien unter src/app etwas genauer betrachten. Starten wir dabei mit der generierten AppComponent. Wie die meisten Angular-Komponenten besteht sie aus mehreren Dateien:

app.component.ts

TypeScript-Datei, die das Verhalten der Komponente definiert.

app.component.html

HTML-Datei mit der Struktur der Komponente.

app.component.scss

Datei mit lokalen Styles für die Komponente. Allgemeine Styles können in die besprochene styles.scss eingetragen werden.

Beispiel 1-1 zeigt den Inhalt der generierten app.component.ts:

Beispiel 1-1: Die generierte app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

title = 'flight-app';

}

Es handelt sich dabei um eine Klasse, die lediglich eine Eigenschaft title vom Typ string besitzt. Letzteres muss hier gar nicht explizit angegeben werden: TypeScript kann sich diesen Umstand aus dem zugewiesenen Standardwert herleiten.

Die Angabe von export definiert, dass die Klasse auch in anderen Dateien der Anwendung genutzt werden darf.

Die Klasse wurde mit dem Dekorator Component versehen. Dekoratoren definieren Metadaten für Programmkonstrukte wie z.B. Klassen. Diesen importiert die Komponente in der ersten Zeile aus dem Paket @angular/core. Bei der Nutzung eines Dekorators wird ihm das Symbol @ vorangestellt.

Die Metadaten beinhalten den Selektor der Komponente. Das ist in der Regel der Name eines HTML-Elements, das die Komponente repräsentiert. Um die Komponente aufzurufen, können Sie also die folgende Schreibweise in einer HTML-Datei verwenden:

<app-root></app-root>

Der Dekorator verweist außerdem auf das HTML-Template der Komponente und ihre SCSS-Datei mit lokalen Styles. Letztere ist standardmäßig leer. Die HTML-Datei beinhaltet den Code für die oben betrachtete Startseite. Die ist zwar schön, enthält aber eine Menge HTML-Markup. Ersetzen Sie mal zum Ausprobieren den gesamten Inhalt dieser HTML-Datei durch folgendes Fragment:

<h1>{{title}}</h1>

Wenn Sie nun die Anwendung starten (ng serve -o), sollten Sie den Inhalt der Eigenschaft title als Überschrift sehen. Die beiden geschweiften Klammernpaare definieren eine sogenannte Datenbindung. Angular bindet also die angegebene Eigenschaft an die jeweilige Stelle im Template.

Mehr Informationen zu TypeScript, Datenbindungen und Angular im Allgemeinen finden Sie in den nächsten beiden Kapiteln. Um diesen Rundgang durch die generierten Programmdateien abzuschließen, möchten wir jedoch noch auf drei weitere generierte Dateien hinweisen. Eine davon ist die Datei app.module.ts, die ein Angular-Modul beinhaltet (siehe Beispiel 1-2).

Beispiel 1-2: Das generierte AppModule

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Angular-Module sind Datenstrukturen, die zusammengehörige Building-Blocks wie Komponenten zusammenfassen. Technisch gesehen, handelt es sich dabei um eine weitere Klasse. Sie ist in den meisten Fällen leer und dient lediglich als Träger von Metadaten, die über den NgModule-Dekorator angegeben werden.

Lassen Sie uns einen Blick auf die Eigenschaften von NgModule werfen:

declarations

Definiert die Inhalte des Moduls. Derzeit beschränken sich diese auf unsere AppComponent. Sie wird in der dritten Zeile unter Angabe eines relativen Pfads, der auf die Datei app.component.ts verweist, importiert. Die Dateiendung .ts wird hierbei weggelassen.

imports

Importiert weitere Module. Das gezeigte Beispiel importiert lediglich das BrowserModule, das alles beinhaltet, um Angular im Browser auszuführen. Das ist auch der Standardfall.

providers

Hier könnte man sogenannte Services, die Logiken für mehrere Komponenten anbieten, registrieren. Kapitel 5 geht im Detail darauf ein.

bootstrap

Diese Eigenschaft verweist auf sämtliche Komponenten, die beim Start der Anwendung zu erzeugen sind. Häufig handelt es sich dabei lediglich um eine einzige Komponente. Diese sogenannte Root-Component repräsentiert die gesamte Anwendung und ruft dazu weitere Komponenten auf.

Das Modul, das die Root-Component bereitstellt, wird auch als Root-Module bezeichnet. Angular nimmt es beim Start der Anwendung entgegen und rendert die darin zu findende Root-Component. Für diese Aufgabe hat die CLI die Datei main.ts eingerichtet (siehe Beispiel 1-3).

Beispiel 1-3: Die generierte Datei main.ts

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));

Die Funktion platformBrowserDynamic erzeugt eine sogenannte Plattform, die die Ausführung von Angular im Browser möglich macht. Andere Plattformen ermöglichen zum Beispiel die serverseitige Ausführung von Angular oder die Ausführung in mobilen Anwendungen. Die Nutzung im Browser ist jedoch der hier betrachtete Standardfall.

Die Methode bootstrapModule nimmt das Root-Modul entgegen, und Angular rendert daraufhin ihre Root-Component.

Die verwendete Eigenschaft environment.production informiert darüber, ob mit ng build ein Build für die Produktion angefordert wird oder mit ng serve eines fürs Debuggen. Wie oben erwähnt, veranlasst das die CLI, Optimierungen durchzuführen. Wir können aber auch innerhalb der Anwendung darauf reagieren: Hier wird dann zum Beispiel der Produktivmodus von Angular ebenfalls aktiviert. In diesem Modus ist Angular schneller, erzeugt aber auch weniger sowie weniger gut lesbare Fehlermeldungen.

Um festzulegen, wo auf der Seite unsere Root-Component darzustellen ist, ruft die ebenfalls generierte index.html sie auf:

<body>

<app-root></app-root>

</body>

Beim Build ergänzt die CLI diese index.html auch um Verweise auf die erzeugten Bundles. Eines davon beinhaltet den Code der Datei main.ts, die die Angular-Anwendung startet.