Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der Schritte zum Aufbau einer AngularJS-Umgebung

Detaillierte Erläuterung der Schritte zum Aufbau einer AngularJS-Umgebung

php中世界最好的语言
Freigeben: 2018-04-16 14:06:07
Original
1387 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zum Aufbau der AngularJS-Umgebung ausführlich erläutern. Was sind die Vorsichtsmaßnahmen beim Aufbau der AngularJS-Umgebung?

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

AngularJSFunktionen

AngularJS ist ein leistungsstarkes Entwicklungsframework auf Basis von JavaScript zur Erstellung von Rich Internet Applications (RIA).

AngulajJS bietet Entwicklern die Möglichkeit (JavaScript verwenden), clientseitige Anwendungen auf saubere MVC-Methode (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 handelt es sich bei AngularJS um ein Framework zum Erstellen umfangreicher, leistungsstarker Webanwendungen bei gleichzeitiger einfacher Wartung.

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 Es verfügt über die Funktion eines Webpacks, das Codetrennung, Laden bei Bedarf usw. realisieren kann Automatische

Konfiguration der Entwicklungsumgebung

, Testumgebung und Produktionsumgebung, die Codepaketierung, Komprimierung und Hot-Deployment sowie Modultests und End-to-End-Tests realisieren kann

Angular-cli kann die Vorkompilierung von sass und less anhand des Suffixes automatisch identifizieren Angular-cli kann TypeScript beim Erstellen konfigurieren und auch einige personalisierte Konfigurationen vornehmen; Die mit Angular-cli erstellte Engineering-Struktur ist eine bewährte Methode und kann in Produktionsumgebungen verwendet werden

2. Installieren Sie nodejs

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

3. Installieren Sie npm und cnpm

Der nächste Schritt besteht darin, npm zu installieren,

NPM ist ein Paketverwaltungstool, das zusammen mit NodeJS installiert wird. Es kann viele Probleme bei der NodeJS-Codebereitstellung lösen: Ermöglichen Sie Benutzern, von anderen geschriebene Drittanbieterpakete vom NPM-Server zur lokalen Verwendung herunterzuladen. 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. Wenn Sie NPM zur Installation in Datianchao verwenden, treten jedoch einige Probleme auf. Daher verwenden wir zur Installation CnPM, bei dem es sich ebenfalls um ein NPM-Paket handelt.

Installieren Sie cnpm und führen Sie den Befehl

aus

Warten Sie nach der Ausführung dieses Befehls, bis er abgeschlossen ist, und geben Sie dann die cnpm-Version ein, um zu überprüfen, ob die Installation hier bereits abgeschlossen ist, damit ich hineingehen kann.

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

Befehl

npm i -g cnpm ausführen

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.

cnpm i -g angular-cli

4. Projekterstellung

Nach der Installation von angle-cli können Sie das Projekt direkt erstellen und den Befehl

ausführen Wobei JustForTest der Projektname ist

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 Verwendung von ng Serve.

Auf diese Weise können Sie das Projekt direkt starten. Wir geben: http://localhost:4200 in den Browser ein, um direkt darauf zuzugreifen:

5. Importieren des Projekts

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

Ich empfehle jedem, sich dieses Tutorial von Lehrer Da Mo anzusehen: Das Angular2.0-Video-Tutorial finden Sie hier

Hier verwenden wir auch ein Projekt von Teacher Da Mo: NiceFish. Zuerst müssen wir das Projekt über Git klonen. Dies ist die Projektadresse von NiceFish -osc/NiceFish

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

Befehl

ausführen 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 serve -prod -aot

Warten Sie dann, bis die Kompilierung abgeschlossen ist.

Sobald wir fertig sind, können wir im Browser Folgendes eingeben:

http://localhost:4200 Greifen Sie auf das Projekt zu.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:



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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage