วิธีสร้างเซิร์ฟเวอร์ localhost เพื่อรันโปรเจ็กต์ AngularJS

ฉันใช้ Xampp และ JetBrain WebStorm เพื่อรันโครงการ AngularJS แต่มันซับซ้อนและประสิทธิภาพต่ำมีวิธีอื่นในการเรียกใช้โครงการ AngularJS หรือไม่?

หากคุณใช้งานเซิร์ฟเวอร์ http ของ node.js นั้นง่ายมาก

cd ลงในโฟลเดอร์โครงการของคุณและ

npx http-server -o 

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

-oคือการเปิดเบราว์เซอร์ไปที่หน้า เรียกใช้http-server --helpเพื่อดูตัวเลือกอื่น ๆ เช่นการเปลี่ยนหมายเลขพอร์ต

ไม่มีnode?

one-liners อื่น ๆ เหล่านี้อาจจะง่ายกว่าถ้าคุณไม่มีnode/ npmติดตั้ง

ตัวอย่างเช่น python ติดตั้งไว้ล่วงหน้าในระบบส่วนใหญ่ดังนั้นเซิร์ฟเวอร์ python ของ John Doeด้านล่างจะเร็วกว่า

MacOS มาติดตั้งกับทับทิมดังนั้นนี้เป็นอีกตัวเลือกที่ง่ายถ้าคุณใช้ Mac: และเปิดเบราว์เซอร์ของคุณเพื่อruby -run -ehttpd . -p8000http://localhost:8000

Python มีคำสั่งในตัวสำหรับการปั่นเว็บเซิร์ฟเวอร์โดยเฉพาะ:

Python3.x:

python -m http.server 8000

เวอร์ชันอื่น ๆ :

python -m SimpleHTTPServer 8000

จะเริ่มเว็บเซิร์ฟเวอร์บนพอร์ต 8000

(Python เป็นข้อกำหนดเบื้องต้นสำหรับสิ่งนี้หากคุณไม่ได้ติดตั้ง python คำตอบอื่น ๆ อาจจะง่ายกว่า)

คุณสามารถเริ่มต้นด้วยการติดตั้ง Node.js จากเทอร์มินัลหรือ cmd:

apt-get install nodejs-legacy npm

จากนั้นติดตั้งการอ้างอิง:

npm install

จากนั้นเริ่มเซิร์ฟเวอร์:

npm start

cd <your project folder>(ซึ่งมีโค้ดที่สามารถปรับใช้ได้ของ angularjs ของคุณ)

sudo npm ติดตั้งให้บริการ -g

ให้บริการ

คุณสามารถเข้าชมเพจของคุณได้ที่

localhost: 3000 หรือที่อยู่ IP: 3000

ฉันใช้:

• ด่วนและ
• มอร์แกน
  
  

ติดตั้ง Node.js. และ npm npm ถูกติดตั้งด้วย Node.js

วางไว้ในไดเร็กทอรีโปรเจ็กต์รูท

$ cd <your_angularjs_project>

คำสั่งถัดไปสร้าง package.json

$ npm init

ติดตั้งด่วน ==> รวดเร็วไม่เปิดใช้งานเรียบง่ายสำหรับโหนด:

$ npm install express --save

ติดตั้ง morgan ==> มิดเดิลแวร์ตัวบันทึกคำขอ HTTP สำหรับ node.js

$ npm install morgan --save

สร้างไฟล์ server.js

เพิ่มรหัสต่อไปนี้ในไฟล์ server.js

// 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);
});

สุดท้ายรันโครงการ AngularJS ของคุณในเซิร์ฟเวอร์ localhost:

$ node server.js

ใช้แพ็กเกจ npm ภายในเว็บเซิร์ฟเวอร์

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

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

นอกจากนี้คุณสามารถเรียกใช้

$ ws -p 8181

-p กำหนดพอร์ตที่คุณต้องการใช้

หลังจากนั้นเพียงไปที่เบราว์เซอร์ของคุณและเข้าถึง http: localhost: 8181 /

• วิ่ง

ng ให้บริการ

คำสั่งนี้ทำงานในเทอร์มินัลของคุณหลังจากตำแหน่งโฟลเดอร์ในโครงการของคุณเช่น ~/my-app$

• จากนั้นเรียกใช้คำสั่ง - มันจะแสดงเซิร์ฟเวอร์การพัฒนา URl NG Live กำลังฟังอยู่ localhost:4200

• เปิดเบราว์เซอร์ของคุณบนhttp: // localhost: 4200

แอปพลิเคชันเชิงมุมสามารถปรับใช้โดยใช้เว็บเซิร์ฟเวอร์ใดก็ได้บน localhost ตัวเลือกด้านล่างสรุปคำแนะนำในการปรับใช้สำหรับการปรับใช้เว็บเซิร์ฟเวอร์ที่เป็นไปได้หลายอย่างขึ้นอยู่กับข้อกำหนดในการปรับใช้ของคุณ

Microsofts Internet Information Services (IIS)

1. ต้องเปิดใช้งาน Windows IIS

   1.1. ใน Windows ให้เข้าไปที่ Control Panel แล้วคลิก Add or Remove Programs

   1.2. ในหน้าต่าง Add or Remove Programs คลิก Add / Remove Windows Components

   1.3. เลือกกล่องกาเครื่องหมาย Internet Information Services (IIS) คลิกถัดไปจากนั้นคลิกเสร็จสิ้น

   1.4. คัดลอกและแตกไฟล์ Angular Application Zip ไปยังไดเร็กทอรีรากของเว็บเซิร์ฟเวอร์: C: \ inetpub \ wwwroot

2. ขณะนี้แอปพลิเคชัน Angular สามารถเข้าถึงได้โดยใช้ URL ต่อไปนี้: http: // localhost: 8080

NPMs Lightweight Web Server

1. การติดตั้งเว็บเซิร์ฟเวอร์ที่มีน้ำหนักเบา 1.1 ดาวน์โหลดและติดตั้ง npm จาก: https://www.npmjs.com/get-npm 1.2 เมื่อติดตั้ง npm แล้วให้เปิดพรอมต์คำสั่งและพิมพ์: npm install -g http-server 1.3 แตกไฟล์ Angular Zip
2. ในการเรียกใช้เว็บเซิร์ฟเวอร์ให้เปิดพรอมต์คำสั่งและไปที่ไดเร็กทอรีที่คุณแตก Angular ไว้ก่อนหน้านี้และพิมพ์: http-server
3. ขณะนี้แอปพลิเคชัน Angular Application สามารถเข้าถึงได้โดยใช้ URL ต่อไปนี้: http: // localhost: 8080

Apache Tomcat เว็บเซิร์ฟเวอร์

1. การติดตั้ง Apache Tomcat เวอร์ชัน 8 1.1 ดาวน์โหลดและติดตั้ง Apache Tomcat จาก: https://tomcat.apache.org/ 1.2 คัดลอกและแตกไฟล์ Angular Application Zip ไปยังไดเร็กทอรี root ของเว็บเซิร์ฟเวอร์ C: \ Program Files \ Apache Software Foundation \ Tomcat 7.0 \ webapps
2. ขณะนี้แอปพลิเคชันเชิงมุมสามารถเข้าถึงได้โดยใช้ URL ต่อไปนี้: http: // localhost: 8080

"สมมติว่าคุณติดตั้ง nodejs ไว้แล้ว"

mini-httpเป็นเครื่องมือบรรทัดคำสั่งที่ใช้งานง่ายในการสร้างเซิร์ฟเวอร์ http
ติดตั้งแพ็คเกจทั่วโลก npm install mini-http -g
จากนั้นใช้ cmd (เทอร์มินัล) mini-http -p=3000ของคุณทำงานในไดเร็กทอรีโปรเจ็กต์ของคุณและบูม! คุณสร้างเซิร์ฟเวอร์บนพอร์ต 3000 แล้วไปที่http: // localhost: 3000

หมายเหตุ: การระบุพอร์ตไม่จำเป็นต้องใช้คุณสามารถรันmini-httpหรือmhเริ่มเซิร์ฟเวอร์ได้

หากคุณเป็นคนที่ชอบ Java ให้วางโฟลเดอร์เชิงมุมของคุณไว้ในโฟลเดอร์เนื้อหาเว็บของเว็บแอปพลิเคชันของคุณและปรับใช้กับเซิร์ฟเวอร์ Tomcat ของคุณ ง่ายสุด!

สมมติว่าคุณติดตั้ง node.js แล้วคุณสามารถใช้การซิงค์เบราว์เซอร์สำหรับการทดสอบเบราว์เซอร์ที่ซิงโครไนซ์ได้

หากคุณเคยใช้ Visual Studio Community หรือรุ่นอื่น ๆ สำหรับโครงการเชิงมุมของคุณให้ไปที่โฟลเดอร์โครงการประเภทแรก

C: \ Project Folder> npm install -g http-server คุณจะเห็นดังต่อไปนี้: + http-server@0.11.1 เพิ่ม 25 แพ็คเกจใน 4.213s

จากนั้นพิมพ์ C: \ Project Folder> http-server –o

คุณจะเห็นว่าแอปพลิเคชันของคุณปรากฏขึ้นโดยอัตโนมัติที่http://127.0.0.1:8080/

คุณยังสามารถตั้งค่าสภาพแวดล้อมในรหัส Visual Studio เรียกใช้ Ctrl + Shift + P จากนั้นพิมพ์ ctr ในช่องที่ปรากฏขึ้นและเลือกงาน: กำหนดค่า Task Runner จากนั้นเปลี่ยนไฟล์ task.json เป็น{ "version": "0.1.0", "command": "explorer", "windows": { "command": "explorer.exe" }, "args": ["index.html"] }บันทึกการเปลี่ยนแปลงของคุณจากนั้นเลือกไฟล์ index.html ของคุณแล้วพิมพ์ Ctrl + Shift + B. สิ่งนี้จะเปิดโครงการด้วยเบราว์เซอร์เริ่มต้นของคุณ