วิธีเรียกใช้โครงการเชิงมุม [คำอธิบายทีละขั้นตอน]

AngularJS เป็นสิ่งที่ต้องมีสำหรับนักพัฒนาแบบฟูลสแตก เป็นสิ่งสำคัญสำหรับการพัฒนา front-end เนื่องจากทำให้การใช้คำสั่ง HTML ง่ายขึ้น การพัฒนาเว็บแอปจะง่ายขึ้นมากเมื่อคุณใช้ Angular ในบทความนี้ เราจะพูดถึงวิธีเริ่มต้นใช้งาน Angular เราจะพูดถึงวิธีการติดตั้ง Angular และวิธีเรียกใช้โครงการ Angular

CLI เชิงมุม: บทนำโดยย่อ

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

Angular CLI ให้คุณเริ่มโครงการด้วยคำสั่งเดียว ด้วยคำสั่งอื่น คุณสามารถให้บริการโครงการโดยใช้เซิร์ฟเวอร์การพัฒนาในพื้นที่ Angular CLI ทำงานบน Node.js ดังนั้น ในการรัน Angular CLI บนระบบของคุณ คุณควรมี Node.js ในระบบของคุณก่อน

Node.js ใช้สำหรับเซิร์ฟเวอร์และเพื่อพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์ ในขณะที่ Angular เป็นโซลูชันส่วนหน้า Node.js ช่วยคุณด้วย Angular CLI เท่านั้น

วิธีการติดตั้งเชิงมุม?

ขั้นแรก

ก่อนที่คุณจะติดตั้ง Angular ในระบบของคุณ คุณควรมี Node และ npm ในระบบของคุณ คุณสามารถใช้ Node Version Manager เพื่อติดตั้ง หรือคุณสามารถใช้ตัวจัดการแพ็คเกจอย่างเป็นทางการของ OS ของคุณได้ คุณมีตัวเลือกในการติดตั้ง Node จากเว็บไซต์ เราแนะนำให้ติดตั้งจากเว็บไซต์เนื่องจากมีความรวดเร็วและตรงไปตรงมา คุณจะต้องไป ที่หน้าดาวน์โหลดของ node.js เท่านั้น

ขั้นตอนที่สอง

เมื่อคุณอยู่ในหน้าดาวน์โหลดของ node.js ให้เลือกเวอร์ชันที่คุณต้องการตามระบบปฏิบัติการของคุณ จากนั้นทำตามขั้นตอนที่ระบุในตัวช่วยสร้างการติดตั้ง หากคุณเคยติดตั้ง node.js ในระบบของคุณมาก่อน คุณสามารถข้ามขั้นตอนนี้ (และขั้นตอนก่อนหน้า)

ขั้นตอนที่สาม:

ในการตรวจสอบว่ามีการติดตั้ง Node ในอุปกรณ์ของคุณหรือไม่ ให้เปิดพร้อมท์คำสั่งและเรียกใช้คำสั่งต่อไปนี้:

$ โหนด -v

มันจะแสดงโหนดเวอร์ชันที่ติดตั้งอยู่ในระบบของคุณในปัจจุบัน

ขั้นตอนที่สาม

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

$ npm ติดตั้ง @angular/cli

หลังจากรันคำสั่งด้านบนแล้ว Angular CLI จะติดตั้งในอุปกรณ์ของคุณ คุณได้เสร็จสิ้นส่วน 'วิธีการติดตั้ง Angular'

เรียนรู้: เงินเดือนนักพัฒนาเชิงมุมในอินเดีย: สำหรับ Freshers & มีประสบการณ์

วิธีการเรียกใช้โครงการเชิงมุม?

เนื่องจากเราได้ติดตั้ง Angular ในระบบของเราแล้ว ตอนนี้เราจะเน้นที่การเริ่มต้นโครงการใหม่

ขั้นแรก

เราจะสร้างพื้นที่ทำงานและแอปเริ่มต้นโดยเรียกใช้คำสั่งต่อไปนี้:

ng ใหม่ angular-tour-of-heroes

เราได้เพิ่ม angular-tour-of-heroes เป็นชื่อสำหรับพื้นที่ทำงานของเรา คำสั่ง 'ng new' จะแจ้งให้คุณทราบเกี่ยวกับคุณสมบัติที่คุณต้องการเพิ่มในแอปเริ่มต้น เนื่องจากเป็นบทช่วยสอน เราจะเลือกค่าเริ่มต้นและดำเนินการต่อโดยกด Return หรือ Enter

ขั้นตอนที่สอง

ตอนนี้ Angular CLI ได้ติดตั้งแพ็คเกจ npm และการพึ่งพาที่จำเป็นแล้ว คุณจะมี 'แอปต้อนรับ' ที่พร้อมใช้งานและพื้นที่ทำงานใหม่ คุณจะมีโฟลเดอร์รูทที่มีชื่อเดียวกับแอป (angular-tour-of-heroes) และโปรเจ็กต์แอปโครงกระดูก

ในขั้นตอนนี้เราต้องให้บริการแอปพลิเคชัน เราจะทำโดยไปที่ไดเร็กทอรีพื้นที่ทำงานและเปิดแอป:

cd angular-tour-of-heroes

ng ให้บริการ –open

คำสั่ง 'ng serve' จะสร้างแอป เริ่มเซิร์ฟเวอร์การพัฒนา ดูแลไฟล์ต้นทางของโปรเจ็กต์ และสร้างแอปใหม่เมื่อคุณแก้ไขไฟล์ที่จำเป็น

ขั้นตอนที่สาม

หากคุณต้องการแก้ไขแอป คุณจะต้องไปที่โฟลเดอร์ src/app ใน IDE หรือโปรแกรมแก้ไขของคุณ เราจะแก้ไขแอปของเราโดยเปลี่ยนองค์ประกอบของโครงการนี้ ส่วนประกอบเป็นส่วนประกอบสำคัญของแอปเชิงมุม พวกเขาจัดการฟังก์ชันพื้นฐานเกือบทั้งหมดของโปรเจ็กต์ Angular เช่น การแสดงข้อมูล การตอบสนองต่ออินพุต เป็นต้น

ในขั้นตอนนี้ เปิด IDE ของคุณและไปที่ไดเร็กทอรีโครงการและค้นหาไฟล์คอมโพเนนต์ของโครงการของคุณ:

• app.component.ts
• app.component.html
• app.component.css

ไฟล์แรกเป็นรหัสคลาสและอิงตาม TypeScript ไฟล์ที่สองคือเทมเพลตใน HTML และไฟล์สุดท้ายมีสไตล์ CSS ส่วนตัว

ขั้นตอนที่สี่

โครงการของเราได้รับการตั้งค่าและเรามีไฟล์ทั้งหมดพร้อม ในขั้นตอนนี้ เราจะปรับแต่งโดยเพิ่มชื่อเข้าไป หากต้องการเปลี่ยนชื่อโปรเจ็กต์ Angular ให้ไปที่ไฟล์ app.component.ts และลบเทมเพลตเริ่มต้นที่มีอยู่ Angular CLI สร้างเทมเพลตที่สร้างโดยอัตโนมัติ คุณสามารถแทนที่ด้วยสิ่งต่อไปนี้:

<h1>{{ชื่อของคุณ}}</h1>

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

ขั้นตอนที่ห้า

การปรับเปลี่ยนในแบบของคุณของแอพจะไม่สมบูรณ์หากไม่มีสไตล์ ดังนั้น ในขั้นตอนนี้ เราจะปรับเปลี่ยนรูปแบบของแอป Angular Angular CLI สร้าง styles.css ว่างสำหรับแอปพลิเคชันของคุณเมื่อคุณสร้างโครงการใหม่ คุณสามารถป้อนสไตล์ที่คุณต้องการได้ที่นี่

เปิดไฟล์ src/styles.css ใน IDE ของคุณ และเริ่มแก้ไขรูปแบบของแอปพลิเคชัน แก้ไขสไตล์ของแอพและบันทึกการเปลี่ยนแปลง เมื่อคุณรีเฟรชเบราว์เซอร์ คุณจะเห็นการเปลี่ยนแปลงในแอปของคุณ

ชำระเงิน: วิธีการใช้การแบ่งหน้าใน Angular JS?

เรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเชิงมุมและฟูลสแตก

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

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ Angular และการพัฒนาเว็บส่วนหน้า ต่อไปนี้คือแหล่งข้อมูลเพิ่มเติม:

• คู่มือประวัติย่อสำหรับนักพัฒนาส่วนหน้า
• 10 สุดยอดทักษะในการเป็น Front-end Developer
• แนวคิดโครงการส่วนหน้า

ในทางกลับกัน คุณสามารถเรียนหลักสูตรการพัฒนาแบบฟูลสแตกและเรียนรู้จากผู้เชี่ยวชาญในอุตสาหกรรมผ่านวิดีโอ โครงการ และแบบทดสอบ

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาซอฟต์แวร์แบบฟูลสแตก โปรดดูประกาศนียบัตร PG ของ upGrad & IIIT-B ด้านการพัฒนาซอฟต์แวร์แบบครบวงจร ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการและการมอบหมายมากกว่า 9 รายการ , สถานะศิษย์เก่า IIIT-B, โครงการหลักที่นำไปปฏิบัติได้จริง & ความช่วยเหลือด้านงานกับบริษัทชั้นนำ