Angular Tutorial – Teil 1: Werkzeuge und erste Schritte

In diesem deutsch-sprachigen Tutorial zeigen wir, wie man damit eine erste Anwendung, die Daten via HTTP von einem Backend bezieht, entwickeln kann.

In diesem Teil unseres deutsch-sprachigen Angular-Tutorials lernen Sie die folgenden Aspekte:

 

Angular ist eines der beliebtesten Frameworks für moderne web-basierte Geschäftsanwendungen. In diesem deutsch-sprachigen Tutorial zeigen wir, wie man damit eine erste Anwendung, die Daten via HTTP von einem Backend bezieht, entwickeln kann:

Anwendung zum Suchen nach Flügen

Währender dieser erste Teil sich den Werkzeugen und der Anatomie einer Angular-Anwendung widmet, geht der zweite Teil basierend darauf auf die Entwicklung der Anwendung ein.

Werde Angular-Profi mit unseren Schulungen

Von der Angular Praxis Schulung für Einsteiger & Autodidakten über Advanced-Workshops für Fortgeschrittene bis hin zu Angular Deep Dives für erfahrene Anwender. In unseren Seminaren erfahren die Teilnehmer alles, was man als Entwickler für erfolgreiche Angular-Projekte braucht.

Werkzeuge

Hier gehen wir auf die nötigen Werkzeuge für die Entwicklung mit Angular ein.

Visual Studio Code

Wir nutzen in diesem Buch die freie Entwicklungs-Umgebung Visual Studio Code. Sie funktioniert auf allen wichtigen Betriebssystemen (Linux, OSX, Windows) und ist äußert leichtgewichtig. Visual Studio Code unterstützt auch die Sprache TypeScript. Dabei handelt es es um eine typsichere Übermenge von JavaScript, die für die Angular-Entwicklung verwendet wird.

Außerdem existieren zahlreiche Erweiterungen, die die Arbeit mit Frameworks wie Angular vereinfachen. Um Erweiterungen zu installieren, klicken Sie auf das Symbol Extensions in der linken Icon-Leiste. Danach können Sie nach Erweiterungen suchen und diese installieren:

Erweiterungen in Visual Studio Code installieren

Nützliche Extensions für Visual Studio Code

Für die Entwicklung von Angular-Lösungen empfehlen wir die folgenden Erweiterungen:

Angular Language Service

Der Angular Language Service wird vom Angular-Team bereitgestellt und erlaubt Angular-bezogene Codevervollständigungen in HTML-Templates. Außerdem weist der Language-Service auch auf mögliche Fehler in HTML-Templates hin.

Angular Schematics

Erlaubt das Generieren von Building-Blocks wie Angular-Komponenten über das Kontextmenü von Visual Studio Code.

Debugger for Chrome

Erlaubt das Debuggen von JavaScript-Anwendungen, die in Chrome ausgeführt werden.

Neben Visual Studio Code haben wir auch mit den kommerziellen Produkten WebStorm, PhpStorm bzw. IntelliJ von Jetbrains sehr gute Erfahrungen gemacht. Es handelt sich bei diesen drei Lösungen eigentlich um das selbe Produkt in verschiedenen Ausprägungen. PhpStorm unterstützt zum Beispiel zusätzlich PHP während IntelliJ zusätzlich viele Annehmlichkeiten für Java-Entwickler mit sich bringt. Diese Lösungen sind zwar etwas schwergewichtiger als Visual Studio Code, bieten dafür jedoch zahlreiche Features, wie umfangreiche Refactoring-Möglichkeiten oder Test-Runner für Unit-Tests, ab Werk.

Tatsächlich sind Visual Studio Code sowie WebStorm/IntelliJ mit Abstand die häufigsten Entwicklungsumgebungen, auf die wir bei unseren Kundenprojekten im Angular-Umfeld stoßen.

Angular CLI

Um keine Zeit mit dem Einrichten aller benötigten Werkzeuge zu verlieren, bietet das Angular-Team das sogenannte Angular Command Line Interface, kurz Angular CLI, an. Diese CLI generiert nicht nur das Grundgerüst der Anwendung, sondern auf Wunsch auch das Grundgerüst weiterer Anwendungsbestandteile wie z. B. Komponenten.

Außerdem kümmert sie sich um das Konfigurieren des TypeScript-Compilers und einer Build-Konfiguration zur Erzeugung optimierter Bundles. Auch Werkzeuge für die Testautomatisierung richtet die CLI ein.

Die CLI lässt sich einfach über den Package-Manager npm beziehen, der sich im Lieferumfang von Node.js befindet. Außerdem nutzt sie Node.js als Laufzeitumgebung. Deswegen sollten Sie zur Vorbereitung eine aktuelle Node.js-Version von Node.js herunterladen und installieren. Wir haben gute Erfahrungen mit den jeweiligen Long-Term-Support-Versionen (LTS-Versionen) gemacht. Der Einsatz älterer Versionen kann zu Problemen führen.

Sobald Node.js installiert ist, kann die CLI mittels npm eingerichtet werden:

npm install -g @angular/cli

Der Schalter -g bewirkt, dass npm das Werkzeug systemweit, also global, einrichtet, sodass es überall zur Verfügung steht. Ohne diesen Schalter würde npm das adressierte Paket lediglich für ein lokales Projekt im aktuellen Ordner einrichten. Nach der Installation steht die CLI über das Kommando ng zur Verfügung.

Projektstart

Ein Projekt mit der CLI generieren

Ein Aufruf von

ng new flight-app

generiert das Grundgerüst einer neuen Angular-Anwendung, die den Namen flight-app erhält. Dazu stellt es uns ein paar Fragen:

ng new stellt ein paar Fragen bevor es ein neues Projekt generiert

Je nach Angular-Version können diese Fragestellungen etwas variieren. Wir gehen hier von folgenden Einstellungen aus:

Enforce stricter Type Checking

Beantworten Sie diese Frage mit yes. Hierdurch werden mehr Programmierfehler bereits beim Kompilieren gefunden.

Add Angular Routing

Diese Frage beantworten wir hier mit no. Routing ist ein eigenes Thema für sich.

Style Sheet Format

Wir empfehlen hier SCSS, eine Übermenge von CSS. Die Angular CLI kompiliert diese Dateien für den Browser nach CSS.

Da ng new auch zahlreiche Pakete via npm bezieht, kann der Aufruf etwas länger dauern.

Angular Anwendung starten

Um Ihre Anwendung zu starten, wechseln Sie in den generierten Projektordner. Dort bauen Sie mit ng serve die Anwendung und stellen sie über einen Demo-Webserver bereit:

cd flight-app
ng serve -o

Der Schalter -o öffnet einen Browser, der die Anwendung anzeigt. Standardmäßig findet sich diese Anwendung unter http://localhost:4200. Ist der Port 4200 schon belegt, erkundigt sich ng serve nach einer Alternative. Außerdem nimmt der Schalter --port den gewünschten Port gleich beim Start von ng serve entgegen:

ng serve -o --port 4242

Die im Browser angezeigte Anwendung sieht wie folgt aus. Auch hier kann es von Version zu Version zu Abweichungen kommen:

Generierte Angular-Anwendung

Der für die Entwicklung gedachte Befehl ng serve macht aber noch ein wenig mehr: Er überwacht sämtliche Quellcodedateien und stößt das Kompilieren sowie Generieren der Bundles erneut an, wenn sie sich ändern. Danach aktualisiert er auch das Browserfenster.

Um das auszuprobieren, können Sie mit Visual Studio Code die Datei src\app\app.component.html öffnen und das erste Vorkommen von Welcome durch Hello World! ändern. Daraufhin sollte ng serve den betroffenen Teil der Anwendung neu kompilieren, bundlen und den Browser aktualisieren:

Generierte Angular-Anwendung ändern

Wenn Sie Visual Studio Code verwenden, sollte Sie zunächst den Hauptordner Ihrer Angular-Anwendung mit dem Befehl File | Open Folder öffnen. Der Hauptordner ist jener, der auch die Datei package.json beinhaltet. Das stellt sicher, dass Visual Studio Code sämtliche Konfigurationsdateien findet und keine unnötigen Fehler anzeigt.

Danach können Sie die gewünschte Datei über den links angezeigten Explorer suchen und öffnen. Alternativ dazu bietet sich die Kombination STRG+p an. Sie öffnet ein kleines Fenster, mit dem man nach der gewünschten Datei suchen kann.

Mit STRG+SHIFT+c können Sie übrigens jederzeit eine externe Konsole im aktuellen Ordner öffnen, um z. B. die Angular CLI auszuführen. Die Kombination STRG+SHIFT+ö öffnet hingegen die Konsole als Terminal direkt in Visual Studio Code.

Die automatische Generierung der Bundles nach einer Änderung am Programmcode funktioniert meist ganz gut, aber ab und an kommt die CLI aus dem Tritt. Das ist u. a. dann der Fall, wenn Sie mehrere Dateien rasch hintereinander speichern. Auch das Umbenennen von Dateien bringt diesen Mechanismus aus dem Konzept.

Abhilfe schafft hier ein erneutes Speichern der betroffenen Dateien oder -- wenn alle Stricke reißen -- ein Neustart von ng serve.

Build mit CLI

Während ng serve für die Entwicklung sehr komfortabel ist, ist es für den Produktionseinsatz nicht geeignet. Um Bundles für die Produktion zu generieren, nutzen Sie die Anweisung

ng build --prod

Der Schalter --prod aktiviert zahlreiche Optimierungen, die zu kleineren Bundles führen. Ein Beispiel dafür ist die Minifizierung, bei der unnötige Zeichen wie Kommentare oder Zeilenschaltungen entfernt sowie Ihre Anweisungen durch kürzere Gegenstücke ersetzt werden. Ein weiteres Beispiel ist das sogenannte Tree-Shaking, das nicht benötigte Framework-Bestandteile identifiziert und entfernt. Diese Optimierungen verlangsamen natürlich den Build-Prozess ein wenig.

Die generierten Bundles finden sich im Ordner dist/flight-app. Im Rahmen der Bereitstellung müssen Sie lediglich diese Dateien auf den Web-Server Ihrer Wahl kopieren. Da es sich aus Sicht des Web-Servers hierbei um eine statische Web-Anwendung handelt, müssen Sie dort auch keine zusätzliche Script-Sprache oder Web-Framework installieren.

Projektstruktur von Angular-Projekten

Die von der CLI generierte Projektstruktur orientiert sich an Best Practices, die sich auch in anderen Projekten finden:

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 Projektes gewählten Option ab.

src/app/

Dieser Ordner und seine Unterordner beinhaltet 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 einem 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. Über die Datei .browserslistrc lässt sich die CLI anweisen, auch EcmaScript 5 Bundles für Internet Explorer 11 zu generieren.

.browserslistrc

Listet sämtliche Browser, die die Angular-Anwendung unterstützen soll. Um z. B. auch Internet Explorer 11 zu unterstützen, ist der Eintrag not IE 11 durch IE 11 zu ersetzen.

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 der Quellcode-Verwaltung eingecheckt wird, sind diese Hinweise notwendig. Ihre 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 Programm-Dateien 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 Struktur der Komponente.

app.component.scss

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

Das nachfolgende Listing zeigt den Inhalt der generierten 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 Type string besitzt. Letzteres muss hier gar nicht explizit angeben 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 dieses 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 Klammern-Paare definieren eine sogenannte Datenbindung. Angular bindet also die angegebene Eigenschaft an die jeweilige Stelle im Template.

Mehr Informationen zur Datenbindung und Angular im allgemeinen finden Sie im nächsten Teil dieses Tutorials. 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:

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 Modules. Derzeit beschränken die sich auf unsere AppComponent. Diese wird in der dritten Zeile unter Angabe eines relatives Pfades, 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.

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 Module, 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:

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 Platform, die die Ausführung von Angular im Browser ermöglicht. 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 --prod ein Build für die Produktion angefordert wird. Wie oben erwähnt, veranlasst das die CLI, Optimierungen durchzuführen. Wir können aber auch innerhalb der Anwendung darauf reagieren: In diesem Fall wird zum Beispiel auch der Produktions-Modus von Angular 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, welche die Angular-Anwendung startet.

Eine Eine Style-Bibliothek installieren

Da auch "das Auge mitprogrammiert", wollen wir an dieser Stelle ein paar vordefinierte Styles ins Spiel bringen.

Paper Design und Bootstrap

Beim hier verwendeten Theming handelt sich dabei um das Paper-Design Theme von Creative Tim (https://www.creative-tim.com), das wiederum auf der populären Bibliothek bootstrap (http://getbootstrap.com) basiert.

Der Vorteil von Bootstrap liegt neben seiner äußert weiten Verbreitung in der Tatsache, dass es unaufdringlich ist. Es definiert lediglich ein paar (S)CSS-Klassen, die man auf bekannte HTML-Elemente anwenden kann. Im Gegensatz zu anderen Lösungen muss man also zunächst keine weiteren HTML-Elemente lernen.

Sie können sowohl Bootstrap als auch das Paper-Design-Theming mit dem folgenden Befehl installieren:

ng add @angular-architects/paper-design

Dieses von uns bereitgestellte Paket beinhaltet die besprochenen Styles und generiert auch einige Konfigurationseinträge sowie das Skelett unserer Anwendung:

Generierte Angular-Anwendung

Wie Sie hier sehen, verschiebt dieser Befehl die AppComponent und das AppModule in den Ordner bak (siehe Zeilen mit RENAME). Danach generiert er die beiden erneut im Ordner src/app. Außerdem generiert er eine NavbarComponent, eine SideBarComponent und ein Angular-Logo. Danach erweitert dieser Aufruf von ng add die Dateien angular.json und index.html. Erstere erhält Verweise auf die Style-Dateien von Bootstrap und des freien Paper Design Themings von Creative Tim. Letztere erhält zwei link-Elemente zum Laden von der vom Theming verwendeten Web-Fonts.

"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"
],

Hier sieht man übrigens auch die von ng new generiere Datei src/styles.scss, in der Sie Ihre eigenen globalen Styles hinterlegen können.

Leider liest ng serve globale Konfigurations-Dateien wie die angular.json nur beim Programmstart. Falls ng serve bereits läuft, müssen Sie es deswegen beenden (STRG+c) und neu starten.

Startet man die Anwendung erneut mit ng serve -o, ergibt sich das folgende Bild:

Anwendung mit Style-Bibliothek

Links sieht man die generierte SideBarComponent und im oberen Bereich die ebenfalls generierte NavBarComponent. Sämtliche Links sind derzeit noch Dummies - aber das wird sich im Laufe des Buches noch ändern.

ng add vs. npm install

Der von der Angular CLI gebotene Befehl ng add installiert ein npm-Paket und führt danach ein Skript aus, das das Paket in der Angular-Anwendung einrichtet.

Stattdessen könnte man auch mit npm install das Paket installieren und das Einrichten händisch übernehmen. Im Fall von Bootstrap müsste man dazu zunächst npm install bootstrap anstoßen und danach die von Bootstrap gebotenen Styles in der angular.json manuell eintragen.

Alternativen zu Bootstrap

Sie finden sowohl im Open-Source-Umfeld als auch im kommerziellen Bereich zahlreiche Implementierungen von Design-Systems und Komponenten-Bibliotheken, die sich als Alternative zu Bootstrap einsetzen lassen. Wir möchten hier auf ein paar, auf die wir in unserer Praxis immer wieder stoßen, hinweisen:

Angular Material (https://material.angular.io)

Die offizielle und quelloffene Implementierung von Googles Material Design für Angular. Es handelt sich dabei um jene Implementierung, die Google für seine über 2600 auf Angular basierenden Anwendungen verwendet.

Clarity Design System (https://clarity.design/)

Immer mehr Unternehmen veröffentlichen die Umsetzungen ihrer Design-Systems. Hierzu zählt auch der bekannte Virtualisierungs-Riese VM Ware, der sein Clarity Design Systems für Angular implementiert hat.

PrimeNG (https://www.primefaces.org/primeng/)

Mit PrimeNG bietet der Hersteller der im Java-Umfeld bekannten PrimeFaces UI Frameworks eine umfangreiche und freie Komponenten-Bibliothek für Angular. Als Ergänzung werden kommerzielle Themes und Enterprise Support geboten.

DevExtreme (https://js.devexpress.com/)

Die Firma DevExpress dürfte dem einen oder anderen ein Begriff sein, zumal sie seit mehreren Jahrzehnten für verschiedene Plattformen ausgefeilte Komponenten anbietet. Ihr kommerzielles Produkt DevExtreme adressiert unter anderem Angular-Anwendungen. Es beinhaltet die üblichen

Standardsteuerelemente und zeichnet sich durch ein äußerst mächtiges DataGrid aus. Aber auch ein sehr mächtiges Tree- und Charts-Control findet man hier.

KendoUI (https://www.telerik.com/kendo-ui)

Mit KendoUI ist es ähnlich wie mit DevExtreme: Hinter diesem kommerziellen Produkt steht mit Telerik ein seit Jahrzehnten etablierter Anbieter für Steuerelemente. KendoUI bietet neben den üblichen Steuerelementen auch ein sehr mächtiges Grid-, Tree-, und Chart-Control.

ag-Grid (https://www.ag-grid.com)

Wer mit seinem, zum Beispiel mit Bootstrap umgesetzten, Design System zufrieden ist, und nur zusätzlich ein mächtiges Grid benötigt, wird bei ag-Grid fündig. Diese kommerzielle Lösung fokussiert sich darauf, "das beste JavaScript Grid der Welt", wie es sein Hersteller ausdrückt, bereitzustellen.

Zusammenfassung

Das Projekt-Setup bei modernen JavaScript-Anwendungen fällt in der Regel recht komplex aus. Sie müssen Compiler konfigurieren, Werkzeuge für das Testing installieren und sich um einen Build, der zahlreiche Optimierungen für den Produktionseinsatz durchführt, kümmern.

Die Angular CLI nimmt Ihnen viele dieser Aufgaben ab und generiert ein professionelles Setup, das viele Werkzeuge zur Entwicklung mit Angular einrichtet. Es genügt ein einfaches ng new und schon können Sie loslegen. Wie bei jedem generierten Projektsetup müssen Sie sich jedoch ein wenig Zeit nehmen, um sich mit den generierten Dateien vertraut zu machen. Vor allem die generierte AppComponent und das generierte AppModule werden Sie häufig anpassen müssen. Die zahlreichen generierten Konfigurationsdateien können Sie vorerst glücklicherweise als Black-Box betrachten und bei Bedarf die eine oder andere Einstellung nachschlagen.

Im nächsten Teil dieser Serie greifen wir das gezeigte Projektsetup auf und entwickeln eine erste Angular Anwendung mit Komponenten, den verschiedenen Arten der Datenbindung und HTTP-Zugriffe.

Don't Miss Anything!


Subscribe to our newsletter to get all the information about Angular.


* By subscribing to our newsletter, you agree with our privacy policy.

Unsere Angular-Schulungen

Aktuelle Blog-Artikel

Nur einen Schritt entfernt!

Stellen Sie noch heute Ihre Anfrage,
wir beraten Sie gerne!

Jetzt anfragen!