การติดตั้ง 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 เบื้องต้น และลองรันดู เพื่อทดสอบเว็บครับ

Tags
  • #Angular
  • #Web Development
If you need further reading
การส่งข้อมูลระหว่าง Component ใน Angular 7 โดยใช้ Service
สวัสดีครับ ผมได้เจอคำถามเกี่ยวกับการใช้งาน Component ของ Angular และเจอปัญหาว่า เมื่อต้องทำงานหลายๆ Component เราจะมีวิธีการส่งข้อมูล หรือ Refresh ข้อมูลระหว่าง Component ยังไง
Jan 11 2020
การส่งข้อมูลระหว่าง Component ใน Angular 7 โดยใช้ Service-5e19ba806a6e372a70f264ef
การใช้งาน Material Dialog ใน Angular
ก่อนหน้านี้ ผมได้ลองใช้งาน dialog แบบต่างๆ มาพอสมควร เช่น Bootstrap Modal หรือแม้แต่สร้าง CSS ขึ้นมาใช้เอง จนเมื่อไม่นานมานี้ ได้ตัดสินใจ <a href="https://material.angular.io/components/dialog/overview">Material Dialog</a> พบว่ามันใช้งานง่าย มีความยืดหยุ่น นำมาใช้ในโปรเจคได้เร็ว เอาละครับ มาเริ่มกันเลย
Jan 11 2020
การใช้งาน Material Dialog ใน Angular-5e19b7b56a6e372a70f264ed
บอกเล่าเรื่องราวของ Angular ที่มาที่ไปรวมถึงข้อดี ข้อเสียของ Angular กัน
ในบทความนี้ ผมจะเล่าประวัติย่อๆ ของ Angular รวมถึงข้อดีข้อเสียของ Framework นี้ และก็จะพาผู้อ่านเริ่มต้นพัฒนาเว็บไซต์ด้วย Angular ซึ่งมีตัวอย่างผลงานให้ดูด้วย จะเป็นเว็บไซต์สำหรับแสดงรูปภาพของน้องแมว (Admin เป็นทาสแมวจ้า 555)&nbsp;
Jun 5 2020
ทำความรู้จักกับ-Angular-ดูตัวอย่างเว็บไซต์-และติดตั้งโปรแกรมสำหรับเริ่มพัฒนา-5ed999b3ec76f739efc66146
การเขียนไฟล์ Excel ด้วย Angular 9
สวัสดีครับ ในบทความนี้ ผมขอนำเสนอการสร้างไฟล์ XLSX โดยใช้ Library ที่ชื่อว่า XLXS &nbsp; กับ Frontend Framework อย่าง Angular กัน สืบเนื่องจากเมื่อก่อนผมจะเขียนโปรแกรมในส่วน Backend ให้ Export ไฟล์ให้ แต่ก็จะเจอปัญหาว่าถ้าไฟล์มันใหญ่ไป อย่างเช่นกว่า 1 แสน records ก็จะไปกระทบการทำงานของ Server และถ้า users หลายๆ คนกด Export ไฟล์ในช่วงเดียวกัน ก็อาจจะทำให้เครื่องค้างไปเลยก็ได้
May 23 2020
การเขียนไฟล์-Excel-ด้วย-Angular-9-5ec91d00ec76f74b79613a7f