Wie richte ich eine Entwicklungsumgebung für AngularJS ein? Analyse des Prozesses zum Aufbau einer Entwicklungsumgebung mit AngularJS

In diesem Artikel geht es hauptsächlich um den Aufbau einer Entwicklungsumgebung für AngularJS. Hier wird der Prozess zum Aufbau der AngularJS-Entwicklungsumgebung beschrieben. Wenn Sie nicht sehen möchten, was Sie sehen möchten, beginnen wir gemeinsam mit dem Lesen dieses Artikels

1. Lassen Sie uns zunächst kurz die Funktionen von Angular-cli vorstellen:

Angular-cli kann schnell ein Framework erstellen und Module, Dienste, Klassen, Anweisungen usw. erstellen.

verfügt über die Funktion eines Webpacks, das Codetrennung, Laden bei Bedarf usw. realisieren kann 🎜>

konfiguriert automatisch die Entwicklungsumgebung, Testumgebung und Produktionsumgebung können Codepaketierung, Komprimierung und Hot-Deployment sowie Modultests und End-to-End-Tests realisieren

Angular-cli kann automatisch identifizieren die Vorkompilierung von sass und weniger durch das Suffix;

Angular-cli kann TypeScript während der Erstellung konfigurieren und auch einige personalisierte Konfigurationen vornehmen

Die durch Angular-cli erstellte Projektstruktur ist eine Best Practice und kann in Produktionsumgebungen verwendet werden; 2. Beginnen Sie nun mit der Installation von NodeJS:

AngularJS muss NodeJS verwenden, daher müssen wir zuerst NodeJS installieren. Wir müssen nodejs verwenden. Die Download-Adresse von nodejs lautet: https://nodejs.org/en/download/ (Wenn Sie mehr sehen möchten, gehen Sie zur Spalte „PHP Chinese Reference Manual“ )

3. npm und cnpm müssen hier installiert werden

Der nächste Schritt ist die Installation von npm

NPM ist ein Paketverwaltungstool, das mit installiert wird mit NodeJS. Es kann viele Probleme bei der Bereitstellung von NodeJS-Code lösen:

Ermöglicht Benutzern das Herunterladen von von anderen geschriebenen Paketen vom NPM-Server zur lokalen Verwendung.

Ermöglicht Benutzern das Herunterladen und Installieren von von anderen geschriebenen Befehlszeilenprogrammen vom NPM-Server zur lokalen Verwendung.

Ermöglicht Benutzern das Hochladen von Paketen oder Befehlszeilenprogrammen, die sie schreiben, auf den NPM-Server, damit andere sie verwenden können.

Die Installation von nodejs und npm ist hier abgeschlossen, es treten jedoch einige Probleme auf, wenn Sie npm zur Installation in Datianchao verwenden. Daher verwenden wir zur Installation cnpm, bei dem es sich ebenfalls um ein Paket von npm handelt.

Installieren Sie cnpm und führen Sie den Befehl aus: npm i -g cnpm

Warten Sie nach der Ausführung dieses Befehls auf den Abschluss und geben Sie dann die cnpm-Version ein, um zu überprüfen, ob die Installation abgeschlossen ist hier, damit du hineingehen kannst.

Nach der Installation von cnpm beginnen wir mit der Installation von Angular-cli.

Führen Sie den Befehl aus: cnpm i -g angle-cli

Anschließend können Sie den Befehl ng version ausführen, um zu überprüfen, ob die Installation abgeschlossen ist und die Version von angle-cli

Nachdem die Installation abgeschlossen ist, können wir mit dem Befehl ng mit der Erstellung des Projekts beginnen.

4. Erstellen Sie nun das Projekt:

Nach der Installation von angle-cli können Sie den Befehl „ng new JustForTest“ direkt erstellen > Darunter ist JustForTest der Projektname

Durch die Ausführung dieses Befehls werden viele Dateien erstellt, und Sie müssen warten. Dieser Schritt wird lange dauern und Sie müssen bis zur Installation von nod_ warten. Module sind abgeschlossen

Beginnen Sie direkt mit der Nutzung von ng Serve.

Auf diese Weise können Sie das Projekt direkt starten. Wir geben im Browser ein: http://localhost:4200 und Sie können direkt darauf zugreifen:

Das Projekt ist wird gerade importiert

Wenn wir online nach einem Projekt suchen, wie starten wir es lokal? Machen wir es im Detail:

Ich empfehle jedem, sich dieses Tutorial von Teacher Da Mo anzusehen: Angular2.0-Video-Tutorial ist hier

Für die Demonstration verwenden wir hier auch ein Projekt von Lehrer Da Mo: NiceFish, zuerst müssen wir das Projekt über Git klonen, was hier nicht gezeigt wird. Dies ist die Projektadresse von NiceFish: http://git.oschina.net/mumu-osc/NiceFish

Nachdem das Projekt geklont wurde, gibt die Befehlszeile das Verzeichnis ein, in dem sich das Projekt befindet.

Führen Sie den Befehl aus: cnpm i -g @angular/cli

Lassen Sie mich hier erklären, wir haben zuvor das globale Angular-Cli installiert.

Warten Sie, bis die Befehlsausführung abgeschlossen ist, und führen Sie dann den Befehl aus: cnpm install

Führen Sie dann den Befehl aus: ng servo -prod -aot

Dann warten Sie die Zusammenstellung abzuschließen.

Nach Abschluss können wir im Browser Folgendes eingeben:

http://localhost:4200, um auf das Projekt zuzugreifen.

Dann gibt es nichts mehr über den Konstruktions- und Entwicklungsprozess von AngularJS (wenn Sie mehr über AngularJS erfahren möchten, besuchen Sie die chinesische PHP-Website AngularJS Learning Manual

). Spaltenlernen). Wenn Sie Fragen haben, können Sie diese unten stellen.

[Empfehlung des Herausgebers]

Wie entwickle ich Webanwendungen mit AngularJS? Beispiele für die Entwicklung von Webanwendungen mit AngularJS

Kennen Sie das Routing-Prinzip von AngularJS? Hier sind die detaillierten Prinzipien des AngularJS-Routings

Das obige ist der detaillierte Inhalt vonWie richte ich eine Entwicklungsumgebung für AngularJS ein? Analyse des Prozesses zum Aufbau einer Entwicklungsumgebung mit AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!