Angular Command-Line Interface erklärt

Angular ist eng mit seiner Befehlszeilenschnittstelle (CLI) verbunden. Die CLI optimiert die Generierung des Angular-Dateisystems. Es behandelt den größten Teil der Konfiguration hinter den Kulissen, damit Entwickler mit dem Codieren beginnen können. Die CLI hat auch eine niedrige Lernkurve, die für jeden Neuling zu empfehlen ist, der direkt einsteigen möchte. Selbst erfahrene Angular-Entwickler verlassen sich auf die CLI!

Installation

Die Angular CLI erfordert Node.js und Node Packet Manager (NPM). Sie können mit dem Terminalbefehl nach diesen Programmen suchen : node -v; npm -v. Öffnen Sie nach der Installation ein Terminal und installieren Sie die Angular CLI mit dem folgenden Befehl : npm install -g @angular/cli. Dies kann von überall auf Ihrem System ausgeführt werden. Die CLI ist für die globale Verwendung mit dem -gFlag konfiguriert .

Überprüfen Sie mit dem folgenden Befehl, ob die CLI vorhanden ist : ng -v. Dies gibt mehrere Informationszeilen aus. In einer dieser Zeilen wird die Version der installierten CLI angegeben.

Erkennen Sie, dass dies ngder Grundbaustein der CLI ist. Alle Ihre Befehle beginnen mit ng. Es ist Zeit, sich vier der häufigsten Befehle anzusehen, denen ein Präfix vorangestellt ist ng.

Schlüsselbefehle

  • ng neu
  • ng dienen
  • ng generieren
  • ng bauen
  • ng Update

Die Schlüsselbegriffe für jeden von diesen sind ziemlich aussagekräftig. Zusammen bilden sie das, was Sie brauchen, um mit Angular auf den Boden zu kommen. Natürlich gibt es noch viel mehr. Alle Befehle sind in der GitHub-Dokumentation1 der CLI aufgeführt. Sie werden wahrscheinlich feststellen, dass die oben aufgeführten Befehle die erforderlichen Grundlagen abdecken.

ng neu

ng newerstellt ein neues Angular-Dateisystem. Dies ist ein surrealer Prozess. Navigieren Sie zu einem Speicherort, der für die Generierung neuer Anwendungen wünschenswert ist . Geben Sie diesen Befehl wie folgt ein und ersetzen [name-of-app]Sie ihn durch Folgendes : ng new [name-of-app].

Ein Dateisystem unter dem Ordner [name-of-app]sollte angezeigt werden. Fühlen Sie sich frei zu erkunden, was darin liegt. Versuchen Sie noch keine Änderungen vorzunehmen. Alles, was Sie zum Ausführen Ihrer ersten Angular-Anwendung benötigen, ist in diesem generierten Dateisystem zusammengefasst.

ng dienen

Um die Anwendung zum Laufen zu bringen, ng servemuss der Befehl im [name-of-app]Ordner ausgeführt werden. Überall im Ordner reicht das aus. Die Angular CLI muss erkennen, dass sie sich in einer Umgebung befindet, mit der generiert wurde ng new. Es wird ausgeführt, sofern diese eine Bedingung erfüllt ist. Probieren Sie es aus : ng serve.

Die Anwendung wird standardmäßig auf Port 4200 ausgeführt. Sie können die Angular-Anwendung anzeigen, indem Sie localhost:4200in einem beliebigen Webbrowser zu navigieren . Angular funktioniert in allen Browsern. Sofern Sie keine alte Version von Internet Explorer verwenden, wird die Anwendung angezeigt. Es zeigt das offizielle Angular-Logo zusammen mit einer Liste hilfreicher Links.

Ok, die Anwendung läuft. Es funktioniert hoffentlich, aber Sie müssen wissen, was unter der Haube vor sich geht. Beziehen Sie sich zurück auf das [name-of-app]Dateisystem. Navigieren [name-of-app] -> src -> app. Darin liegen die Dateien, die für das verantwortlich sind, was Sie gesehen haben localhost:4200.

ng generieren

Die .componentDateien definieren eine Angular-Komponente, einschließlich Logik ( .ts), Stil ( .css), Layout ( .html) und Testen ( .spec.ts). Das app.module.tsfällt besonders auf. Zusammen arbeiten diese beiden Dateigruppen als componentund zusammen module. Beide componentund modulesind zwei separate Beispiele für Winkelschemata. Schema klassifiziert die verschiedenen Zwecke getriebene Codeblocks erzeugbare mit ng generate.

Beachten Sie für diesen Artikel, dass ein moduleAsset Assets in und aus einem zugrunde liegenden Komponentenbaum exportiert und importiert. A befasst componentsich mit einem Abschnitt der Benutzeroberfläche. Die Logik, der Stil, das Layout und die Tests dieser Einheit bleiben in den verschiedenen .componentDateien enthalten.

Mit ng generatediesem Befehl können Skelette für jedes der verfügbaren Winkelschemata2 generiert werden. Navigieren Sie zu [name-of-app -> src -> app]. Versuchen Sie, eine neue zu generieren, componentindem Sie Folgendes ausführen : ng generate component [name-of-component]. Ersetzen Sie [name-of-component]durch was auch immer Sie möchten. Eine neue Datei [name-of-component]wird zusammen mit den erforderlichen componentDateien angezeigt.

Sie können sehen, dass ng generateAngulars Boilerplate-Code beschleunigt wird. ng generateverkabelt auch Dinge. Schaltpläne, die im Kontext eines Angular-Dateisystems erstellt wurden, werden mit dem Stammmodul des Systems verbunden. In diesem Fall wäre das eine app.module.tsDatei im Inneren [name-of-app -> src -> app].

ng bauen

Angular ist ein Front-End-Tool. Die CLI führt ihre Operationen im Auftrag des Frontends aus. ng servekümmert sich um das Setup des Back-End-Servers. Dadurch konzentriert sich die Entwicklung ausschließlich auf das Frontend. Das heißt, das Verbinden Ihres eigenen Backends mit der Angular-Anwendung muss ebenfalls möglich sein.

ng builderfüllt dieses Bedürfnis. Bevor Sie es im Dateisystem ausprobieren. Navigieren Sie zu [name-of-app] -> angular.json. Suchen Sie nach dieser einzelnen Codezeile : "outputPath": "dist/my-app".

Diese eine Konfigurationszeile bestimmt, wo ng builddie Ergebnisse ausgegeben werden. Das Ergebnis ist die gesamte Angular-Anwendung, die in einem Ordner kompiliert wurde dist/my-app. In diesem Ordner ist vorhanden index.html. Die gesamte Angular-Anwendung kann mit ausgeführt werden index.html. Nein ng serveist von hier aus notwendig. Mit dieser Datei können Sie Ihr Backend einfach verkabeln.

Probieren Sie es aus : ng build. Dies muss wiederum innerhalb des Angular-Dateisystems ausgeführt werden. Basierend auf dem Schlüsselwert von “outputPath:”in angular.json. Es wird eine Datei generiert, in der die ursprüngliche Anwendung vollständig kompiliert ist. Wenn Sie dies beibehalten haben “outputPath:”, befindet sich die kompilierte Anwendung in : [name-of-app] -> dist -> [name-of-app].

ng Update

Führen Sie beim Angular Cli ng Update eine automatische Aktualisierung aller Angular- und npm-Pakete auf die neuesten Versionen durch.

Hier ist die Syntax und Optionen können mit verwendet werden ng update.

ng update [package]

Optionen

  • Probelauf --dry-run (alias: -d)

    Durchlaufen, ohne Änderungen vorzunehmen.

  • Macht --force

    Wenn false, wird ein Fehler ausgegeben, wenn installierte Pakete mit dem Update nicht kompatibel sind.

  • alles --all

    Gibt an, ob alle Pakete in package.json aktualisiert werden sollen.

  • Nächster --next

    Verwenden Sie die größte Version, einschließlich Beta und RCs.

  • Nur migrieren --migrate-only

    Führen Sie nur eine Migration durch, aktualisieren Sie die installierte Version nicht.

  • von --from

    Version, von der migriert werden soll. Nur verfügbar, wenn ein einzelnes Paket aktualisiert wird, und nur bei Migration.

  • zu --to

    Version, bis zu der Migrationen angewendet werden sollen. Nur verfügbar, wenn ein einzelnes Paket aktualisiert wird, und nur bei Migrationen. Muss von angegeben werden. Standardmäßig wurde die installierte Version erkannt.

  • Registrierung --registry

    Die zu verwendende NPM-Registrierung.

Diese Befehle decken die Grundlagen ab. Die CLI von Angular ist ein unglaublicher Komfort, der die Generierung, Konfiguration und Erweiterung von Anwendungen beschleunigt. Dies alles unter Beibehaltung der Flexibilität, sodass der Entwickler die erforderlichen Änderungen vornehmen kann.

Bitte überprüfen Sie diese Links auf, localhost:4200falls Sie dies noch nicht getan haben. Vergessen Sie nicht zu rennen, ng servebevor Sie es öffnen. Mit einem besseren Verständnis der CLI können Sie jetzt mehr darüber erfahren, was durch die wichtigsten Befehle generiert wird.

Mehr Informationen:

  • Die besten Winkelbeispiele
  • Die besten Angular- und AngularJS-Tutorials
  • So validieren Sie eckige reaktive Formen