การติดตั้ง Angular และ เริ่มต้นใช้งานการ Angular ครั้งแรก ผ่าน Angular CLI

By KDBEER | Last updated Oct 7, 2020
การติดตั้ง-Angular-และ-เริ่มต้นใช้งานการ-Angular-ครั้งแรก-ผ่าน-Angular-CLI-5f673ee540c121ac03f6b8a6

การพัฒนาเว็บไซต์ทุกวันนี้ สามารถทำได้ง่ายดาย และมี Web Framework ให้เราใช้งานมากมาย หนึ่งในนั้นก็คือ Angular ครับ แม้ในปัจจุบันนี้ Angular จะได้รับความนิยมน้อยกว่า React หรือ VueJS แต่ว่าในหลายๆ องค์กรก็ยังคงใช้ Angular อยู่และก็มีความสำคัญมากด้วย แต่ก่อนที่เราจะมีเว็บไซต์สวยๆ หรือเพียบพร้อมไปด้วยความสามารถแล้วนั้น เราต้องติดตั้งลงเครื่อง Computer ของเรา เพื่อใช้ในการพัฒนาเว็บไซต์ก่อนครับ

เนื้อหาในบทความนี้

  1. การติดตั้ง Node JS
  2. การติดตั้ง Angular CLI
  3. สร้าง Web Application ด้วย Angular
  4. ทดสอบ Angular App
  5. สรุป

การติดตั้ง 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 ที่จำเป็นต่อการพัฒนา ประกอบด้วยส่วนต่างๆ ดังนี้ครับ

โครงสร้างของ 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 มาให้

ตัวอย่าง Application

สรุป

ในบทความนี้ ผมได้อธิบายวิธีการใช้ติดตั้ง Angular เพื่อใช้พัฒนา web application ต่างๆ และผมก็ได้แนะนำวิธีการสร้าง web application เบื้องต้น และลองรันดู เพื่อทดสอบเว็บครับ