Die ultimative Angular -CLI -Referenzhandbuch

In diesem Artikel wird die Winkel -CLI untersucht: seine Fähigkeiten, Funktionen und zugrunde liegenden Mechanismen. Sogar erfahrene Angular -CLI -Benutzer werden dies für eine hilfreiche Auffrischung in den inneren Arbeiten finden. Obwohl die Winkel -CLI nicht streng obligatorisch für die Winkelentwicklung ist, verbessert sie die Codequalität und die Effizienz der Entwickler erheblich.

Dies ist die erste in einer vierteiligen Serie zum Bau einer Todo-Anwendung in Angular.

1. Teil 0 - Die ultimative Angular -CLI -Referenzhandbuch
2. Teil 1 - Erstellen Sie die anfängliche Todo -Anwendung
3. Teil 2 - Trennung von Komponenten für Todo -Listen und einzelne Todos
4. Teil 3 - Integration des Todo -Dienstes in eine REST -API
5. Teil 4 - Verwenden Sie den Winkelrouter für die Datenauflösung

Schlüsselkonzepte:

• Die Angular -CLI ist eine leistungsstarke Toolset -optimierende Winkel -App -Entwicklung durch Automatisierung von Aufgaben wie Erstellung, Testen und Bereitstellung.
• node.js, npm und idealerweise sind Typscript Voraussetzungen für die Winkel -CLI -Installation.
• ng new Erstellt neue Winkelprojekte und Einrichten automatisch Dateien, Abhängigkeiten und Konfigurationen.
• ng serve Ermöglicht das Live-Nachladen und liefert Echtzeitvoranträge von Codeänderungen.
• ng generate fügt vorhandenen Projekten Funktionen (Komponenten, Dienste usw.) hinzu.
• ng build Erstellt Anwendungen für die Produktion durch Bündeln von JavaScript und CSS.
• Die Winkel -CLI geht über die Codeerzeugung hinaus; Es versteht die Anwendungsstruktur und sorgt für die Qualität und Konsistenz von Codebasis.

Eine kurze Geschichte

Angular Final wurde am 15. September 2016 veröffentlicht. Die Entwicklung von einem Framework (AngularJS 1.x) zu einer umfassenden Plattform, die Web-, Mobile -Web-, Native Mobile und Desktop Development unterstützt, erfordert eine robuste Toolierung. Das Angular -Team entwickelte die Angular -CLI, um die Einrichtungs- und Konfigurationskomplexitäten zu minimieren, sodass Entwickler sich auf die Anwendungsbildung konzentrieren können. Dieses Toolset enthält IDE/Editor -Integrationen und die Angular Cli selbst.

2017.04.25 Update: Reflektiert die Änderungen der Winkel -CLI v1.0. Weitere Informationen zur Aktualisierung vorhandener Projekte finden Sie im Migrationshandbuch für Angular CLI V1.0.

2017.02.17 Update: Der Befehl ng deploy wurde aus dem Kernwinkel -Cli entfernt.

2017.01.27 Update: Verwendet offiziell "AngularJs" für 1.x und "Angular" für 2 Releases.

Was ist Winkelcli?

Angular CLI ist eine Befehlszeilenschnittstelle, die Entwicklungsworkflows automatisiert. Zu seinen Fähigkeiten gehören:

• neue Winkelanwendungen erstellen
• Ausführen eines Entwicklungsservers mit LivereLoad für Echtzeit-Vorschau
• Features zu vorhandenen Anwendungen addieren
• Ausführen von Unit -Tests
• Durchführung von End-to-End-Tests (E2E)
• Gebäudeanwendungen für die Produktionsbereitstellung

Bevor Sie diese Funktionen untersuchen, lassen Sie uns die Installation abdecken.

Voraussetzungen

node.js (6.9.0 oder höher) und npm (3.0.0 oder höher) sind erforderlich. Laden Sie die neueste Version node.js von der offiziellen Website herunter. Überprüfen Sie die Versionen mit:

$ node -v
$ npm -v

TypeScript -Installation (sehr empfohlen) erfolgt über NPM:

$ npm install -g typescript@2.2.0

mit node.js und Typscript installiert, installieren Sie die Angular Cli.

Angular Cli

global mit NPM installieren:

$ npm install -g @angular/cli

Überprüfen Sie die Installation mit:

$ ng version

Dies zeigt die installierten Versionsinformationen an (z. B. @angular/cli: 1.0.0).

Erstellen einer neuen Winkelanwendung

Es gibt zwei Methoden zum Erstellen neuer Anwendungen:

• ng init: Erstellt eine Anwendung im aktuellen Verzeichnis.
• ng new: Erstellt ein neues Verzeichnis und läuft dann ng init darin.

ng new wird für seine Verzeichniserstellung bevorzugt. Zum Beispiel:

$ ng new my-app

Dies erstellt das Verzeichnis my-app, generiert die erforderlichen Dateien, installiert Abhängigkeiten, konfiguriert TypeScript-, Karma-, Prospraktor- und Umgebungsdateien.

verfügbare Optionen für ng new

zahlreiche Optionen passen Sie die Projekterstellung an (siehe ng generate --help für eine vollständige Liste):

• --dry-run: simuliert die Erstellung ohne Schreiben von Dateien.
• --verbose: Bietet eine detaillierte Ausgabe.
• --link-cli: Verknüpft das @angular/cli -Paket.
• --skip-install: überspringt die NPM -Installation.
• --skip-git: überspringt Git -Repository -Initialisierung.
• --skip-tests: Überschneidet die Erstellung von Testdateien.
• --skip-commit: überspringt das anfängliche Git Commit.
• --directory: Gibt den Verzeichnisnamen an.
• --source-dir: Gibt den Namen des Quellverzeichnisses an.
• --style: Gibt die Stilsprache an (CSS, weniger, scss).
• --prefix: Gibt das Komponentenpräfix an.
• --mobile: generiert eine progressive Web -App (PWA).
• --routing: Fügt Routing -Modul hinzu.
• --inline-style: Verwendet Inline -Stile.
• --inline-template: Verwendet Inline -Vorlagen.

Lassen Sie uns nun die Anwendung ausführen.

Ausführen Ihrer Anwendung

Navigieren Sie zum Projektverzeichnis (cd my-app) und rennen Sie:

$ node -v
$ npm -v

startet der Entwicklungsserver (Standardport 4200). Leberoad aktualisiert den Browser in Dateiänderungen automatisch. Drücken Sie ctrl-c, um den Server zu stoppen.

Funktionen

Der Befehl ng generate fügt Funktionen hinzu:

• ng generate class my-new-class
• ng generate component my-new-component
• ng generate directive my-new-directive
• ng generate enum my-new-enum
• ng generate module my-new-module
• ng generate pipe my-new-pipe
• ng generate service my-new-service

kürzere Formen existieren (z. B. ng g c my-new-component). Jeder Unterbefehl verfügt über spezielle Optionen (prüfen Sie ng generate --help). Die CLI integriert intelligent neue Funktionen in die entsprechenden Module.

(Der Rest der Antwort würde jedes ng generate Unterbefehl, Unit -Tests, E2E -Tests, Produktionsaufbaute, Bereitstellungen (Bekanntgabe der Entfernung von ng deploy), Auswerfen der Anwendung, zukünftigen Merkmale, einer Zusammenfassung und FAQs weiterhin beschreiben Aufrechterhalten der ursprünglichen Struktur und der Bildplatzierung aufgrund von Längenbeschränkungen die detaillierte Erläuterung jedes Unterbefehls und der verbleibenden Abschnitte.

Das obige ist der detaillierte Inhalt vonDie ultimative Angular -CLI -Referenzhandbuch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!