การพัฒนาเว็บไซต์ทุกวันนี้ สามารถทำได้ง่ายดาย และมี Web Framework ให้เราใช้งานมากมาย หนึ่งในนั้นก็คือ Angular ครับ แม้ในปัจจุบันนี้ Angular จะได้รับความนิยมน้อยกว่า React หรือ VueJS แต่ว่าในหลายๆ องค์กรก็ยังคงใช้ Angular อยู่และก็มีความสำคัญมากด้วย แต่ก่อนที่เราจะมีเว็บไซต์สวยๆ หรือเพียบพร้อมไปด้วยความสามารถแล้วนั้น เราต้องติดตั้งลงเครื่อง Computer ของเรา เพื่อใช้ในการพัฒนาเว็บไซต์ก่อนครับ
เนื้อหาในบทความนี้
- การติดตั้ง Node JS
- การติดตั้ง Angular CLI
- สร้าง Web Application ด้วย Angular
- ทดสอบ Angular App
- สรุป
การติดตั้ง Node JS
ผมได้เขียนบทความเกี่ยวกับการติดตั้ง NodeJS แยกไว้แล้ว สามารถเข้าไปดูที่ลิงค์นี้ได้เลยครับ
วิธีการติดตั้ง NodeJS 14.x บน Ubuntu
การติดตั้ง Angular CLI
npm install -g @angular/cliหลังจากติดตั้งเรียบร้อยแล้วลองใช้คำสั่งต่อไปนี้ เพื่อทดสอบการติดตั้งครับ
ng versionถ้าการติดตั้งทุกอย่างทำได้ถูกต้อง ควรจะเห็นผลลัพธ์แบบนี้ครับ
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 10.1.2
Node: 14.11.0
OS: linux x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1001.2 (cli-only)
@angular-devkit/core 10.1.2 (cli-only)
@angular-devkit/schematics 10.1.2 (cli-only)
@schematics/angular 10.1.2 (cli-only)
@schematics/update 0.1001.2 (cli-only)บิงโกครับ!! แค่นี้ คุณก็สามารถที่จะสร้าง Application จาก Angular ได้แล้วครับ
สร้าง Web Application ด้วย Angular
เราใช้คำสั่งด้านล่างนี้ เพื่อบอกให้ Angular CLI สร้างไฟล์สำหรับการพัฒนา
ng new my-appจากนั้น Angular จะถามเราว่า เราอยากให้ระบบใช้ CSS แบบไหน ตรงนี้ผู้อ่านสามารถเลือกได้ตามใจเลยครับ
CSS
❯ SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.comจากนั้น Angular จะทำการสร้าง Folder structure และ Source Code ที่จำเป็นต่อการพัฒนา ประกอบด้วยส่วนต่างๆ ดังนี้ครับ
โฟลเดอร์
- e2e ย่อมาจาก End to End ซึ่งใช้เก็บไฟล์เทสของ Angular
- node_modules ใช้เก็บ Dependencies หรือไลบรารี่ต่างๆ ที่เราจะ install เพื่อใช้พัฒนาในอนาคต
- src
- app => เก็บ source code ที่เราจะเขียนครับ
- assets => ใช้เก็บรูปภาพ, ฟอนต์ เป็นต้น
- environments => ใช้เก็บ config ต่างๆ ในกรณีที่เราต้องการแยกระหว่าง Test กับ production
ทดสอบ Angular App
ให้ใช้คำสั่งต่อไปนี้ครับ เพื่อ Run App ขึ้นมา
ng serve --poll=1000จะได้ผลลัพธ์ดังภาพข้างล่างครับ เป็น App ตัวอย่าง ที่ Angular จะ Provide มาให้
สรุป
ในบทความนี้ ผมได้อธิบายวิธีการใช้ติดตั้ง Angular เพื่อใช้พัฒนา web application ต่างๆ และผมก็ได้แนะนำวิธีการสร้าง web application เบื้องต้น และลองรันดู เพื่อทดสอบเว็บครับ
