Angular 9 für Anfänger - So installieren Sie Ihre erste App mit Angular CLI

Angular ist eines der beliebtesten JavaScript-Frameworks, die von Google erstellt und entwickelt wurden. In den letzten Jahren hat ReactJS großes Interesse geweckt und sich zur beliebtesten modernen JS-Bibliothek der Branche entwickelt. Dies bedeutet jedoch nicht, dass Angular nicht mehr wichtig ist.

Im Gegenteil, Angular ist nach React laut Google Trends (weltweit) das zweitbeliebteste Framework:

Als Front-End-Entwickler habe ich mit Angular gearbeitet. Jetzt möchte ich in meinen kommenden Artikeln einige wichtige Funktionen von Angular behandeln:

  • Teil 1: So installieren Sie Ihre erste App mit der Angular CLI (derzeit sind Sie hier)
  • Teil 2: Winkelkomponenten und String-Interpolation
  • Teil 3 : Winkelanweisungen und Rohre
  • Teil 4: Einwegdatenbindung im Winkel
  • Teil 5: Winkel-Zweiwege-Datenbindung mit ngModel

Im ersten Teil meiner Angular for Beginners-Reihe erfahren Sie, was Angular & Angular CLI ist und wie Sie Ihre erste Angular-App mithilfe der CLI installieren.

Voraussetzungen

Bevor Sie Angular lernen, empfehle ich Ihnen, sich mit den folgenden Sprachen vertraut zu machen, falls Sie dies noch nicht getan haben:

  • HTML, CSS
  • JavaScript / ES6
  • Typoskript

Wenn Sie es vorziehen, können Sie sich das folgende Tutorial-Video ansehen:

Was ist Angular?

Angular ist ein JavaScript-Framework, das von Google zum Erstellen von Front-End-Anwendungen entwickelt und verwaltet wird. Lassen Sie mich zunächst erklären, was ein Framework ist…

Was ist ein Framework?

Ein Framework ist ein Komplettpaket mit eigenen Funktionen und Bibliotheken. Ein Framework hat seine eigenen Regeln, Sie haben nicht viel Flexibilität und das Projekt ist abhängig von dem Framework, das Sie verwenden. Angular ist ein Beispiel für ein Framework.

Angular wurde 2016 veröffentlicht, aber vor Angular gab es AngularJS. Eine der am häufigsten gestellten Fragen zu Angular ist, was der Unterschied zwischen AngularJS und Angular ist.

AngularJS vs Angular

Diese beiden Versionen von Angular verwirren viele Entwickler. AngularJS und Angular sind völlig unterschiedliche Frameworks. Angular-Versionen (wie 1, 1.2, 1.5 usw.) werden als Angular JS bezeichnet und ab Version 2 als Angular.

  • Angular JS → Versionen von 1.x.
  • Winkel → Version 2 und höher

Angular Version 2 ist also eine vollständige Überarbeitung des AngularJS-Frameworks, und die neueren Versionen (wie 4,5,6 usw.) sind geringfügige Änderungen von Angular Version 2.

In dieser Artikelserie lernen Sie Angular 2+.

Was ist Angular CLI?

CLI steht für Command Line Interface. Angular hat eine eigene offizielle CLI, die uns bei vielen Dingen während des Entwicklungsprozesses hilft.

Angular CLI wird verwendet, um Vorgänge in Angular-Projekten zu automatisieren, anstatt sie manuell auszuführen. CLI unterstützt uns Entwickler bei einem Angular-Projekt von Anfang bis Ende.

Angular CLI kann beispielsweise verwendet werden für:

  • Konfigurationen, Umgebungs-Setup
  • Gebäudekomponenten, Dienstleistungen, Routing-System
  • Starten, Testen und Bereitstellen des Projekts
  • Installieren von Bibliotheken von Drittanbietern (wie Bootstrap, Sass usw.)

und vieles mehr. Lassen Sie uns nun sehen, wie Sie unsere erste Angular App mithilfe der CLI Schritt für Schritt installieren.

Schritt 1: Installieren Sie NPM (Node Package Manager)

Zunächst benötigen wir Node js. NPM (Node Package Manager, ist Teil von Node Js) ist ein Tool zum Installieren von Bibliotheken und Abhängigkeiten von Drittanbietern in unserem Projekt. Wenn Sie es noch nicht haben, können Sie es hier herunterladen und installieren. Ich habe es auch Schritt für Schritt im Tutorial-Video erklärt.

Schritt 2: Installieren Sie Angular CLI

Wenn Sie den Knoten js installiert haben, installieren Sie im nächsten Schritt die Angular CLI selbst auf Ihrem Computer:

npm install -g @angular/cli

g steht für globale Installation . Wenn Sie -g später verwenden, können Sie die CLI in jedem Angular-Projekt auf Ihrem Computer verwenden.

Tipp : Geben Sie ng vin Ihre Befehlszeilenschnittstelle (oder Ihr Terminal) ein, um Ihre Angular-Version zu überprüfen.

Schritt 3: Erstellen Sie ein neues Winkelprojekt

Nach Abschluss der Installation können Sie mit Angular CLI ein neues Angular-Projekt mit dem folgenden Befehl erstellen:

ng new my-first-app

Dieser Befehl erstellt ein neues Angular-Projekt (mit dem Namen my-first-app, Sie können einen beliebigen Namen verwenden) mit allen erforderlichen Abhängigkeiten und Dateien. Sie müssen sich um nichts kümmern, da die CLI dies automatisch für Sie erledigt.

Schritt 4: Führen Sie die App aus

Nach der Installation der CLI und dem Erstellen einer neuen Angular-App besteht der letzte Schritt darin, das Projekt zu starten. Dazu müssen wir den folgenden Befehl verwenden:

ng serve -- open

Das Flag "Öffnen" öffnet automatisch Ihr lokales Browserfenster.

Angular unterstützt Live-Server , sodass Sie die Änderungen in Ihrem lokalen Server sehen können , ohne die Seite Ihres Browsers zu aktualisieren. Weitere Details und Aktualisierungen finden Sie auch in der offiziellen Dokumentation.

Fazit

Im ersten Teil haben wir eine Einführung in Angular gegeben, was CLI ist und wie Sie Ihre erste Angular-App installieren. Im zweiten Beitrag lernen Sie Angular Components und String Interpolation kennen. Bleib dran :)

Wenn Sie mehr über Web - Entwicklung erfahren möchten, fühlen Sie sich frei zu mir auf Youtube zu folgen !

Danke fürs Lesen!