การวิเคราะห์โดยย่อเกี่ยวกับวิธีพัฒนา Angular ใน IDEA

ในบทความก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับสภาพแวดล้อมที่ต้องเตรียมสำหรับการพัฒนาเชิงมุม หลังจากที่เราตั้งค่าสภาพแวดล้อมแล้ว เป็นไปไม่ได้เลยที่จะใช้เครื่องมือข้อความสำหรับการเขียนโปรแกรมโดยตรง เราต้องเลือก IDE และ IDE ที่ดีก็สามารถสร้างของเราได้ การพัฒนามีประสิทธิภาพมากขึ้นโดยใช้ความพยายามเพียงครึ่งเดียว ฉันเลือก JetBrains IDEA เนื่องจากงานของฉันมีบรรณาธิการหลายคน IDEA จึงเป็น IDE ที่ดีกว่าที่รองรับการพัฒนาเชิงมุม

โปรเจ็กต์ใหม่

File => New => Project => JavaScript => Angular CLI

หลังจากเลือกขั้นตอนต่อไปแล้ว เราก็สามารถกำหนดค่าโปรเจ็กต์ของเราในนั้นได้ หากคุณติดตามฉันตั้งแต่ต้นจนถึงขั้นตอนนี้ คุณจะพบว่า IDEA ได้กำหนดค่าทั้ง Node Interpreter และ Angular CLI โดยอัตโนมัติ เราเพียงแค่ตั้งชื่อโปรเจ็กต์ของเราเท่านั้น [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

หลังจากคลิกเสร็จสิ้น ให้รอให้บิลด์เสร็จสมบูรณ์ เมื่อคอนโซลส่งออกเนื้อหาต่อไปนี้ แสดงว่า

ไฟล์นั้นมีการลงท้ายด้วยบรรทัดเดิมในไดเร็กทอรีการทำงานของคุณ
    เริ่มต้น git สำเร็จแล้ว
เสร็จสิ้น

รันโปรเจ็กต์ใน IDEA

1. แสดงสคริปต์ npm

ค้นหาไฟล์ pachage.json ในไดเรกทอรีรากของโปรเจ็กต์ คลิกขวาและเลือก แสดงสคริปต์ npm จากนั้นหน้าต่างใหม่จะปรากฏขึ้น

ในหน้าต่างนี้มีคำสั่งที่ใช้กันทั่วไป คำสั่ง start เทียบเท่ากับคำสั่ง ng server และโปรเจ็กต์จะเริ่มคอมไพล์และเริ่มต้นหลังจากการเริ่มต้นเสร็จสมบูรณ์ คอนโซลจะแสดงข้อมูลต่อไปนี้

* * Angular Live Development Server กำลังฟังบน localhost: 4200 เปิดเบราว์เซอร์ของคุณบน http://localhost:4200/ **

√ คอมไพล์สำเร็จแล้ว

ในขณะนี้ โปรดไปที่ http://localhost:4200/

จริงๆ แล้วคำสั่งใน npm ถูกกำหนดไว้ใน package.json และเรายังปรับแต่งคำสั่งได้ด้วย

"เวอร์ชันโหนด": "โหนด -v"

ใต้โหนดสคริปต์ของ package.json

จากนั้นรีเฟรชอินเทอร์เฟซ npm คุณจะเห็นว่ามีการเพิ่มคำสั่ง เวอร์ชันโหนด ใหม่ การดับเบิลคลิกจะมีผลเช่นเดียวกัน ดำเนินการคำสั่ง node -v