วิธีสร้างโปรเจค Angular

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

 

ตัวอย่าง วิธีสร้างโปรเจค Angular ด้วย Angular CLI

1. เข้าไปใน folder ที่ต้องการสร้างโปรเจค Angular สำหรับ Angular เวอร์ชัน < 17.x.x

ng new my-first-angular-app

สำหรับ Angular เวอร์ชัน 17.x.x แนะนำให้เพิ่ม --no-standalone 

ng new my-first-angular-app --no-standalone

ใช้คำสั่ง ng new ตามด้วยชื่อโปรเจค Angular ที่ต้องการสร้างตัวอย่างคือ ‘my-first-angular-app’

 

2. เลือกรูปแบบ CSS ที่ต้องการใช้งานกับ Angular Project มี CSS, SCCC, Sass และ Less ทั้ง 4 ตัวเลือกคือการเขียน CSS ทั้งหมดแต่แตกต่างกันในเรื่องของคุณสมบัติ ชุดคำสั่ง และความสามารถ

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org

 

3. พิมพ์ y ถ้าต้องการเปิดคุณสมบัติ SSR/SSG ถ้าไม่ต้องการให้พิมพ์ N (แนะนำพิมพ์ y)

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation
(SSG/Prerendering)? (y/N)

 

4. รอการติดตั้งสักครู่ เมื่อเสร็จแล้วให้เข้าไปใน folder ของโปรเจค Angular ที่สร้างขึ้นมา และรันคำสั่ง ng serve

cd my-first-angular-app

ng serve

Initial Chunk Files | Names         |  Raw Sizeng the Angular CLI outside a workspace.
polyfills.js        | polyfills     |  82.71 kB |
main.js             | main          |  23.47 kB |
styles.css          | styles        |  96 bytes |
D:\my-first-angular-app>ng serve
                    | Initial Total | 106.27 kB

Application bundle generation complete. [6.434 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

 

5. เปิดโปรแกรมเล่นอินเทอร์เน็ต และเข้า URL http://localhost:4200/

 

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