Angular. Ferdinand Malcher

       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 ist Ihnen aufgefallen, dass auch noch eine weitere Komponente Hello-Component existiert. Diese ist auch im AppModule referenziert. Im Template der AppComponent finden wir sogar ein passendes Element mit dem Namen hello. An dieser Stelle möchten wir noch nicht auf die Details eingehen, jedoch scheinen die beiden Komponenten in einer Beziehung zueinander zu stehen. Mehr hierzu erfahren Sie in den nächsten Kapiteln!

       Zusammenfassung

      Glückwunsch! Es ist geschafft, der Schnellstart mit Angular ist uns gelungen. Wir haben gelernt, wie eine Angular-Anwendung grundsätzlich aufgebaut ist und welche Abhängigkeiten untereinander bestehen.

      Die Anwendung wird im Browser ausgeführt, deshalb ist die Datei index.html der Einstiegspunkt. Über die Datei main.ts wird unser zentrales Angular-Modul AppModule geladen (»gebootstrappt«). Von dort aus wird die erste Komponente AppComponent eingebunden. Wir haben gelernt, dass Komponenten die wichtigsten Bausteine unserer Webprojekte sind. Eine Komponente besteht immer aus einem im Browser sichtbaren Template und einer TypeScript-Klasse, die die Logik für das Template beinhaltet.

      Wir haben außerdem einen ersten Blick auf den »JavaScript-Dialekt« TypeScript geworfen. Für alle Einsteiger befindet sich im Abschnitt ab Seite 27 eine Einführung in TypeScript.

      Die Plattform StackBlitz ist ein nützliches Hilfsmittel zum schnellen Setup einer Angular-Anwendung und läuft vollständig im Browser. Mit diesem Tool können Sie schnell Prototypen entwickeln und Features ausprobieren, ohne das komplette Tooling auf Ihrem Rechner aufsetzen zu müssen. Den Link zu einem StackBlitz-Projekt können Sie übrigens auch weitergeben, sodass andere Personen Ihre Anwendung betrachten können. Wir haben ebenfalls ein kleines Beispielprojekt für Sie aufgesetzt, das wir sehr gerne mit Ihnen teilen:

       Demo und Quelltext: https://ng-buch.de/b/stackblitz-start