Einführung in Angular CLI

In diesem Beitrag lernen wir Angular CLI kennen und erfahren, wie Sie damit ein neues Angular-Projekt initialisieren können.

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-Buch herunterladen: Erstellen Sie Ihre ersten Web-Apps mit Angular kostenlos.

Angular CLI 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 Knotenversionen 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 @ angle / cli

Zum Zeitpunkt dieses Schreibens wird Angular 8.3 installiert.

Wenn Sie Angular 9 installieren möchten, fügen Sie einfach das nächste Tag wie folgt hinzu:

$ npm install @ angle / cli @ next

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 Hilfebefehl, um eine vollständige Verwendungshilfe zu erhalten:

$ ng Hilfe

Die CLI bietet die folgenden Befehle:

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

build (b): Kompiliert eine Angular-App in ein Ausgabeverzeichnis mit dem Namen dist / am angegebenen Ausgabepfad. Muss aus einem Arbeitsbereichsverzeichnis ausgeführt werden.

config: Ruft Winkelkonfigurationswerte ab oder legt diese fest.

doc (d): Öffnet die offizielle Angular-Dokumentation (angle.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.

Hilfe: Listet die verfügbaren Befehle und ihre 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.

Ausführen: 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 https://update.angular.io/

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

xi18n: Extrahiert i18n-Nachrichten aus dem Quellcode.

Ein Projekt generieren

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

$ ng neues 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 das 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, was die Standardoption ist. Außerdem werden Sie nach dem Stylesheet-Format gefragt, das Sie verwenden möchten (z. B. CSS). Wählen Sie Ihre Optionen und drücken Sie die Eingabetaste, um fortzufahren.

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 npm install in diesem Ordner installiert
  • / src /: enthält den Quellcode der Anwendung. Die meiste Arbeit wird hier erledigt
  • / app /: enthält Module und Komponenten
  • / Assets /: Enthält statische Assets wie Bilder, Symbole und Stile
  • / environment /: enthält umgebungsspezifische Konfigurationsdateien (Produktion und Entwicklung)
  • Browserliste: 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
  • angle.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 Befehl ng serve von Ihrem Terminal aus verwenden, um Ihr Projekt lokal zu bedienen.

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

$ cd frontend $ ng dienen

Sie können jetzt zur Adresse http: // 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 Befehl ng generate, mit dem Entwickler grundlegende Angular-Artefakte wie Module, Komponenten, Anweisungen, Pipes und Services generieren können:

$ ng Komponente my-Komponente generieren

my-component ist der Name der Komponente. Die Angular-CLI fügt automatisch einen Verweis auf Komponenten, Anweisungen und Pipes in der Datei src / app.module.ts hinzu.

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

$ ng g Komponente my-module / my-component

my-module ist der Name eines vorhandenen Moduls.

Fazit

In diesem Beitrag haben wir gesehen, wie Angular CLI auf unserem Entwicklungscomputer installiert wird, und wir haben damit ein neues Angular-Projekt von Grund auf neu initialisiert.

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

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