ยินดีต้อนรับสู่บทแนะนำแรกของฉัน! วันนี้เราจะมาเรียนรู้วิธีสร้างโครงการ Angular ใหม่และแก้ไข มาเริ่มกันเลย!

Angular คืออะไร?

Angular เป็นกรอบการออกแบบแอปพลิเคชันและแพลตฟอร์มการพัฒนาสำหรับการสร้างแอปหน้าเดียวที่มีประสิทธิภาพและซับซ้อน

Angular สร้างโดย Google และใช้ HTML, CSS และ TypeScript เป็นหนึ่งในเฟรมเวิร์กที่มีคนใช้มากที่สุดในโลก เว็บไซต์และ บริษัท ยอดนิยมหลายแห่งใช้งานและเนื่องจาก Google ได้รับการสำรองข้อมูลไว้จึงไม่ตายเร็ว ๆ นี้

ดังนั้นหากคุณสนใจ Angular และต้องการเริ่มต้นใช้งานคุณมาถูกที่แล้ว เริ่มเขียนโค้ดกันเลย!

มาสร้างโครงการ Angular ใหม่กันเถอะ!

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

แต่แน่นอนคุณต้องติดตั้งก่อน เพียงแค่เรียกใช้คำสั่งนี้

npm install -g @angular/cli

หลังจากติดตั้ง CLI แล้วให้รันคำสั่งนี้ เพียงแค่กด Enter เมื่อถามคุณบางอย่าง เราจะใช้การตั้งค่าเริ่มต้นในวันนี้

ng new my-angular-app

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

หากต้องการดูโครงการของคุณให้เรียกใช้คำสั่งนี้

ng serve --open 

เมื่อคุณเปิดหน้าคุณจะเห็นหน้าต้นแบบเชิงมุมเริ่มต้น

นี่คือลักษณะที่ปรากฏ คุณสามารถไปตามลิงค์หากคุณสนใจ

ตอนนี้ที่จะแก้ไขหน้าไปที่src / แอปและเปิดapp.component.html คุณสามารถลบหรือแก้ไขได้ตามที่คุณต้องการ

มาลบทั้งหมดแล้วเปลี่ยนด้วยโค้ดด้านล่าง

<div class="container">
  <h1>My First Angular App</h1>
  <p>Hey. I just created a cool new project using Angular!</p>
</div>

ตอนนี้คุณจะเห็นหัวเรื่องและย่อหน้าบนเบราว์เซอร์ของคุณ มาทำให้มันเจ๋งขึ้นโดยใช้ CSS

เพียงคัดลอกโค้ดด้านล่างหรือเขียน CSS ของคุณเองในapp.component.css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h1,
p {
  font-family: "Segoe UI", sans-serif;
}

แค่นี้แหละ!

คุณเพิ่งเรียนรู้วิธีสร้างโครงการ Angular ใหม่และแก้ไข HTML และ CSS ของส่วนประกอบแอปของคุณ

เป็นการแนะนำ Angular เพียงเล็กน้อย ครั้งต่อไปเราจะเริ่มทำงานกับ TypeScript และเจาะลึกลงไปใน Angular

หากคุณชอบบทช่วยสอนอย่าลืมติดตามฉันทาง Twitter เจอกันคราวหน้า!