So erstellen Sie einen Localhost-Server zum Ausführen eines AngularJS-Projekts

Ich habe Xampp und JetBrain WebStorm verwendet, um ein AngularJS-Projekt auszuführen. Aber es ist kompliziert und von geringer Leistung. Gibt es eine andere Möglichkeit, ein AngularJS-Projekt auszuführen?

Wenn Sie node.js http-Server ausführen, ist super einfach.

cd in Ihren Projektordner und

npx http-server -o 

# or, install it separately so you don't need npx
npm install -g http-server
http-server -o 

-oist es, den Browser für die Seite zu öffnen. Führen Sie http-server --helpdiese Option aus, um andere Optionen anzuzeigen, z. B. das Ändern der Portnummer

Nicht haben node?

diese anderen Einzeiler könnte einfacher sein , wenn Sie nicht haben node/ npminstalliert.

Beispielsweise ist Python auf den meisten Systemen vorinstalliert, sodass die folgenden Python-Server von John Doe schneller sind.

MacOS wird mit Ruby installiert. Dies ist eine weitere einfache Option, wenn Sie einen Mac verwenden: ruby -run -ehttpd . -p8000und öffnen Sie Ihren Browser für http://localhost:8000.

Python verfügt über einen integrierten Befehl speziell zum Hochfahren eines Webservers:

Python3.x:

python -m http.server 8000

Andere Versionen:

python -m SimpleHTTPServer 8000

Würde einen Webserver auf Port 8000 starten

(Python ist eine Voraussetzung dafür. Wenn Sie Python nicht installiert haben, sind die anderen Antworten möglicherweise einfacher.)

Sie können beginnen, indem Sie Node.js vom Terminal oder cmd installieren:

apt-get install nodejs-legacy npm

Installieren Sie dann die Abhängigkeiten:

npm install

Starten Sie dann den Server:

npm start

cd <your project folder>(wo sich der bereitstellbare Code Ihres AngularJs befindet)

sudo npm install serve -g

Dienen

Sie können Ihre Seite unter treffen

localhost: 3000 oder IP-Adresse: 3000

Ich benutze:

• ausdrücken und
• Morgan
  
  

Installieren Sie Node.js. und npm. npm wird mit Node.js installiert

Wird im Stammprojektverzeichnis abgelegt

$ cd <your_angularjs_project>

Der nächste Befehl erstellt package.json

$ npm init

Installieren Sie express ==> Schnell, unbefangen, minimalistisch für Knoten:

$ npm install express --save

Installieren Sie morgan ==> HTTP Request Logger Middleware für node.js.

$ npm install morgan --save

Erstellen Sie die Datei server.js.

Fügen Sie den folgenden Code in die Datei server.js ein

// Required Modules
var express    = require("express");
var morgan     = require("morgan");
var app        = express();

var port = process.env.PORT || 3002;

app.use(morgan("dev"));
app.use(express.static("./"));

app.get("/", function(req, res) {
    res.sendFile("./index.html"); //index.html file of your angularjs application
});

// Start Server
app.listen(port, function () {
    console.log( "Express server listening on port " + port);
});

Führen Sie schließlich Ihr AngularJS-Projekt auf dem localhost-Server aus:

$ node server.js

Verwenden Sie das npm-Paket für den lokalen Webserver.

https://www.npmjs.com/package/local-web-server

$ npm install -g local-web-server
$ cd <your-app-folder>
$ ws

Sie können auch laufen

$ ws -p 8181

-p definiert den Port, den Sie verwenden möchten

Gehen Sie danach einfach zu Ihrem Browser und greifen Sie auf http: localhost: 8181 / zu

• Lauf

ng dienen

Dieser Befehl wird in Ihrem Terminal nach dem Speicherort im Projektordner wie ausgeführt ~/my-app$

• Führen Sie dann den Befehl aus - er zeigt an, dass der URl NG Live Development Server abhört localhost:4200

• Öffnen Sie Ihren Browser unter http: // localhost: 4200

Eine Winkelanwendung kann über einen beliebigen Webserver auf localhost bereitgestellt werden. In den folgenden Optionen werden die Bereitstellungsanweisungen für mehrere mögliche Webserver-Bereitstellungen in Abhängigkeit von Ihren Bereitstellungsanforderungen beschrieben.

Microsoft Internet Information Services (IIS)

1. Windows IIS muss aktiviert sein

   1.1. Greifen Sie unter Windows auf die Systemsteuerung zu und klicken Sie auf Software.

   1.2. Klicken Sie im Fenster Software auf Windows-Komponenten hinzufügen / entfernen.

   1.3. Aktivieren Sie das Kontrollkästchen Internetinformationsdienste (IIS), klicken Sie auf Weiter und dann auf Fertig stellen.

   1.4. Kopieren Sie die Angular Application Zip-Datei und extrahieren Sie sie in das Webserver-Stammverzeichnis: C: \ inetpub \ wwwroot

2. Auf die Angular-Anwendung kann jetzt über die folgende URL zugegriffen werden: http: // localhost: 8080

NPMs Lightweight Web Server

1. Installieren eines leichten Webservers 1.1. Laden Sie npm herunter und installieren Sie es unter: https://www.npmjs.com/get-npm 1.2. Sobald npm installiert wurde, öffnen Sie eine Eingabeaufforderung und geben Sie Folgendes ein: npm install -g http-server 1.3. Extrahieren Sie die Angular Zip-Datei
2. Öffnen Sie zum Ausführen des Webservers eine Eingabeaufforderung und navigieren Sie zu dem Verzeichnis, in das Sie zuvor den Winkel extrahiert haben, und geben Sie Folgendes ein: http-server
3. Auf die Angular Application-Anwendung kann jetzt über die folgende URL zugegriffen werden: http: // localhost: 8080

Apache Tomcat Webserver

1. Installieren von Apache Tomcat Version 8 1.1. Laden Sie Apache Tomcat herunter und installieren Sie es von: https://tomcat.apache.org/ 1.2. Kopieren Sie die ZIP-Datei von Angular Application und extrahieren Sie sie in das Webserver-Stammverzeichnis C: \ Programme \ Apache Software Foundation \ Tomcat 7.0 \ webapps
2. Auf die Angular-Anwendung kann jetzt über die folgende URL zugegriffen werden: http: // localhost: 8080

"Vorausgesetzt, Sie haben nodejs installiert", ist

mini-http ein ziemlich einfaches Befehlszeilentool zum Erstellen eines http-Servers.
Installieren Sie das Paket global npm install mini-http -g
und verwenden Sie dann Ihr cmd (Terminal), das mini-http -p=3000in Ihrem Projektverzeichnis ausgeführt wird. Und boom! Sie haben einen Server auf Port 3000 erstellt. Überprüfen Sie nun http: // localhost: 3000

Hinweis: Die Angabe eines Ports ist nicht erforderlich. Sie können den Server einfach ausführen mini-httpoder mhstarten

Wenn Sie ein Java-Typ sind, legen Sie Ihren eckigen Ordner einfach im Webinhaltsordner Ihrer Webanwendung ab und stellen Sie ihn auf Ihrem Tomcat-Server bereit. Super einfach!

Angenommen, Sie haben bereits node.js installiert, können Sie die Browsersynchronisierung für synchronisierte Browsertests verwenden.

Wenn Sie Visual Studio Community oder eine andere Edition für Ihr Winkelprojekt verwendet haben, gehen Sie zuerst zum Projektordner

C: \ Projektordner> npm install -g http-server Sie sehen Folgendes: + [email protected] hat in 4.213s 25 Pakete hinzugefügt

Geben Sie dann C: \ Projektordner> http-server –o ein

Sie werden sehen, dass Ihre Anwendung automatisch unter http://127.0.0.1:8080/ aufgerufen wird.

Sie können die Umgebung auch in Visual Studio-Code einrichten. Führen Sie Strg + Umschalt + P aus. Geben Sie dann Strg in das angezeigte Feld ein und wählen Sie Aufgaben aus: Konfigurieren Sie den Task-Runner. Ändern Sie dann die Datei task.json in Folgendes: { "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["index.html"] }Speichern Sie Ihre Änderungen. Wählen Sie dann Ihre Datei index.html aus und geben Sie Strg + Umschalt ein + B. Dadurch wird das Projekt mit Ihrem Standardbrowser geöffnet.