การใช้งาน Angular CLI พื้นฐาน (ตอนที่ 1)
เรียนรู้คำสั่งและความสามารถของ Angular CLI เครื่องมือที่ครอบคลุมทุกอย่างใน Angular
มีอะไรบ้าง
- อะไรคือ Angular CLI
- วิธีการติดตั้ง Angular CLI
- วิธีการสร้างโปรเจคใหม่และการ Run โปรเจค
- Options ต่างๆ ในการสร้างโปรเจค
อะไรคือ Angular CLI
Angular CLI เป็นเครื่องมือแบบ command line interface ช่วยให้เราเขียน Angular ได้ง่ายและรวดเร็วขึ้น และเป็นตัวช่วยในดำเนินการ Testing, Build โปรเจค และการ Deployment
สามารถนำมาแก้ปัญหาตอนสร้างโปรเจคในขั้นตอนเริ่มต้น เช่นการสร้าง Component ซึ่งยากที่จะรักษามาตรฐานในการเขียนให้เหมือนกัน แต่ Angular CLI จะจัดการ Format ให้เป็นมาตรฐานเดียวกัน
วิธีการติดตั้ง Angular CLI
ความต้องการก่อนการติดตั้ง
- Nodejs เวอร์ชั่น 6.9 ขึ้นไป
- npm เวอร์ชั่น 3 ขึ้นไป
เมื่อตรวจสอบเวอร์ชั่นทุกอย่างพร้อมแล้ว ต่อไปทำการติดตั้งดังนี้
npm install -g angular-cli
เมื่อติดตั้งเสร็จแล้ว ลองพิมพ์ ng -v
เข้าไปใน Command Line จะปรากฎเวอร์ชั่นของ Angular Cli ที่ติดตั้งไป
วิธีการสร้างโปรเจคใหม่และการ Run โปรเจค
- เริ่มต้นสร้างโปรเจคใหม่
ng new PROJECT-NAME
เมื่อสร้างโปรเจคสำเร็จแล้ว โครงสร้างของไฟล์ที่ได้จะมีหน้าตาประมาณนี้
2. เข้าไปยังโฟลเดอร์ของโปรเจคที่สร้างขึ้นมา
cd PROJECT-NAME
3. สั่ง Run โปรเจค
ng serve
4. เป็นอันเสร็จเรียบร้อย ง่ายมากๆ เลยครับ… เพียงเท่านี้โปรเจคของเราก็พร้อมใช้งานแล้ว ลองทดสอบโดยเข้าไปที่ http://localhost/4200 / บนบราวเซอร์ จะเจอ App ของเรากำลัง Run อยู่
Port ที่ Angular CLI ให้เราใช้นั้น คือ 4200 ซึ่งเป็นค่าดีฟอล ถามว่าเราเปลี่ยนได้ไหม?? เปลี่ยนได้ครับ ด้วยคำสั่งตอน Start โปรเจค ng serve
และเติม Options เข้าไปเช่น
ng serve --port 4201
หรือแม้แต่เปลี่ยนจาก localhost เป็น ip host ของเราเอง
ng serve --host 0.0.0.0 --port 4201
ความสามารถอีกอย่างคือ Live Reload ก็คือหากมีการเปลี่ยนแปลงโค้ดใดๆ หน้าเว็บจะทำการ Reload ให้อัตโนมัติ
Options ต่างๆ ในการสร้างโปรเจค
- โดยปกติแล้วเวลาเราสร้างโปรเจคใหม่ Angular CLI จะทำการดาวน์โหลด Dependency ให้อันโนมัติ สังเกตจากไฟล์ที่อยู่ในโฟลเดอร์ node_module ครับ แต่ถ้าหากเราไม่ต้องการติดตั้ง Dependency สามารถทำได้โดยใช้คำสั่งดังนี้
ng new PROJECT-NAME --skip-install
- หากต้องการสร้างโฟลเดอร์และมี Angular Project หลายตัว
ng new PROJECT-NAME --skip-install --directory public --source-dir ngApp
- แก้ไข Prefix ใน Component ซึ่งปกติแล้ว Angular CLI จะให้ค่าดีฟอลด์เป็น
app
ซึ่งเราก็สามารถเปลี่ยน Prefix เป็นคำอื่นได้ด้วยคำสั่ง
ng new PROJECT-NAME --prefix demo
- กำหนด Style Sheet ของโปรเจค โดยปกติค่าดีฟอลด์ จะเป็นการใช้งาน CSS ครับ แต่หากเราเขียนแบบ Sass หรือ Scss ก็สามารถระบุเข้าไปตอนสร้างโปรเจคเลยดังนี้
หากต้องการเขียน Style Sheet ของโปรเจคด้วย sass
ng new PROJECT-NAME --style=sass
หากต้องการเขียน Style Sheet ของโปรเจคด้วย scss
ng new PROJECT-NAME --style=scss
หลังจากที่ได้เรียนรู้วิธีการสร้างโปรเจคเรียบร้อยแล้ว นอกจากนี้ Angular CLI สามารถสร้างไฟล์หรือ Features ส่วนของโปรแกรมต่างๆ เช่น Component , Service ได้อีกด้วย การใช้งาน Angular CLI พื้นฐาน (ตอน 2)