Angular CLI เป็นเครื่องมือแบบ command line interface ช่วยให้เราเขียน Angular ได้ง่าย และยังช่วยจัดโครงสร้างและโค้ดให้ถูกต้องตามหลักของ Best Practices อีกด้วย ถ้าใครจะเริ่มเขียน Angular ก็แนะนำให้ใช้ และศึกษาได้เลยครับ 🙂
.
1. ติดตั้ง Angular CLI (แบบ global) ด้วยคำสั่ง
npm install -g @angular/cli
.
2. ดู help ทั้งหมดของ Angular CLI ด้วยคำสั่ง
ng help
.
3. ดูเวอร์ชัน Angular CLI ด้วยคำสั่ง
ng -v
.
4. เปิดดู doc และค้น keyword ในเว็บ angular.io ด้วยคำสั่ง
ng doc [คำที่ต้องการค้น]
.
5. สร้างโปรเจคใหม่ ด้วยคำสั่ง
ng new [ชื่อโปรเจค]
Options ที่น่าสนใจ
5.1 –skip-install หากยังไม่ต้องการติดตั้ง packages ต่างๆ
5.2 –skip-tests หากไม่ต้องการให้สร้างไฟล์ test (spec files)
5.3 –routing หากต้องการให้สร้าง routing module แยกต่างหาก
5.4 –prefix [ข้อความ prefix] ตั้ง default selector prefix ของทุก components
5.5 –skip-git หากไม่ต้องการเพิ่มโปรเจคเข้าไปใน git
ตัวอย่างการใช้
ng new MyProject –routing –style sass prefix hello –skip-git
.
6. หากต้องการ set ค่า config ต่างๆ ในภายหลัง (ในไฟล์ .angular-cli.json) ใช้คำสั่ง
ng set เช่น ng set defaults.styleExt sass
* ใช้ -g ต่อท้าย สำหรับ global set
.
7. ตรวจสอบความถูกต้อง และจัดการโค้ด typescript ที่เราเขียน ด้วยคำสั่ง
ng lint
.
8. สร้าง หรือ gen ไฟล์ blueprint ด้วยคำสั่ง
ng generate หรือ ng g
เช่น หากต้องการสร้าง component ก็ให้ใช้คำสั่ง ng generate component <ชื่อ component> หรือ ng g c <ชื่อ component>
หรือถ้าต้องการสร้าง module และ routing module ด้วย ก็ให้ใช้คำสั่ง ng g m <ชื่อ module> –routing
หรือต้องการสร้าง Routing Guard ก็ใช้คำสั่ง ng generate guard <ชื่อ guard>
.
9. Serve โปรเจค ด้วยคำสั่ง
ng serve
Options ที่น่าสนใจของ ng serve
9.1 –open หรือ -o ไว้เปิด default browser เช่น ng serve -o
9.2 –port หรือ -p ระบุ port ที่ต้องการ เช่น ng serve -p 8626
.
10. Build โปรเจค (Development Build) ด้วยคำสั่ง
ng build
.
11. Build โปรเจค (Production Build) ด้วยคำสั่ง
ng build –prod
.
12. Unit Tests (Karma) ด้วยคำสั่ง
ng test
.
13. End to End Tests (Protractor) ด้วยคำสั่ง
ng e2e
