สร้างหน้า Angular ด้วย Angular CLI

บทความนี้สอนวิธีสร้างหน้า Angular โดยแต่ละหน้าใน Angular เรียกว่า component เราสามารถสร้างหน้า Angular ได้โดยใช้คำสั่ง Angular CLI คือ ng generate component ตามด้วยชื่อหน้า หรือชื่อ component จากนั้นกำหนด component ดังกล่าวที่ app-routing.module เพื่อให้สามารถแสดงหน้าดังกล่าวได้จากการเรียกผ่าน URL มีรายละเอียดดังนี้

 

ตัวอย่าง สร้างหน้า Angular ด้วย Angular CLI

1. สมมติสร้างหน้า (component) ชื่อ about รันคำสั่งดังนี้

ng generate component about

หรือเขียนให้สั้นลงด้วยคำสั่งด้านล่าง โดย g = generate และ c = component

ng g c about

 

2. เปิดไฟล์ src/app/app-routing.module.ts เพื่อกำหนดให้สามารถเรียกหน้า about ได้ผ่าน URL

2.1 import AboutComponent ไว้ที่ด้านบนของโค้ด

import { AboutComponent } from './about/about.component';

2.2 เพิ่มเส้นทางไว้ใน routes กรณีเรียก URL about จะโหลดหน้า AboutComponent ขึ้นมา

const routes: Routes = [
  {
    path: 'about',
    component: AboutComponent
  }
  ...
];

 

3. ทดลองเข้าผ่าน URL http://localhost:4200/about หากสำเร็จจะขึ้นข้อความว่า

about works!

 

สรุป การสร้างหน้าในโปรเจค Angular แนะนำให้ใช้คำสั่ง ng generate component หรือเขียนสั้นๆ คือ ng g c ตามด้วยชื่อ component หรือหน้าที่ต้องการ จากนั้นไปกำหนดเส้นทางเพื่อให้สามารถเรียกหน้าดังกล่าวได้ที่ไฟล์ app-routing.module.ts ใน folder /src/app/