การใช้งาน Angular CLI พื้นฐาน (ตอนที่ 1)

เรียนรู้คำสั่งและความสามารถของ Angular CLI เครื่องมือที่ครอบคลุมทุกอย่างใน Angular

Source: https://cdn.auth0.com/blog/ngconf2016/cli.png

มีอะไรบ้าง

• อะไรคือ Angular CLI
• วิธีการติดตั้ง Angular CLI
• วิธีการสร้างโปรเจคใหม่และการ Run โปรเจค
• Options ต่างๆ ในการสร้างโปรเจค

อะไรคือ Angular CLI

Angular CLI เป็นเครื่องมือแบบ command line interface ช่วยให้เราเขียน Angular ได้ง่ายและรวดเร็วขึ้น และเป็นตัวช่วยในดำเนินการ Testing, Build โปรเจค และการ Deployment

สามารถนำมาแก้ปัญหาตอนสร้างโปรเจคในขั้นตอนเริ่มต้น เช่นการสร้าง Component ซึ่งยากที่จะรักษามาตรฐานในการเขียนให้เหมือนกัน แต่ Angular CLI จะจัดการ Format ให้เป็นมาตรฐานเดียวกัน

วิธีการติดตั้ง Angular CLI

ความต้องการก่อนการติดตั้ง

1. Nodejs เวอร์ชั่น 6.9 ขึ้นไป
2. npm เวอร์ชั่น 3 ขึ้นไป

เมื่อตรวจสอบเวอร์ชั่นทุกอย่างพร้อมแล้ว ต่อไปทำการติดตั้งดังนี้

npm install -g angular-cli

เมื่อติดตั้งเสร็จแล้ว ลองพิมพ์ ng -v เข้าไปใน Command Line จะปรากฎเวอร์ชั่นของ Angular Cli ที่ติดตั้งไป

วิธีการสร้างโปรเจคใหม่และการ Run โปรเจค

1. เริ่มต้นสร้างโปรเจคใหม่

ng new PROJECT-NAME

ไฟล์ของโปรเจคทั้งหมดที่ได้จากการสร้างโปรเจค

เมื่อสร้างโปรเจคสำเร็จแล้ว โครงสร้างของไฟล์ที่ได้จะมีหน้าตาประมาณนี้

โครงสร้างไฟล์ที่ได้จากการสร้างโปรเจคใหม่โดยใช้ Angular CLI

2. เข้าไปยังโฟลเดอร์ของโปรเจคที่สร้างขึ้นมา

cd PROJECT-NAME

3. สั่ง Run โปรเจค

ng serve

4. เป็นอันเสร็จเรียบร้อย ง่ายมากๆ เลยครับ… เพียงเท่านี้โปรเจคของเราก็พร้อมใช้งานแล้ว ลองทดสอบโดยเข้าไปที่ http://localhost/4200 / บนบราวเซอร์ จะเจอ App ของเรากำลัง Run อยู่

หน้าแรกของ Angular CLI

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

ภาพแสดงการเปลี่ยน Prefix

• กำหนด 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)

อ้างอิง

Angular CLI - Mastering the Basics - Udemy