So installieren Sie Angular unter Windows: Eine Anleitung zu Angular CLI, Node.js und Build Tools

In diesem Tutorial erfahren Sie, wie Sie Angular CLI in Windows installieren und damit ein Angular-Projekt erstellen.

Was ist Angular CLI?

Angular CLI ist das offizielle Tool zum Initialisieren und Arbeiten mit Angular-Projekten. Es erspart Ihnen den Aufwand komplexer Konfigurationen und Build-Tools wie TypeScript, Webpack usw.

Nach der Installation von Angular CLI müssen Sie einen Befehl ausführen, um ein Projekt zu generieren, und einen anderen, um es mithilfe eines lokalen Entwicklungsservers zum Spielen mit Ihrer Anwendung bereitzustellen.

Wie die meisten modernen Frontend-Tools heutzutage basiert Angular CLI auf Node.js.

Node.js ist eine Servertechnologie, mit der Sie JavaScript auf dem Server ausführen und serverseitige Webanwendungen erstellen können. Angular ist jedoch eine Front-End-Technologie. Selbst wenn Sie Node.js auf Ihrem Entwicklungscomputer installieren müssen, dient es nur zum Ausführen der CLI.

Sobald Sie Ihre App für die Produktion erstellt haben, benötigen Sie Node.js nicht mehr, da die endgültigen Bundles nur statisches HTML, CSS und JavaScript sind, die von jedem Server oder CDN bereitgestellt werden können.

Wenn Sie jedoch eine Full-Stack-Webanwendung mit Angular erstellen, benötigen Sie möglicherweise Node.js zum Erstellen des Back-End-Teils, wenn Sie JavaScript für das Front-End und das Back-End verwenden möchten.

Schauen Sie sich den MEAN-Stack an - eine Architektur, die MongoDB, Express (ein Webserver und ein REST-API-Framework, das auf Node.js basiert) und Angular umfasst. Sie können diesen Artikel lesen, wenn Sie eine schrittweise Anleitung benötigen, um loszulegen.

In diesem Fall wird Node.js zum Erstellen des Back-End-Teils Ihrer App verwendet und kann durch jede gewünschte serverseitige Technologie wie PHP, Ruby oder Python ersetzt werden. Angular hängt jedoch nicht von Node.js ab, außer von seinem CLI-Tool und der Installation von Paketen ab npm.

NPM steht für Node Package Manager. Es ist eine Registrierung zum Hosten von Node-Paketen. In den letzten Jahren wurden damit auch Front-End-Pakete und Bibliotheken wie Angular, React, Vue.js und sogar Bootstrap veröffentlicht.

Hinweis : Sie können unser Angular 8-Buch herunterladen : Erstellen Sie Ihre ersten Web-Apps mit Angular 8 kostenlos.

Angular CLI unter Windows installieren

Zunächst müssen Node und npm auf Ihrem Entwicklungscomputer installiert sein. Es gibt viele Möglichkeiten, dies zu tun, wie zum Beispiel:

  • Verwenden von NVM (Node Version Manager) zum Installieren und Arbeiten mit mehreren Versionen von Node in Ihrem System
  • Verwenden Sie den offiziellen Paketmanager Ihres Betriebssystems
  • Installation von der offiziellen Website.

Lassen Sie es uns einfach halten und die offizielle Website nutzen. Besuchen Sie einfach die Download-Seite und greifen Sie auf die Binärdateien für Windows zu. Folgen Sie dann dem Setup-Assistenten.

Sie können sicherstellen, dass Node auf Ihrem System installiert ist, indem Sie den folgenden Befehl an einer Eingabeaufforderung ausführen, auf der die installierte Version von Node angezeigt werden soll:

$ node -v 

Führen Sie als Nächstes den folgenden Befehl aus, um Angular CLI zu installieren:

$ npm install @angular/cli 

Nachdem der Befehl erfolgreich abgeschlossen wurde, sollte Angular CLI installiert sein.

Eine Kurzanleitung für Angular CLI

Nach der Installation von Angular CLI können Sie viele Befehle ausführen. Beginnen wir mit der Überprüfung der Version der installierten CLI:

$ ng version 

Ein zweiter Befehl, den Sie möglicherweise ausführen müssen, ist der helpBefehl zum Abrufen einer vollständigen Hilfe zur Verwendung:

$ ng help 

Die CLI bietet die folgenden Befehle:

add: Fügt Ihrem Projekt Unterstützung für eine externe Bibliothek hinzu.

build (b): Kompiliert eine Angular-App in ein Ausgabeverzeichnis, das   dist/  unter dem angegebenen Ausgabepfad benannt ist. Muss aus einem Arbeitsbereichsverzeichnis ausgeführt werden.

config: Ruft Winkelkonfigurationswerte ab oder legt diese fest.

doc (d): Öffnet die offizielle Angular-Dokumentation (angular.io) in einem Browser und sucht nach einem bestimmten Schlüsselwort.

e2e (e): Erstellt und bedient eine Angular-App und führt dann End-to-End-Tests mit Protractor aus.

generate (g): Generiert und / oder ändert Dateien basierend auf einem Schaltplan.

help: Listet verfügbare Befehle und deren Kurzbeschreibungen auf.

lint (l): Führt Flusenwerkzeuge für Angular-App-Code in einem bestimmten Projektordner aus.

new (n): Erstellt einen neuen Arbeitsbereich und eine erste Angular-App.

run: Führt ein benutzerdefiniertes Ziel aus, das in Ihrem Projekt definiert ist.

serve (s): Erstellt und bedient Ihre App und erstellt sie bei Dateiänderungen neu.

test (t): Führt Unit-Tests in einem Projekt aus.

update: Aktualisiert Ihre Anwendung und ihre Abhängigkeiten. Siehe //update.angular.io/

version (v): Gibt die Angular CLI-Version aus.

xi18n: Extrahiert i18n-Nachrichten aus dem Quellcode.

Ein Projekt generieren

Sie können Angular CLI verwenden, um Ihr Angular-Projekt schnell zu generieren, indem Sie den folgenden Befehl in Ihrer Befehlszeilenschnittstelle ausführen:

$ ng new frontend 

Hinweis: Frontend ist der Name des Projekts. Sie können natürlich einen beliebigen gültigen Namen für Ihr Projekt auswählen. Da wir eine Full-Stack-Anwendung erstellen, verwende ich  Frontend als Namen für die Front-End-Anwendung.

Wie bereits erwähnt, werden Sie von der CLI gefragt, ob Sie Angular Routing hinzufügen möchten. und Sie können antworten, indem Sie y(Ja) oder n(Nein) eingeben. Dies ist die Standardoption. Außerdem werden Sie nach dem Stylesheet-Format gefragt, das Sie verwenden möchten (z. B. CSS). Wählen Sie Ihre Optionen und klicken Sie,   Enter  um fortzufahren.

Angular 8 Projektstruktur

Danach haben Sie Ihr Projekt mit einer Verzeichnisstruktur und einer Reihe von Konfigurationen und Codedateien erstellt. Es wird hauptsächlich in den Formaten TypeScript und JSON vorliegen. Lassen Sie uns die Rolle jeder Datei sehen:

  • /e2e/: enthält End-to-End-Tests (Simulation des Benutzerverhaltens) der Website
  • /node_modules/: Alle Bibliotheken von Drittanbietern werden mit in diesem Ordner installiert  npm install
  • /src/: enthält den Quellcode der Anwendung. Die meiste Arbeit wird hier erledigt
  • /app/: enthält Module und Komponenten
  • /assets/: enthält statische Elemente wie Bilder, Symbole und Stile
  • /environments/: enthält umgebungsspezifische Konfigurationsdateien (Produktion und Entwicklung)
  • browserslist: Wird vom Autoprefixer für die CSS-Unterstützung benötigt
  • favicon.ico: das Favicon
  • index.html: die Haupt-HTML-Datei
  • karma.conf.js: die Konfigurationsdatei für Karma (ein Testwerkzeug)
  • main.ts: Die Hauptstartdatei, von der aus das AppModule gebootet wird
  • polyfills.ts: Polyfills, die von Angular benötigt werden
  • styles.css: Die globale Stylesheet-Datei für das Projekt
  • test.ts: Dies ist eine Konfigurationsdatei für Karma
  • tsconfig.*.json: die Konfigurationsdateien für TypeScript
  • angular.json: enthält die Konfigurationen für CLI
  • package.json: enthält die grundlegenden Informationen des Projekts (Name, Beschreibung und Abhängigkeiten)
  • README.md: Eine Markdown-Datei, die eine Beschreibung des Projekts enthält
  • tsconfig.json: die Konfigurationsdatei für TypeScript
  • tslint.json: die Konfigurationsdatei für TSlint (ein statisches Analysetool)

Dienen Sie Ihrem Projekt

Angular CLI bietet eine vollständige Toolkette für die Entwicklung von Front-End-Apps auf Ihrem lokalen Computer. Daher müssen Sie keinen lokalen Server installieren, um Ihr Projekt zu bedienen. Sie können einfach den   ng serveBefehl von Ihrem Terminal aus verwenden, um Ihr Projekt lokal zu bedienen.

Navigieren Sie zuerst in den Ordner Ihres Projekts und führen Sie die folgenden Befehle aus:

$ cd frontend $ ng serve 

Sie können jetzt zur Adresse // localhost: 4200 / navigieren, um mit Ihrer Front-End-Anwendung zu spielen. Die Seite wird automatisch neu geladen, wenn Sie eine Quelldatei ändern.

Winkelartefakte erzeugen

Angular CLI bietet einen ng generateBefehl, mit dem Entwickler grundlegende Angular-Artefakte wie Module, Komponenten, Anweisungen, Pipes und Services generieren können:

$ ng generate component my-component 

my-componentist der Name der Komponente. Die Winkel CLI automatisch einen Verweis hinzuzufügen components, directivesund pipesin der src/app.module.tsDatei.

Wenn Sie Ihre Komponente, Direktive oder Pipe einem anderen Modul (außer dem Hauptanwendungsmodul app.module.ts) hinzufügen möchten , können Sie dem Namen der Komponente einfach den Modulnamen und einen Schrägstrich voranstellen:

$ ng g component my-module/my-component 

my-module ist der Name eines vorhandenen Moduls.

Fazit

In diesem Tutorial haben wir gesehen, wie Angular CLI auf unserem Windows-Computer installiert wird, und wir haben es verwendet, um ein neues Angular-Projekt von Grund auf neu zu initialisieren.

Wir haben auch verschiedene Befehle gesehen, die Sie während der Entwicklung Ihres Projekts zum Generieren von Angular-Artefakten wie Modulen, Komponenten und Diensten verwenden können.

Schauen Sie sich auch unsere anderen Angular-Tutorials an.

Sie können den Autor über seine persönliche Website, Twitter, LinkedIn und Github erreichen oder ihm folgen.