Angular สร้าง Component และวิธีเรียกใช้

บทความนี้สอนสร้าง component ใน Angular โดยใช้ Angular CLI โดย component นั้นเปรียบเสมือนกับหน้าเว็บไซต์ หรือส่วนประกอบหนึ่งของหน้าเว็บไซต์ เราจะเรียนรู้การใช้ Angular CLI เพื่อสร้าง และวิธีเรียกใช้ component ดังกล่าวผ่าน URL มีรายละเอียดดังนี้

 

ตัวอย่าง Angular สร้าง Component และวิธีเรียกใช้

1. เปิด command line และเข้าไปในโปรเจค Angular และใช้คำสั่ง

ng g c product

คำสั่งด้านล่างย่อมาจาก ng generate component ตามด้วยชื่อ component คือ product เมื่อสร้างแล้วจะพบว่ามี folder ชื่อ product ใน /src/app/

 

2. เรียกใช้ component ดังกล่าวด้วยการเปิดไฟล์ /src/app/app-routing.module.ts จากนั้น import ProductComponent และกำหนดเส้นทางเพื่อเรียกใช้ผ่าน URL

import { ProductComponent } from './product/product.component';

const routes: Routes = [
  {
    path: 'product',
    component: ProductComponent
  }  
];

 

3. รันโปรเจค Angular ด้วยคำสั่ง

ng serve

 

4. เข้า URL http://localhost:4200/product หากสำเร็จจะขึ้นข้อความด้านล่างที่หน้าจอเว็บไซต์

product works!

 

สรุป วิธีการ Angular สร้าง Component แนะนำให้ใช้คำสั่ง ng g c <ชื่อ component> โดยคำสั่งดังกล่าวเป็นส่วนหนึ่งของ Angular CLI ส่วนวิธีเรียกใช้ให้กำหนด component ที่ต้องการใน app-routing.module.ts