Angular ist dank seiner robusten Funktionen und seiner Benutzerfreundlichkeit schnell zu einem der beliebtesten Frameworks für die Entwicklung von Webanwendungen geworden. Aber wie benutzt du es?

Heute erklären wir dir alles, was du über Angular wissen musst – von seinem Hintergrund und seiner Bedeutung für die Webentwicklung bis hin zu einer Schritt-für-Schritt-Anleitung, wie du es auf verschiedenen Betriebssystemen installieren kannst. Wir haben keine Zeit zu verlieren, also lass uns loslegen.

Was ist Angular?

Angular Website
Angular

Angular ist ein Open-Source-Framework für Webanwendungen, das 2010 von Google entwickelt wurde. Es basiert auf TypeScript, einer statisch typisierten Obermenge von JavaScript, die optionale Typen und andere Funktionen für robusteren und besser wartbaren Code bietet.

Angular hat eine komponentenbasierte Architektur, d. h., die Anwendungen werden aus wiederverwendbaren Komponenten aufgebaut, die leicht in eine größere Anwendung integriert werden können. Dieser Ansatz ermöglicht eine bessere Organisation, Wartbarkeit und Skalierbarkeit deiner Projekte.

Einige der wichtigsten Funktionen von Angular sind:

  • Es ist komponentenbasiert
  • Fokus auf Skalierbarkeit und Wartbarkeit
  • Starke Unterstützung für bidirektionale Datenbindung und Dependency Injection
  • Ein umfangreiches Set an integrierten Direktiven und Diensten

Wer nutzt Angular?

Angular ist eine beliebte Wahl für verschiedene Arten von Entwicklern, darunter:

Viele große Unternehmen setzen Angular aufgrund seiner Leistungsfähigkeit und Flexibilität auch in ihren Projekten ein.

Einige dieser Unternehmen sind:

  • Google: Es ist keine Überraschung, dass Google, der Erfinder von Angular, auch einer der größten Nutzer ist. Google hat Angular in verschiedenen Produkten eingesetzt, z. B. in Google AdWords, Google Cloud Platform und der Google Analytics Suite.
  • Microsoft: Microsoft hat Angular für mehrere seiner Produkte übernommen, darunter den beliebten Code-Editor Visual Studio Code, der auf Angular und anderen Webtechnologien basiert. Außerdem hat Microsoft Angular in seine Azure-Plattform für die Entwicklung und den Einsatz von Cloud-Anwendungen integriert.
  • IBM: Ein weiteres großes Technologieunternehmen, das Angular für seine Projekte einsetzt, ist IBM, das Angular in seiner Kundensupport-Plattform verwendet.
  • PayPal: Die weltweit führende Online-Zahlungsplattform hat Angular für ihre Webentwicklungsprojekte gewählt. Das Produkt PayPal Checkout, mit dem Unternehmen sichere Online-Zahlungen akzeptieren können, wurde mit Angular entwickelt, was die Fähigkeit des Frameworks unter Beweis stellt, sichere und umfangreiche Anwendungen zu entwickeln.
  • Upwork: Die beliebte Plattform für Freiberufler, die Unternehmen mit Fachkräften zusammenbringt, nutzt ebenfalls Angular für ihre Webentwicklung. Die Upwork-Talentplattform des Unternehmens wurde mit Angular entwickelt und zeigt die Fähigkeiten des Frameworks bei der Erstellung einer reaktionsschnellen und benutzerfreundlichen Oberfläche für die Verwaltung von Projekten und die Einstellung von Freiberuflern.
  • Lyft: Die Ride-Sharing-Plattform nutzt Angular für die Entwicklung ihrer Webanwendungen. Die Lyft Business Plattform, die Transportlösungen für Unternehmen und Organisationen anbietet, wurde mit Angular entwickelt und zeigt die Fähigkeit des Frameworks, skalierbare und robuste Anwendungen für verschiedene Branchen zu erstellen.

Die große Vielfalt an Unternehmen, die Angular einsetzen, zeigt, dass dieses leistungsstarke Framework eine ausgezeichnete Wahl für Webentwicklungsprojekte jeder Größe und Komplexität ist.

Vorteile der Verwendung von Angular

Bevor wir in den Installationsprozess eintauchen, wollen wir kurz auf einige der wichtigsten Vorteile von Angular für deine Webentwicklungsprojekte eingehen:

Komponentenbasiertes Design fördert die Wiederverwendbarkeit

Die komponentenbasierte Architektur von Angular ermutigt Entwickler dazu, modulare, wiederverwendbare Komponenten zu erstellen, die leicht in größere Anwendungen integriert werden können. Dieser Ansatz macht deinen Code nicht nur übersichtlicher, sondern fördert auch die Wiederverwendbarkeit, was auf lange Sicht Zeit und Aufwand sparen kann.

Starke Unterstützung für TypeScript

TypeScript, die statisch getippte Obermenge von JavaScript, ist ein zentraler Bestandteil von Angular. Die optionalen Typen und andere Funktionen von TypeScript machen es einfacher, robusten und wartbaren Code zu schreiben, was besonders für große Projekte wichtig ist.

Betonung der modularen Architektur

Der Schwerpunkt von Angular auf Modularität bedeutet, dass deine Anwendungen leicht in kleinere, überschaubare Teile zerlegt werden können. Das macht es einfacher, deine Projekte zu skalieren und sie im Laufe der Zeit zu pflegen und zu aktualisieren.

Integrierte Unterstützung für reaktive Programmierung

Angular unterstützt die reaktive Programmierung.
Bibliothek für React-Erweiterungen

Angular bietet mit der RxJS-Bibliothek integrierte Unterstützung für reaktive Programmierung. Die reaktive Programmierung ist ein leistungsfähiges Paradigma, das es dir ermöglicht, mit asynchronen Datenströmen zu arbeiten und so komplexe Datenflüsse und Benutzerinteraktionen in deinen Anwendungen einfacher zu handhaben.

Robustes Ökosystem und Tools

Angular verfügt über ein reichhaltiges Ökosystem an Tools, Bibliotheken und Ressourcen, mit denen du das Beste aus dem Framework herausholen kannst. Von der Angular CLI (Command Line Interface) bis hin zur umfangreichen Sammlung von Drittanbieter-Bibliotheken hast du alles, was du brauchst, um deine Anwendungen problemlos zu entwickeln, zu testen und einzusetzen.

Angular-Voraussetzungen

Bevor du mit der Installation von Angular beginnst, solltest du über einige grundlegende Kenntnisse und Werkzeuge verfügen. Hier ist eine Liste von Voraussetzungen, mit denen du vertraut sein solltest:

  • Grundkenntnisse in JavaScript: Da Angular auf JavaScript basiert, ist ein solides Verständnis der Sprache unerlässlich. Wenn du JavaScript noch nicht kennst, solltest du deine Kenntnisse zunächst auffrischen.
  • Vertrautheit mit der Kommandozeile/Terminal: Während des gesamten Installationsprozesses und bei der Verwendung von Angular musst du mit der Kommandozeile (unter Windows) oder dem Terminal (unter macOS und Linux) arbeiten. Die Vertrautheit mit den grundlegenden Befehlen und der Navigation ist für den Einstieg in Angular unerlässlich.
  • Vertrautheit mit TypeScript (optional): Grundlegende Kenntnisse in TypeScript sind zwar nicht unbedingt erforderlich, können aber bei der Arbeit mit Angular hilfreich sein, da das Framework auf TypeScript aufbaut. Du kannst mehr über TypeScript in der offiziellen Dokumentation erfahren.
  • Node.js und npm installiert: Für Angular müssen sowohl Node.js als auch der Node Package Manager (npm) auf deinem System installiert sein. Wenn du sie noch nicht installiert hast, kannst du den Anweisungen in unserer Anleitung zur Installation von Node.js folgen.

Systemvoraussetzungen

Bevor du Angular auf deinem Rechner installierst, musst du sicherstellen, dass dein System die folgenden Anforderungen erfüllt:

  • Betriebssystem: Windows 10, macOS 10.10 (Yosemite) oder höher, oder eine aktuelle Linux-Distribution (wie Ubuntu 18.04 oder höher)
  • Arbeitsspeicher: Mindestens 4 GB RAM
  • Speicherplatz: Mindestens 10 GB freier Festplattenplatz

Diese Anforderungen stellen sicher, dass Angular auf deinem System reibungslos läuft und du deine Anwendungen effektiv entwickeln und testen kannst.

So installierst du Angular

Die Installation von Angular ist auf Windows-, macOS- und Linux-Betriebssystemen sehr ähnlich. Trotzdem ist es ratsam, die spezifischen Anweisungen für dein System zu befolgen, um die besten Ergebnisse zu erzielen.

So installierst du Angular unter Windows

In diesem Abschnitt führen wir dich durch die Installation von Angular auf einem Windows-Rechner. Befolge die folgenden Schritte, um Angular auf deinem System zum Laufen zu bringen:

  1. Installiere Node.js und npm
  2. Installiere Angular CLI
  3. Führe Angular CLI-Befehle aus
  4. Erstelle einen Arbeitsbereich für die Anwendung
  5. Starte Angular in deinem Browser

Schritt 1: Node.js und npm installieren

Bevor du Angular installieren kannst, musst du Node.js und npm (Node Package Manager) auf deinem Rechner installiert haben. Wenn du sie noch nicht installiert hast, befolge die Anweisungen in unserem Leitfaden zur Installation von Node.js.

Schritt 2: Angular CLI global installieren

Als Nächstes musst du das Angular CLI-Tool installieren. Um das Angular CLI global auf deinem System zu installieren, öffne die Eingabeaufforderung und führe den folgenden Befehl aus:

npm install -g @angular/cli

Dieser Befehl installiert die neueste stabile Version des Angular CLI-Tools und macht es für die Verwendung in deinem System verfügbar.

Schritt 3: Angular CLI-Befehle ausführen

Sobald du das Angular CLI installiert hast, kannst du seine Befehle verwenden, um deine Angular-Projekte zu verwalten. Um zu überprüfen, ob die Installation erfolgreich war, führe den folgenden Befehl in der Eingabeaufforderung aus:

ng --version

Dieser Befehl zeigt die installierte Version der Angular CLI und andere relevante Informationen über deine Umgebung an.

Schritt 4: Erstelle einen ersten Arbeitsbereich für die Anwendung

Um eine neue Angular-Anwendung zu erstellen, musst du einen Arbeitsbereich (Workspace) erstellen. Dieser ist ein Verzeichnis, das die Konfigurationsdateien und den Quellcode für deine Angular-Projekte enthält. Um einen neuen Arbeitsbereich zu erstellen, führe den folgenden Befehl in der Eingabeaufforderung aus und ersetze my-app durch den gewünschten Namen für deine Anwendung:

ng new my-app

Dieser Befehl erstellt ein neues Verzeichnis mit dem angegebenen Namen, richtet die erforderlichen Konfigurationsdateien ein und generiert eine erste Angular-Anwendung im Arbeitsbereich.

Schritt 5: Starte die Angular-Anwendung in deinem Browser

Um deine neue Angular-Anwendung zu testen, navigierst du mit dem cd-Befehl in das neu erstellte Verzeichnis:

cd my-app

Starte dann den Entwicklungsserver, indem du den folgenden Befehl ausführst:

ng serve

Dieser Befehl kompiliert deine Angular-Anwendung und startet einen Entwicklungsserver. Standardmäßig läuft der Server auf Port 4200.

Öffne deinen bevorzugten Webbrowser und navigiere zu http://localhost:4200/. Du solltest sehen, dass deine neue Angular-Anwendung im Browser läuft.

Angular läuft nach der Installation in einem Windows-basierten Webbrowser
Angular läuft nach der Installation in einem Windows-basierten Webbrowser

Herzlichen Glückwunsch! Du hast Angular erfolgreich auf deinem Windows-Computer installiert und deine erste Angular-Anwendung erstellt. Jetzt kannst du mit der Erstellung deiner Projekte beginnen.

So installierst du Angular auf macOS

In diesem Abschnitt führen wir dich durch den Prozess der Installation von Angular auf einem macOS-Rechner. Befolge diese Schritte, um Angular auf deinem System zum Laufen zu bringen:

  1. Installiere Node.js und npm
  2. Installiere Angular CLI global
  3. Teste, ob Angular korrekt installiert wurde
  4. Erstelle eine Angular-Anwendung
  5. Führe die Anwendung aus

Schritt 1: Installiere Node.js und npm (falls noch nicht installiert)

Wie bereits erwähnt, musst du Node.js und npm auf deinem Computer installiert haben, bevor du Angular installieren kannst. Wenn du sie bereits hast, fahre mit Schritt 2 fort. Wenn nicht, befolge zuerst unsere Anleitung und fahre dann mit diesem Tutorial fort.

Schritt 2: Angular CLI global installieren

Genau wie bei der Windows-Anleitung musst du als Nächstes Angular CLI installieren, das du brauchst, um Angular-Anwendungen zu erstellen (und zu verwalten). Dazu öffnest du das Terminal und führst den folgenden Befehl aus:

npm install -g @angular/cli

Wenn du diesen Befehl ausführst, kannst du die neueste stabile Version des Angular CLI-Tools installieren und über dein System darauf zugreifen.

Schritt 3: Teste, ob Angular richtig installiert ist

Nach der Installation von Angular CLI kannst du die Befehle für die Verwaltung von Angular-Projekten nutzen. Um die erfolgreiche Installation zu überprüfen, führe den folgenden Befehl im Terminal aus:

ng --version

Du solltest die Version von Angular CLI angezeigt bekommen.

Schritt 4: Eine Angular-Anwendung erstellen

Um eine neue Angular-Anwendung zu starten, musst du zunächst einen Arbeitsbereich erstellen. Dazu musst du einen Ordner anlegen, in dem du die Konfigurationsdateien und den Quellcode für deine Angular-Projekte speicherst. Um den Arbeitsbereich zu erstellen, öffne das Terminal und gib den unten stehenden Code ein. Aber genau wie bei den Anweisungen für Windows und macOS musst du „my-app“ durch den Namen ersetzen, den du für deine Anwendung bevorzugst.

ng new my-app

Dieser Befehl führt drei Aufgaben aus: Er erstellt ein neues Verzeichnis mit dem angegebenen Namen, richtet die erforderlichen Konfigurationsdateien ein und erzeugt eine erste Angular-Anwendung innerhalb des Arbeitsbereichs.

Schritt 5: Starte die Anwendung

Um deine neue Angular-Anwendung zu testen, gehst du mit dem cd-Befehl in das Verzeichnis, in dem sie erstellt wurde.

cd my-app

Starte dann den Entwicklungsserver, indem du den folgenden Befehl ausführst:

ng serve

Um deine Angular-Anwendung zu kompilieren und einen Entwicklungsserver zu starten, verwende diesen Befehl. Der Server läuft standardmäßig auf Port 4200.

Öffne deinen Lieblings-Webbrowser und rufe http://localhost:4200/ auf, um deine neue Angular-Anwendung zu sehen.

Und das war’s auch schon. Du hast jetzt Angular auf macOS installiert und erfolgreich eine Angular-Anwendung erstellt.

So installierst du Angular unter Linux

Zum Schluss führen wir dich durch den Prozess der Installation von Angular auf einem Computer mit Linux.

Folge diesen Schritten, um Angular schnell zum Laufen zu bringen:

  1. Installiere Node.js und npm
  2. Installiere Angular CLI
  3. Erstelle eine neue Angular-Anwendung
  4. Teste die Anwendung in deinem Browser

Schritt 1: Installiere Node.js und npm (falls nicht bereits installiert)

Genau wie bei den Anleitungen für Windows und Mac musst du Node.js und npm installieren, bevor du Angular auf deinem Linux-Rechner einsetzen kannst. Wirf einen Blick auf unsere detaillierte Installationsanleitung, um zu erfahren, wie du das machst, oder fahre mit dem nächsten Schritt fort, wenn du es bereits getan hast.

Schritt 2: Installiere Angular CLI mit dem npm-Paketmanager

Als Nächstes musst du Angular CLI auf deinem System installieren. Dazu öffnest du ein Terminalfenster und gibst den folgenden Befehl ein:

npm install -g @angular/cli

Du kannst stattdessen auch den folgenden Befehl verwenden:

$ sudo npm install -g @angular/cli

Dieser Befehl installiert die neueste stabile Version des Angular CLI-Tools und macht es für die Verwendung in deinem System verfügbar.

Schritt 3: Ein neues Angular-Projekt erstellen

Um eine neue Angular-Anwendung zu erstellen, musst du einen Arbeitsbereich erstellen. Ein Arbeitsbereich (Workspace) ist ein Verzeichnis, das die Konfigurationsdateien und den Quellcode für deine Angular-Projekte enthält. Um einen neuen Arbeitsbereich zu erstellen, führe den folgenden Befehl im Terminal aus und ersetze my-app durch den gewünschten Namen für deine Anwendung:

ng new my-app

Dieser Befehl erstellt ein neues Verzeichnis mit dem angegebenen Namen und richtet die notwendigen Konfigurationsdateien dafür ein. Er erzeugt außerdem eine erste Angular-Anwendung.

Schritt 4: Teste die neue Anwendung in einem Webbrowser

Um deine neue Angular-Anwendung zu testen, navigierst du mit dem cd-Befehl in das neu erstellte Verzeichnis:

cd my-app

Gib dann das Folgende ein:

ng serve

Der Server läuft auf Port 4200. Um auf ihn zuzugreifen, musst du einen Webbrowser öffnen und zu http://localhost:4200/ gehen.

Wenn alles richtig gelaufen ist, solltest du deine neue Angular-Anwendung im Browser sehen.

Und damit hast du Angular auf Linux installiert. Wer weiß, was du als Nächstes tun wirst!

Zusammenfassung

Wenn du bis hierhin  mitgemacht hast, haben wir dich heute durch den Prozess der Installation von Angular unter Windows, macOS und Linux geführt. Wenn du die Schritte für jede Plattform befolgst, solltest du jetzt eine funktionierende Angular-Entwicklungsumgebung haben und bereit sein, mit diesem leistungsstarken Framework Webanwendungen zu erstellen.

Wenn du beginnst, Angular zu lernen und zu benutzen, vergiss nicht, die umfangreichen Ressourcen zu nutzen, die dir helfen, das Framework zu beherrschen. Von der offiziellen Angular-Dokumentation bis hin zu Community-Ressourcen wie der Angular University findest du jede Menge Material, das dich bei deinem Lernprozess unterstützt.

Vielleicht möchtest du auch einer Angular-Community beitreten, z. B. dem r/Angular Subreddit, wo du Fragen stellen, deine Erfahrungen teilen und von anderen Entwicklern lernen kannst.

Wenn du bereit bist, deine Angular-Anwendungen einzusetzen, solltest du Kinstas Anwendungs-Hosting in Betracht ziehen. Kinsta bietet hochleistungsfähige Hosting-Lösungen für Anwendungen, die mit Frameworks wie Angular entwickelt wurden, und sorgt so für ein schnelles, sicheres und zuverlässiges Erlebnis für deine Nutzer.

Wenn du Angular installiert hast und über eine Fülle von Ressourcen verfügst, bist du auf dem besten Weg, ein kompetenter Angular-Entwickler zu werden. Viel Erfolg!