Tutorial zur Angular-CLI-Installation

In diesem Artikel wird hauptsächlich die Installation und Verwendung von Angular CLI für die Entwicklung und das Lernen von Angular vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Wir haben die Entwicklungsumgebung vorbereitet und können sie nun offiziell entwickeln. Wie bereits erwähnt, bietet Angular ein Befehlszeilentool, das unsere Programmentwicklung vereinfachen kann. Wir werden dieses Tool auch für zukünftige Entwicklungen verwenden, daher müssen wir zuerst dieses Entwicklungstool namens Angular CLI installieren.

Der Prozess der Installation von CLI ist sehr einfach und unterscheidet sich nicht von der Installation anderer Tools oder sogar der Installation eines normalen Entwicklungspakets. Wir haben die NPM-Registrierung konfiguriert und Garn erfolgreich installiert, sodass wir dieses Tool mit Garn installieren können. Der spezifische Befehl lautet:

rrree

Parameter global gibt „add“ an; wenn die Version nicht angegeben ist, wird Garn installiert Version der CLI. . Diese Aussage entspricht dem vorherigen NPM add

yarn global add @angular/cli

.

Danach führen wir

npm install -g @angular/cli

Wenn die Versionsnummer von Angular CLI ausgegeben werden kann, ist die Installation erfolgreich. Beachten Sie, dass alle Angular-CLI-Befehle mit

beginnen. ng

Angular CLI basiert auf Webpack und kann uns dabei helfen, ein Angular-Projekt-Framework, Angular-Module, Komponenten, Anweisungen usw. zu generieren. Wenn Sie diese Entwicklungsumgebung manuell erstellen, müssen Sie verschiedene Details des Webpacks verstehen, verschiedene automatisierte Skripte schreiben usw., was eine höhere Front-End-Entwicklungstechnologie erfordert. In Anbetracht unseres grundlegenden Tutorials ist die Verwendung der CLI zur Unterstützung der Entwicklung auf jeden Fall angemessen. Wir werden die Verwendung von Angular CLI in den folgenden Kapiteln ausführlich vorstellen. Wenn Sie sich für Angular CLI interessieren, können Sie auf der offiziellen Website weitere Einzelheiten erfahren.

Die gerade installierte CLI verwendet standardmäßig NPM als Paketverwaltungstool. Wenn wir Garn verwenden möchten, führen Sie einfach den folgenden Befehl aus:

ng version

Wenn wir hingegen zurück zu NPM wechseln möchten, verwenden Sie einfach

ng set --global packageManager=yarn

.

Nach der Installation von Angular CLI erstellen wir das erste Beispielprojekt, um die grundlegende Verwendung von Angular CLI zu erlernen.

Erstellen Sie zunächst ein Demoprojekt mit

ng set --global packageManager=npm

.

dient zum Erstellen eines neuen Projekts, und das folgende new ist der Name des Projekts. Angular CLI hilft uns dabei, ein vollständiges Projekt-Framework zu erstellen – einschließlich aller für das Projekt erforderlichen Dateien, Dateistrukturen und verschiedenen Hilfsdateien. Anschließend wird Angular CLI automatisch demo ausgeführt, um verschiedene für das Projekt erforderliche Abhängigkeiten zu installieren. Der Installationsvorgang wird lange dauern, daher müssen Sie einige Zeit geduldig warten. yarn install

Wenn eine Schnittstelle ähnlich der oben angezeigten erscheint und die Meldung „Projekt ‚Demo‘ erfolgreich erstellt“ anzeigt, bedeutet dies, dass das Projekt erstellt wurde. Wenn Fehler auftreten, müssen Sie den Installationsprozess oder die Netzwerkverbindung usw. überprüfen.

Nachdem das Projekt erstellt wurde, wird im aktuellen Verzeichnis ein Projektordner generiert. Danach können wir das Projektverzeichnis

ng new demo

aufrufen und den Befehl

cd demo

ausführen, um das Projekt zu kompilieren und dann eine integrierte Version zu starten kleiner Server, und wir können die laufenden Ergebnisse des Projekts über den Browser anzeigen. Beachten Sie den obigen Tipp: NG Live Development Server lauscht auf localhost:4200, öffnen Sie Ihren Browser auf http://localhost:4200/, das heißt, die Adresse dieses Servers sollte http://localhost:4200 lauten , wir müssen nur verwenden Greifen Sie einfach mit Ihrem Browser auf diese Adresse zu: ng serve

Sie können die laufenden Ergebnisse der standardmäßig von Angular CLI generierten Projektseite sehen.

Beachten Sie, dass dieser integrierte Server nur für Entwicklung und Tests geeignet ist und nicht als tatsächlicher Server verwendet werden kann. Wenn wir es also auf einem formellen Server bereitstellen möchten, müssen wir das Projekt in eine Release-Version kompilieren. Das Kompilieren der Release-Version ist ebenfalls sehr einfach. Verwenden Sie einfach einen Befehl:

ng serve

Öffnen Sie nach Abschluss der Kompilierung den Projektordner und Sie sehen ein dist-Verzeichnis. Die darin enthaltenen Dateien sind die Dateien, die zum Ausführen des gesamten Projekts benötigt werden Projekt. Wenn wir die Anwendung bereitstellen, müssen wir nur alle Dateien in diesem Ordner auf dem Server bereitstellen.

Wir beginnen mit der Erstellung des Projekts, über die Entwicklung und das Testen des Projekts und schließlich mit der Paketierung und Bereitstellung des Projekts, wobei wir alle die verschiedenen Funktionen nutzen, die von Angular CLI bereitgestellt werden. Wie Sie sehen, bietet Angular CLI ein One-Stop-Entwicklungsmodell. Wir können Angular CLI verwenden, um Angular-Projekte einfach zu entwickeln. Was wir hier demonstrieren, ist jedoch nur die einfachste Verwendung. Bei der formalen Verwendung können viele zusätzliche Parameter hinzugefügt werden, um die von uns benötigten Dateien und Projekte zu generieren. Für weitere Informationen ist es erforderlich, die Angular-CLI-Dokumentation zu lesen. Wenn wir in späteren Kapiteln auf relevante Inhalte stoßen, werden wir diese erneut vorstellen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Gibt es eine bessere Lösung als die asynchrone Implementierung mit JavaScript?

Verwenden Sie Koa, um Projekte über Node.js zu erstellen

Detaillierte Interpretation des React Native Flexbox-Layouts

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