Tutorial zum Aufbau einer AngularJS-Umgebung

In diesem Artikel wird hauptsächlich der Prozess der Einrichtung der AngularJS-Umgebung vorgestellt. Die Funktionen von Angular-cli werden im Artikel erwähnt. Ich hoffe, dass er Anfängern beim erfolgreichen Aufbau einer AngularJS-Umgebung helfen kann.

Was ist AngularJS?

AngularJS ist ein Open-Source-Webanwendungs-Framework. Es wurde ursprünglich 2009 von MISKO Hevery und Adam Abrons entwickelt. Jetzt von Google verwaltet

AngularJS-Funktionen

AngularJS ist ein leistungsstarkes JavaScript-basiertes Entwicklungsframework zum Erstellen von Rich Internet Applications (RIA).

AngulajJS bietet Entwicklern die Möglichkeit (mit JavaScript), clientseitige Anwendungen auf saubere MVC-Weise (Model-View-Controller) zu schreiben.

In AngularJS geschriebene Anwendungen sind browserübergreifend kompatibel. AngularJS verwendet JavaScript-Code, um die Anpassung an jeden Browser automatisch vorzunehmen.

AngularJS ist Open Source, völlig kostenlos und wird von Tausenden von Entwicklern auf der ganzen Welt entwickelt und gepflegt. Es wird unter der Apache-Lizenz Version 2.0 veröffentlicht.

Insgesamt ist AngularJS ein Framework zum Erstellen umfangreicher, leistungsstarker Webanwendungen, das gleichzeitig eine einfache Wartung ermöglicht.

1. Hier ist eine kurze Einführung in die Funktionen von Angular-cli:

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

Ja Die Funktion von Webpack kann Codetrennung, Laden bei Bedarf usw. realisieren;

konfiguriert automatisch die Entwicklungsumgebung, Testumgebung und Produktionsumgebung und kann Codepaketierung, Komprimierung und Hot-Deployment realisieren , und kann auch Modultests und End-to-End-Tests realisieren

Angular-cli kann die Vorkompilierung von sass und weniger durch Suffixe automatisch identifizieren

Angular-cli kann TypeScript konfigurieren, wenn Erstellen und können auch einige personalisierte Konfigurationen vornehmen. Die mit Angular-CLI erstellte Projektstruktur ist die beste Vorgehensweise und kann in der Produktionsumgebung verwendet werden.

AngularJS muss Nodejs verwenden, daher müssen wir zuerst Nodejs installieren. Die Download-Adresse von Nodejs lautet: https://nodejs.org/en/download/,

3. Installieren Sie npm und cnpm

Der nächste Schritt ist die Installation von npm.

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

Erlauben Sie Benutzern, andere vom NPM-Server herunterzuladen. Schreiben Sie Pakete von Drittanbietern für die lokale 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. Ich habe es hier bereits installiert, Sie können also hineingehen.

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 den Befehl ng verwenden und mit der Erstellung des Projekts beginnen.

4. Projekterstellung

Nach der Installation von angle-cli können Sie den Befehl

ng new JustForTest

an der Stelle erstellen, an der sich JustForTest befindet der Projektname

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

Beginnen Sie direkt mit der Nutzung von ng Serve.

Auf diese Weise können Sie das Projekt direkt starten: http://localhost:4200 und Sie können direkt zugreifen:

5. Importieren Sie das Projekt

Wenn ja, wie starten wir ein Projekt lokal, wenn wir es online finden? 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 demonstriert 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, dass wir zuvor das globale Angular-Cli installiert haben.

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 dienen -prod -aot

Warten Sie dann, bis die Kompilierung abgeschlossen ist.

Nach Abschluss können wir im Browser Folgendes eingeben:

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

Verwandte Empfehlungen:

Detaillierte Tutorials zum Aufbau einer Vue-, Node- und Webpack-Umgebung mit grafischen Beispielen

Ein einfaches Tutorial zum Erstellen einer Vue-Umgebung mit detaillierten Beispielen

Das klarste grafische Tutorial zum Erstellen einer PHP-Serverumgebung

Das obige ist der detaillierte Inhalt vonTutorial zum Aufbau einer AngularJS-Umgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!