ในบทความหน้าเราจะมาดู Angular CLI ในกรณีที่คุณยังไม่ทราบ Angular เป็นกรอบการพัฒนาแอปพลิเคชันส่วนหน้าแบบโอเพนซอร์สได้รับความนิยมและสามารถขยายได้สูง สามารถใช้เพื่อสร้างแอปพลิเคชันมือถือและเว็บโดยใช้ TypeScript, JavaScript และภาษาทั่วไปอื่น ๆ Angular เป็นคำที่ครอบคลุมสำหรับ Angular ทุกเวอร์ชันที่มาหลังจาก AngularJS
กรอบการพัฒนานี้เหมาะอย่างยิ่งสำหรับการสร้างแอปพลิเคชันตั้งแต่เริ่มต้นตั้งแต่ขนาดเล็กไปจนถึงขนาดใหญ่ หนึ่งในองค์ประกอบหลักของแพลตฟอร์ม Angular เพื่อช่วยในการพัฒนาแอปพลิเคชันคือยูทิลิตี้ Angular CLI เป็นเครื่องมือบรรทัดคำสั่งที่ใช้งานง่าย ใช้เพื่อสร้างจัดการสร้างและทดสอบแอปพลิเคชันที่สร้างด้วย Angular
ในบรรทัดต่อไปนี้เราจะมาดูว่าเราทำได้อย่างไร ติดตั้งเครื่องมือบรรทัดคำสั่งเชิงมุมบนระบบ Ubuntu 19.04 ของเรา. นอกจากนี้เรายังจะเห็นตัวอย่างพื้นฐานของเครื่องมือนี้
การติดตั้ง Node.js บน Ubuntu
ในการติดตั้ง Angular CLI จำเป็นที่เราจะต้องติดตั้ง Node.js และ NPM เวอร์ชันปัจจุบันในระบบของเรา. ในการทำเช่นนี้เราต้องเปิดเทอร์มินัล (Ctrl + Alt + T) แล้วเขียนลงไป:
sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install -y nodejs
นอกจากนี้ในการรวบรวมและติดตั้งปลั๊กอิน NPM ดั้งเดิม เราอาจต้องติดตั้งเครื่องมือสำหรับนักพัฒนาในระบบของเรา. ในการทำเช่นนั้นในเทอร์มินัลเดียวกันเราจะทำสิ่งต่อไปนี้:
sudo apt install -y build-essential
การติดตั้ง Angular CLI บน Ubuntu 19.04
หลังจากการติดตั้ง Node.js และ NPM ตามที่เราเห็นเราจะสามารถทำได้ ติดตั้ง Angular CLI โดยใช้ npm package manager ดังต่อไปนี้. ในกรณีนี้ตัวเลือก -g หมายความว่าเรากำลังจะติดตั้งเครื่องมือทั่วทั้งระบบเพื่อให้ผู้ใช้ทุกคนใช้งานได้
sudo npm install -g @angular/cli
หลังจากการติดตั้งเราสามารถทำได้ เริ่ม Angular CLI โดยใช้ปฏิบัติการ ng ซึ่งตอนนี้ควรจะติดตั้งในระบบของเรา ดำเนินการคำสั่งต่อไปนี้ในเทอร์มินัล (Ctrl + Alt + T) เพื่อตรวจสอบเวอร์ชันของ Angular CLI ที่ติดตั้ง:
ng --version
การสร้างโครงการโดยใช้ Angular CLI
ตอนนี้เรามาดูกันว่าเราจะสร้างสร้างและให้บริการโครงการ Angular พื้นฐานใหม่ได้อย่างไร ประการแรก เราจะไปที่ไดเรกทอรีเว็บรูท จากเซิร์ฟเวอร์ของเรา. จากนั้นเราจะสร้างแอปพลิเคชั่น Angular ใหม่ดังนี้:
cd /var/www/html/ sudo ng new ubunlog-app
เราจะต้องตัดสินใจว่าเราต้องการแบ่งปันข้อมูลที่ไม่ระบุตัวตนให้กับทีม Angular หรือไม่ เรายังคงไปที่ไดเร็กทอรีของแอปพลิเคชันที่เราเพิ่งสร้างขึ้น พวกเรากำลังจะไป เริ่มให้บริการแอป ดังที่แสดงไว้ดังต่อไปนี้:
cd ubunlog-app ng serve
คำสั่งก่อนหน้านี้จะทำให้เราอยู่บนหน้าจอ ลิงค์ที่จะบอกเราว่าเราสามารถดูแอปพลิเคชันของเราในการทำงานได้อย่างไร.
ก่อนที่เราจะเข้าถึงได้จากเว็บเบราว์เซอร์ ในกรณีที่มีบริการไฟร์วอลล์ทำงานอยู่เราต้องเปิดพอร์ต 4200 ในการกำหนดค่าดังที่แสดงด้านล่าง:
sudo ufw allow 4200/tcp sudo ufw reload
หลังจากนี้เราสามารถเปิดเว็บเบราว์เซอร์ที่เราชื่นชอบและนำทางโดยใช้ URL ที่เทอร์มินัลให้มา ดูการเรียกใช้แอปพลิเคชันใหม่ดังที่แสดงในภาพหน้าจอต่อไปนี้
http://localhost:4200/
เรายังสามารถใช้ URL อื่นนี้เพื่อเข้าถึงแอปพลิเคชันของเรา:
http://IP_SERVIDOR:4200
ควรกล่าวถึงว่าถ้าเราใช้คำสั่ง "ng ให้บริการ” ในการสร้างแอปพลิเคชันและให้บริการในพื้นที่อย่างที่เราเห็น เซิร์ฟเวอร์จะสร้างแอปพลิเคชันใหม่โดยอัตโนมัติและโหลดหน้าเว็บใหม่เมื่อเราเปลี่ยนไฟล์ต้นฉบับใด ๆ.
ถ้าเราอยากได้ ข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือ ngเราสามารถเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล (Ctrl + Alt + T):
ng help
ในบทความนี้เราได้เห็นวิธีการใช้งานไฟล์ การติดตั้ง Angular CLI บนระบบ Ubuntu ของเราอย่างง่ายนอกเหนือจากการสร้างรวบรวมและให้บริการแอปพลิเคชันพื้นฐานบนเซิร์ฟเวอร์การพัฒนา
นี่เป็นเพียงขั้นตอนแรกพื้นฐานที่สุดที่สามารถทำได้กับ Angular CLI สำหรับ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Angular CLIเราสามารถปรึกษา เว็บไซต์อย่างเป็นทางการของโครงการ.