Schnellstart Webfrontend mit der Angular CLI
Bevor wir tiefer in die Materie der Angular CLI einsteigen, möchte ich kurz einige Worte darüber verlieren, was Angular eigentlich ist. Angular ist ein von Google entwickeltes Webframework für Single Page Applications (SPA) welches hohen Wert auf Struktur und Qualität legt. Anders als bei klassischen Webanwendungen wird bei einer SPA lediglich eine HTML Datei im Browser bereitgestellt. Der dynamische Inhalt der HTML Datei wird dabei nur Clientseitig, beispielsweiße über eine Serveranfrage, verändert. Angular zeichnet sich durch eine saubere Architektur und den Fokus auf isolierte Komponenten aus und etabliert sich zunehmend im Enterprise Umfeld. Angular wurde in seiner ersten Version als JavaScript Framework entwickelt und bereits in Version 2 vollständig neu in TypeScript aufgesetzt. Da die Grundidee bzw. Konzepte gleich geblieben sind, lässt sich sogar eine Migration oder ein hybrider Einsatz der Versionen ermöglichen.
Seit 2017 wird Angular semantisch versioniert und in einem festen Zyklus (alle 6 Monate) mit neuen Funktionalitäten und Anpassungen veröffentlicht. Die aktuelle Version ist die 7.x.x.
Was ist die Angular CLI?
Die Angular CLI ist ein wichtiges CLI (Command Line Interface) Werkzeug für die Entwicklung von Angular Anwendungen und wurde mit der zweiten Version des Angular Frameworks veröffentlicht. Die CLI stellt ein Set von Funktionen bereit, welche alle Phasen der Softwareentwicklung für Angular unterstützen. Dazu zählen unter anderem:
- Live-Reload Server, um Code Änderungen direkt im Browser anzusehen
- Webpack, welches das Bündeln aller Ressourcen übernimmt
- Eine voll einsatzfähige Testumgebung
- Generator für Angular Elemente (Komponenten, Direktiven, Pipes und Services)
- Depedency Management für die erzeugten Elemente
- Erzeugung von Artefakten durch Buildmechanismen
Voraussetzungen für den Start mit Angular CLI?
Für die Entwicklung mit der Angular CLI wird NodeJS benötigt. NodeJS stellt eine JavaScript Laufzeitumgebung zur Verfügung und enthält unter anderem den npm (Node Package Manager). Dieser Paketmanager wird für die meisten Komponenten in Angular verwendet.
Download und Installation von NodeJS: https://nodejs.org/en/
Nachdem NodeJS installiert wurde, muss die Angular CLI installiert werden. Die Installation wird mit folgendem Befehl in das Terminal gestartet:
- npm install –g @angular/cli
Nach Abschluss der Installation sind alle Voraussetzungen für den Start in die Entwicklung mit Angular und der CLI erfüllt.
Die wichtigen Befehle
| Befehl | Beschreibung |
| ng new <name> [options] | Stellt den initialen Start für die Entwicklung des Angular Projektes dar. Im aktuellen Verzeichnis wird ein App-Ordner namens <name> angelegt und alle relevanten Angular Dateien werden hinzugefügt. |
| ng serve <project> [options] | Baut die App und zeigt diese im Browser an. Änderungen am Code werden direkt neu gebaut und angezeigt. |
| ng build <project> [options] | Baut die App und kopiert alle kompilierten Sourcen in den /dist Ordner. Der Inhalt stellt das Angular Artefakt zum Veröffentlichen dar. |
| ng generate <schematic> [options] | Erzeugt basierend auf den Angular Schemas neue Dateien. Somit lassen sich beispielsweiße neue Klassen, Komponenten, Services oder Pipes erstellen. |
| ng lint <project> [options] | Führt eine statische Codeanalyse aus und zeigt eventuelle Schwachstellen im Code auf. |
| ng test <project> [options] | Führt Tests mit unterschiedlichen Optionen aus. |
| ng update [options] | Ermöglicht die automatische Aktualisierung der Abhängigkeiten und des Angular Frameworks. |
Die eben beschriebenen Befehle ermöglichen die Abdeckung des gesamten Entwicklungszyklus. Jeder dieser Befehle kann durch weitere Optionsparameter individualisiert werden.
Beispiel:
- ng new myApp –routing=true
- Erstellt eine Anwendung mit dem Namen myApp und stellt ein voll funktionsfähiges Routingmodule bereit. Routingmodule werden normalerweise verwendet, um dem Nutzer unterschiedliche Subseiten anzuzeigen (Auswählbar in Form eines Menüs), um den Inhalt der Webseite angemessen zu strukturieren.
- cd myApp
- Wechselt in das Verzeichnis der eben erstellten Anwendung.
- ng serve
- Kompiliert die Anwendung und startet einen Live Development Server. Erreichbar ist die Anwendung dann normalerweise auf http://localhost:8080
- ng test –environment=prod
- Ermöglicht den Start der Tests mit dem Umgebungsparameter „prod“, welcher in der Regel repräsentativ für die Produktivumgebung ist.
Eine vollständige Dokumentation der Angular CLI befindet sich auf: https://cli.angular.io/
Fazit
Anhand des obigen Beispiels wird deutlich, dass die Angular CLI die Möglichkeit schafft, in kürzester Zeit, eine saubere und qualitativ hochwertige Anwendungsstruktur anzulegen, welche sofort kompilier- und testfähig ist. Durch den Einsatz der Angular CLI entstehen neben diesem Komfort, weitere positive Nebeneffekte. So wird im großen Stil die Einhaltung des Angular Styleguides sichergestellt, da die Erzeugung der Elemente sowie die Struktur unter Berücksichtigung des Angular Schemas durchgeführt wird. Darüber hinaus sehen Angular Projekte unter Verwendung der Angular CLI, zumindest in der Grundstruktur immer gleich aus, wodurch die Wartbarkeit und Übertragbarkeit des Codes verbessert wird. Die Entwicklung von Angular Apps sollte wenn möglich immer mit der Angular CLI durchgeführt werden.
Quellen
https://angular.de/artikel/was-ist-angular/
https://angular.de/artikel/angular-cli-einfuehrung/
https://github.com/angular/angular-cli/wiki
https://de.wikipedia.org/wiki/Npm_(Software)
