Angular CLI - วิธีสร้างโปรเจ็กต์เชิงมุมใหม่ใน Linux
Angular เป็นเฟรมเวิร์กการพัฒนาแอปพลิเคชันส่วนหน้าแบบโอเพ่นซอร์ส ยอดนิยม และขยายได้สูง ใช้ในการสร้างแอปพลิเคชันบนมือถือและเว็บโดยใช้ TypeScript/JavaScript และภาษาทั่วไปอื่นๆ
Angular เป็นคำทั่วไปสำหรับเวอร์ชัน Angular ทั้งหมดที่ตามหลัง AngularJS (หรือ Angular เวอร์ชัน 1.0) รวมถึง Angular 2 และ เชิงมุม 4
เชิงมุมเหมาะอย่างยิ่งสำหรับการสร้างแอปพลิเคชันขนาดเล็กถึงขนาดใหญ่ตั้งแต่เริ่มต้น องค์ประกอบหลักอย่างหนึ่งของแพลตฟอร์ม Angular เพื่อช่วยในการพัฒนาแอปพลิเคชันคือยูทิลิตี Angular CLI ซึ่งเป็นเครื่องมือบรรทัดคำสั่งที่เรียบง่ายและใช้งานง่ายซึ่งใช้ในการสร้าง จัดการ สร้าง และทดสอบแอปพลิเคชัน Angular
ในบทความนี้ เราจะอธิบายวิธีการติดตั้งเครื่องมือบรรทัดคำสั่ง Angular บนระบบ Linux และเรียนรู้ตัวอย่างพื้นฐานของเครื่องมือนี้
การติดตั้ง Node.js ใน Linux
หากต้องการติดตั้ง Angular CLI คุณต้องติดตั้ง Node.js และ NPM เวอร์ชันล่าสุดบนระบบ Linux ของคุณ
ติดตั้ง Node.js บน Ubuntu
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
ติดตั้ง Node.js บน Debian
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs
ติดตั้ง Node.js บน RHEL, CentOS, Fedora, Rocky และ Alma Linux
------------- For Node.js v19.x -------------
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs
นอกจากนี้ หากต้องการคอมไพล์และติดตั้งส่วนเสริมดั้งเดิมจาก NPM คุณอาจต้องติดตั้งเครื่องมือการพัฒนาบนระบบของคุณดังนี้
sudo apt install -y build-essential [On Debian/Ubuntu]
sudo yum install gcc-c++ make [On RHEL Systems]
การติดตั้ง Angular CLI ใน Linux
เมื่อคุณติดตั้ง Node.js และ NPM ดังที่แสดงไว้ด้านบนแล้ว คุณจะสามารถติดตั้ง Angular CLI ได้โดยใช้ ตัวจัดการแพ็คเกจ npm ดังต่อไปนี้ (แฟล็ก -g หมายถึงการติดตั้งเครื่องมือทั้งระบบที่ผู้ใช้ระบบทั้งหมดจะใช้)
npm install -g @angular/cli
OR
sudo npm install -g @angular/cli
คุณสามารถเปิด Angular CLI ได้โดยใช้ไฟล์ปฏิบัติการ ng ซึ่งควรติดตั้งไว้ในระบบของคุณแล้ว เรียกใช้คำสั่งต่อไปนี้เพื่อตรวจสอบเวอร์ชันของ Angular CLI ที่ติดตั้ง
ng version
OR
ng --version
การสร้างโปรเจ็กต์เชิงมุมโดยใช้ Angular CLI
ในส่วนนี้ เราจะแสดงวิธีสร้าง สร้าง และให้บริการโปรเจ็กต์ Angular พื้นฐานใหม่ ขั้นแรก ให้ย้ายไปยังไดเร็กทอรี webroot ของเซิร์ฟเวอร์ของคุณ จากนั้นเริ่มต้นแอปพลิเคชัน Angular ใหม่ดังต่อไปนี้ (อย่าลืมปฏิบัติตามคำแนะนำ):
cd /var/www/html/
ng new tecmint-app #as root
OR
sudo ng new tecmint-app #non-root user
จากนั้น ย้ายไปยังไดเร็กทอรีแอปพลิเคชันที่เพิ่งสร้างขึ้น และให้บริการแอปพลิเคชันดังที่แสดง
cd tecmint-app
ls #list project files
ng serve
ก่อนที่คุณจะสามารถเข้าถึงแอปใหม่จากเว็บเบราว์เซอร์ได้ หากคุณมีบริการไฟร์วอลล์ทำงานอยู่ คุณจะต้องเปิดพอร์ต 4200 ในการกำหนดค่าไฟร์วอลล์ดังที่แสดง
---------- On Firewalld ----------
firewall-cmd --permanent --zone=public --add-port=4200/tcp
firewall-cmd --reload
---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload
ตอนนี้คุณสามารถเปิดเว็บเบราว์เซอร์และนำทางโดยใช้ที่อยู่ต่อไปนี้เพื่อดูแอปใหม่ทำงานตามที่แสดงในภาพหน้าจอต่อไปนี้
http://localhost:4200/
or
http://SERVER_IP:4200
หมายเหตุ: หากคุณใช้คำสั่ง ng ให้บริการเพื่อสร้างแอปพลิเคชันและให้บริการภายในเครื่อง ดังที่แสดงไว้ด้านบน เซิร์ฟเวอร์จะสร้างแอปใหม่โดยอัตโนมัติ และโหลดหน้าเว็บซ้ำเมื่อคุณเปลี่ยนแปลงไฟล์ต้นฉบับใดๆ
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ เครื่องมือ ng ให้เรียกใช้คำสั่งต่อไปนี้
ng help
หน้าแรกของ Angular CLI: https://angular.io/cli
ในบทความนี้ เราได้แสดงวิธีการติดตั้ง Angular CLI บน Linux รุ่นต่างๆ นอกจากนี้เรายังกล่าวถึงวิธีการสร้าง คอมไพล์ และให้บริการแอปพลิเคชัน Angular พื้นฐานบนเซิร์ฟเวอร์การพัฒนาอีกด้วย หากมีข้อสงสัยหรือความคิดใดๆ ที่คุณต้องการแบ่งปันกับเรา โปรดใช้แบบฟอร์มคำติชมด้านล่าง