Angular Tutorial – Teil 1: Deine erste Anwendung

Generating Your First Angular Project

This part of the tutorial walks you through creating a complete Angular application from scratch. You will use the Angular CLI to scaffold a new project and build a component that fetches data from a backend service.

The application we create here will be the foundation for the remaining parts of this series. The goal is twofold: getting hands-on experience with Angular while also developing a solid mental model of the concepts underneath.

Source Code

All example code referenced throughout this tutorial is available in our GitHub repository.

Prerequisites: Installing the Toolchain

Before you can build your first Angular app, you need to set up a few tools.

Visual Studio Code

For this tutorial we use the open-source editor Visual Studio Code. It runs on all major platforms (Linux, OSX, Windows) and is remarkably lightweight. TypeScript support is built in from the start.

Beyond that, a rich ecosystem of extensions exists to simplify working with frameworks like Angular. To install extensions, click the Extensions icon in the left sidebar, then search for what you need:

For Angular development we recommend these extensions:

• Angular Language Service: Maintained by the Angular team, this extension provides Angular-aware autocompletion inside HTML templates. It also flags potential mistakes in those templates.
• Angular Schematics: Adds the ability to generate building blocks such as Angular components directly from the Visual Studio Code context menu.
• Debugger for Chrome: Lets you debug JavaScript applications running inside the Chrome browser.

Apart from Visual Studio Code, we have also had very good experiences with the commercial Jetbrains products WebStorm, PhpStorm and IntelliJ (https://www.jetbrains.com/).

Angular CLI

To spare you the hassle of configuring every tool by hand, the Angular team provides the Angular Commandline Interface, or Angular CLI for short. The CLI doesn't just scaffold the initial application skeleton; it can also generate the groundwork for additional app parts like components on demand.

It also takes care of wiring up the TypeScript compiler and setting up a build configuration for producing optimized bundles. Test automation tooling is configured by the CLI as well.

You can easily obtain the CLI via the package manager npm, which ships with Node.js. Under the hood the CLI also uses Node.js as its runtime. We have had good results with the Long-Term-Support (LTS) releases of Node.js. Using older versions can lead to problems.

Once Node.js is in place, you can install the CLI with npm:

npm install -g @angular/cli

The -g flag tells npm to install the tool system-wide, which makes it available from anywhere. Without that flag, npm would only install the package locally inside the current project folder. After the installation finishes, the CLI is accessible through the ng command.

Creating a New Angular Application

Running

ng new flight-app

scaffolds a fresh Angular application named flight-app. During this process, the CLI will ask you a couple of questions:

Depending on the Angular version you are on, these prompts may look a bit different. We are going with the following answers:

• Add Angular Routing: We answer No here. Routing is a topic for a later part of this series.
• Stylesheet Format: We recommend SCSS, which is a superset of CSS. The Angular CLI will compile these files to CSS for the browser.

Keep in mind that ng new pulls down a lot of packages via npm, so the command might take a while.

Launching Your Angular Application

To start the app, navigate into the generated project folder. That is the folder containing the angular.json file. Running ng serve boots the application on a demo web server:

cd flight-app
ng serve -o

The -o flag opens a browser pointing at the application. By default, the app lives at http://localhost:4200. If port 4200 is already taken, ng serve will ask you for an alternative. Also, you can pass the --port flag to specify a port directly at startup:

ng serve -o --port 4242

The page shown in the browser looks like this:

Again, minor differences can appear depending on your Angular version.

The development-oriented ng serve command does a bit more under the hood though: it watches all source files, and as soon as any of them changes, it triggers a fresh compilation and bundle generation. After that, it also refreshes the browser window.

To see this in action, open src\app\app.component.html in Visual Studio Code and change the first occurrence of Welcome to Hello World!. In response, ng serve recompiles the affected part of the app, rebundles it, and updates the browser:

This automatic rebundling after a code change usually works quite well, but occasionally the CLI can get out of sync. This may happen, for example, when you save several files in rapid succession. Renaming files can also trip up this watch mechanism.

Saving the affected files again usually resolves the issue — or, if things get really stuck, restarting ng serve is the last resort.

Become an Angular Pro with Our Trainings

From the Angular practice training for beginners and self-taught developers over advanced workshops for experienced developers to deep dives for seasoned users. In our Angular trainings participants pick up everything a developer needs to know for successful Angular projects.

Production Build with the CLI

While ng serve is extremely convenient for development, it is not suited for production. To generate bundles for deployment, use the command

ng build

Starting with Angular CLI 12, ng build automatically applies a wide range of optimizations that result in smaller bundles. Prior to that version, you had to explicitly request these optimizations using the --prod flag.

Minification is one such optimization: it strips out unneeded characters like comments and line breaks while also replacing your commands with shorter equivalents. Another example is tree-shaking, which detects and removes parts of the framework that are not referenced. Naturally, these optimizations slow down the build process a little.

The resulting bundles are written to the dist/flight-app folder. For deployment, you simply copy those files to whatever web server you like. From the server's perspective this is a static web application, so there is no need to install any scripting language or framework on the server side.

Das generierte Projekt im Detail

Als Nächstes schauen wir uns einige der erzeugten Dateien im Verzeichnis src/app an. Beginnen wir mit der AppComponent, die Angular zu Beginn der Anwendung rendert. Wie bei den meisten Angular-Komponenten üblich, besteht sie aus mehreren Dateien:

• app.component.ts: Die TypeScript-Datei, die das Verhalten der Komponente festlegt.
• app.component.html: Die HTML-Datei, die das Markup der Komponente enthält.
• app.component.scss: Die Datei für die komponentenlokalen Styles. Globale Styles hingegen finden ihren Platz in der bereits erwähnten styles.scss.

Die Datei app.component.ts beinhaltet eine einfache Klasse mit einer Eigenschaft namens title:

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

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

Die Eigenschaft title besitzt den Datentyp string. Eine explizite Typangabe ist hier nicht zwingend erforderlich: TypeScript leitet den Typ automatisch aus dem zugewiesenen Standardwert ab.

Durch das Schlüsselwort export wird die Klasse für andere Dateien innerhalb der Anwendung zugänglich gemacht.

Die Klasse ist mit dem Component-Dekorator versehen. Dekoratoren liefern Metadaten für Programmkonstrukte wie Klassen. Der Component-Dekorator signalisiert Angular etwa, dass es sich bei dieser Klasse um eine Komponente handelt. Der Import dieses Dekorators erfolgt in der ersten Zeile aus dem Paket @angular/core.

In den Metadaten des Dekorators findet sich der Selektor der Komponente. Dieser entspricht in der Regel dem Namen eines HTML-Elements, das die Komponente repräsentiert. Um die Komponente einzubinden, kann man in einer HTML-Datei folgende Schreibweise verwenden:

<app-root></app-root>

Des Weiteren verweist der Dekorator auf das HTML-Template und die SCSS-Datei für die lokalen Styles. Letztere ist anfänglich leer. Die HTML-Datei enthält den Code für die bereits besprochene Startseite, der allerdings recht umfangreich ist. Experimentieren Sie ruhig: Ersetzen Sie den gesamten Inhalt dieser Datei mit dem unten stehenden Fragment:

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

Beim Start der Anwendung (falls noch nicht geschehen: ng serve -o) sehen Sie nun den Wert der Eigenschaft title als Überschrift. Die doppelten geschweiften Klammern stehen für die sogenannte Datenbindung. Angular verknüpft die angegebene Eigenschaft mit der jeweiligen Stelle im Template.

Weitere Informationen zur Datenbindung folgen später in diesem Artikel. Zum Abschluss dieses Rundgangs durch die generierten Dateien werfen wir noch einen Blick auf drei weitere Dateien. Eine davon ist app.module.ts, die ein Angular-Modul definiert:

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 Konstrukte, die zusammengehörige Bausteine, etwa Komponenten, bündeln. Technisch gesehen sind sie ebenfalls Klassen, die meist leer sind und lediglich als Träger für die mittels NgModule-Dekorator angegebenen Metadaten dienen.

Betrachten wir die Eigenschaften des NgModule im Detail:

• declarations: Listet die Inhalte des Moduls auf. Derzeit beschränkt sich das auf unsere AppComponent. Sie wird in der dritten Zeile über einen relativen Pfad importiert, der auf app.component.ts verweist. Die Endung .ts wird dabei ausgelassen.
• imports: Nimmt weitere Module auf. Im Beispiel wird nur das BrowserModule importiert, das die Ausführung von Angular im Browser ermöglicht. Das ist der Normalfall.
• providers: Hier lassen sich sogenannte Services registrieren, die Logik für mehrere Komponenten bereitstellen.
• bootstrap: Verweist auf alle Komponenten, die beim Start der Anwendung erstellt werden sollen. Meist ist das nur eine einzige Komponente. Diese sogenannte Root-Komponente ist für die gesamte Anwendung verantwortlich und ruft weitere Komponenten auf.

Das Modul, das die Root-Komponente bereitstellt, wird auch Root-Module genannt. Angular lädt es beim Start und rendert die darin definierte Root-Komponente. Diese findet sich in der index.html wieder:

<body>
  <app-root></app-root>
</body>

Sowohl ng serve als auch ng build erweitern die index.html zusätzlich um Verweise auf die erzeugten JavaScript-Bundles, die unseren Quellcode enthalten.

Etwas Stil gefällig? Bootstrap einbinden

Da "das Auge mitprogrammiert", möchten wir an dieser Stelle vordefinierte Styles nutzen. Dafür setzen wir auf die weit verbreitete Stylesheet-Bibliothek Bootstrap.

Der Vorteil von Bootstrap liegt neben seiner großen Verbreitung in seiner Unaufdringlichkeit. Es definiert lediglich einige (S)CSS-Klassen, die man auf bekannte HTML-Elemente anwenden kann. Im Gegensatz zu anderen Lösungen sind also keine zusätzlichen HTML-Elemente zu erlernen.

Da das Standard-Design von Bootstrap eher schlicht wirkt, verwenden wir zusätzlich ein freies Bootstrap-Theme mit dem Namen Paper Design, das von Creative Tim stammt. Natürlich könnte man Bootstrap über npm installieren und die CSS-Dateien des Themes manuell ins Projekt kopieren.

Zur Vereinfachung haben wir ein Meta-Paket bereitgestellt, das sich bequem über ng add installieren lässt:

ng add @angular-architects/paper-design 

ng add ist ein CLI-Mechanismus, der beim Hinzufügen von Paketen unterstützt. Dabei wird das Paket installiert und ein Skript ausgeführt, das es entsprechend einrichtet. Die manuelle Durchführung dieser Schritte ist ebenfalls möglich.

Die Ausführung von ng add läuft folgendermaßen ab:

Wie zu sehen ist, verschiebt dieser Befehl die AppComponent und das AppModule in das Verzeichnis bak (siehe Zeilen mit RENAME). Danach werden beide Dateien im Ordner src/app neu erzeugt. Zusätzlich entstehen eine NavbarComponent und eine SideBarComponent, die für die Navigation gedacht sind.

Der Aufruf erweitert außerdem die Dateien angular.json und index.html. In der ersten Datei werden dabei Verweise auf die Style-Dateien von Bootstrap und dem kostenlosen Paper Design-Theme von Creative Tim ergänzt:

"styles": [
    "node_modules/@angular-architects/paper-design/assets/css/bootstrap.css",
    "node_modules/@angular-architects/paper-design/assets/scss/paper-dashboard.scss",
    "src/styles.scss"
],

Das Listing zeigt auch die von ng new erzeugte Datei src/styles.scss, in der die eigenen globalen Styles hinterlegt werden können.

Die index.html wird um zwei link-Elemente erweitert, die den vom Theme verwendeten Webfont laden.

Hinweis: ng serve liest globale Konfigurationsdateien wie die angular.json nur beim Start. Falls ng serve schon läuft, muss es beendet (Strg+C) und neu gestartet werden.

Bei erneutem Start mit ng serve -o ergibt sich nun das folgende Erscheinungsbild:

Links sehen Sie die erzeugte SideBarComponent und oben die ebenfalls generierte NavBarComponent. Die Links funktionieren derzeit noch nicht – das wird sich aber im Lauf dieses Tutorials ändern.

Tipp: Ein Blick in den Quellcode der beiden generierten Komponenten sowie in die neuen Einträge in der angular.json lohnt sich. Wie erwähnt, könnte man diese Dateien auch von Hand anlegen und erweitern. Da das aber mühsam und fehleranfällig ist, nutzen wir lieber ng add.

Rückblick und nächste Schritte

Die Angular CLI vereinfacht das Anlegen, Ausführen und Bauen von Angular-Projekten enorm. Ein einfaches ng new genügt, um loszulegen. Wie bei jedem generierten Projekt-Setup sollte man sich jedoch etwas Zeit nehmen, um die erzeugten Dateien zu verstehen.

Im nächsten Teil dieses Tutorials erweitern wir die hier erstellte Anwendung um eine Komponente, die Daten von einem Backend abruft und mithilfe von Datenbindung darstellt.