สัปดาห์ที่ 10 Angular เบื้องต้น (Components และ Routing)

สไลด์บทเรียน

วัตถุประสงค์

1. อธิบายโครงสร้างโปรเจกต์ Angular เบื้องต้นได้
2. สร้าง Component และจัดหน้าเว็บด้วย Routing ได้
3. พัฒนา Mini Project ด้วย Angular ได้

หัวข้อย่อย

1. Angular CLI และ Project Structure
2. Components
3. Templates
4. Data Binding เบื้องต้น
5. Routing
6. Navigation
7. Component Reuse

เนื้อหา

Angular เป็น Front-end Framework ที่มีโครงสร้างชัดเจน เหมาะกับการพัฒนาเว็บแอปพลิเคชันที่ต้องดูแลต่อระยะยาว Component คือหน่วยหลักของ UI โดยแต่ละ component มักประกอบด้วย template, style และ logic

Routing ช่วยให้เว็บแอปพลิเคชันมีหลายหน้าโดยไม่ต้องโหลดหน้าใหม่ทั้งเอกสาร ผู้ใช้สามารถเปลี่ยน view ตาม URL และทีมสามารถแยกหน้าที่ของแต่ละ feature ได้ชัดเจนขึ้น

ตัวอย่างแนวคิด Routing

const routes = [
  { path: "", component: HomeComponent },
  { path: "about", component: AboutComponent },
];

กิจกรรมในชั้นเรียน

สร้าง Angular Mini Project ที่มีอย่างน้อย 3 หน้า ได้แก่ Home, List และ Detail

ศึกษาค้นคว้านอกเวลา

พัฒนา Mini Project เพิ่ม component ย่อยและเมนูนำทางให้ครบ

คำถามทบทวน

1. Component ใน Angular ทำหน้าที่อะไร
2. Routing ช่วยให้เว็บแอปพลิเคชันเป็นระบบขึ้นอย่างไร
3. ควรแยก component ใหม่เมื่อใด

กลับรายวิชา