เตรียมความพร้อมและเริ่มต้นศึกษา Angular เบื้องต้น

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
vscode angular nodejs git

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ vscode angular nodejs git

ดูแล้ว 13,122 ครั้ง




ก่อนที่เราจะเริ่มศึกษาเกี่ยวกับ Angular ให้เราเตรียมเครื่องมือสำหรับใช้ในการ
เขียนโค้ดก่อน เริ่มจาก code editor โดยปกติเราสามารถโปรแกรม code editor 
ที่ใช้กันประจำโดยทั่วไปได้ ตามความถนัด แต่เนื่องจาก Angular (ต่อไปจะขอเรียกเป็น
Angular ซึ่งจะหมายถึง Angular และเป็นคนละตัวกับ Angularjs) จะมีรูปแบบการเขียน
โค้ดแบบ TypeScript จึงอยากแนะนำให้ใช้ โปรแกรมที่ชื่อ Visual Studio Code 
 

ติดตั้ง Visual Studio Code 

สามารถเข้า ไปทำการดาวน์โหลด และติดตั้งได้เลยที่ (พยายามให้เป็น เวอร์ชั่นใหม่ เช่น อัพเดท หรือติดตั้งใหม่)  https://code.visualstudio.com/
 
 

 
 

ติดตั้ง Node.js

สามารถเข้า ไปทำการดาวน์โหลด และติดตั้งได้เลยที่ (พยายามให้เป็น เวอร์ชั่นใหม่ เช่น อัพเดท หรือติดตั้งใหม่)  
 

ติดตั้ง git client

สามารถเข้า ไปทำการดาวน์โหลด และติดตั้งได้เลยที่ (พยายามให้เป็น เวอร์ชั่นใหม่ เช่น อัพเดท หรือติดตั้งใหม่)  
 

*ก่อนเข้าสู่รายละเอียดเพิ่มเติม ขอออกตัวก่อนว่าผู้เขียนเพิ่งศึกษา Angular และ TypeScript 
ไปพร้อมๆ กับทำบทความ ดังนั้นความถูกต้องอาจจะไม่สมบูรณ์ แนะนำให้ศึกษาหรือหาข้อมูล
เพิ่มเติมด้วยตัวเองประกอบ หรือถ้าใครสนใจติดตามบทความ ก็ศึกษาไปพร้อมกันได้
 

 
หลังจากติดตั้งเครื่องมือทั้งหมดเรียบร้อยแล้ว ก็ทดสอบความพร้อมของ
เครื่องมือ เช็คว่า nodejs และ git พร้อมทำงานหรือไม่ โดยตรวจสอบเวอร์ขั่น
ผ่าน command line ดังรูป
 
 

 
 
สำหรับเนื้อหาเริ่มต้นนี้ เราจะทดสอบโดยใช้โค้ดตัวอย่าง เพื่อดูว่า เมือรันแล้ว
โค้ดของเราจะพร้อมทำงานหรือไม่ 
 
สร้างโฟลเดอร์หลักไว้ที่ไดร์ C หรือแล้วแต่ละคนก็ว่าจะไว้ที่ไหน ในที่นี้
จะสร้างไว้ที่ C:/projects ดังรูป
 
 

 
 
จากนั้นให้เปิด command line ในโหมด administartor แล้ว
เข้าไปยัง path ที่เราสร้างข้างต้น แล้ว ทำการ clone ไฟล์ตัวอย่างผ่าน command line ด้วยคำสั่ง git
 
git clone https://github.com/angular/quickstart.git quickstart

 
 

 
 
quickstart คือโฟลเดอร์ app ตัวอย่างที่เราจะสร้าง โดย clone โค้ดตัวอย่างจาก
https://github.com/angular/quickstart.git ผ่านคำสั่ง git ซึ่งพอเราดาวน์โหลดเสร็จ
เราจะได้โฟลเดอร์ดังรูป
 
 

 
 
เข้าไปในโฟลเดอร์ quickstart ลบไฟล์ที่ทำ highlight ไว้ดังรูป ออก ไว้เฉพาะไฟล์ที่จำเป็น
 
 

 
 
ลบแล้วจะเหลือเป็น
 
 

 
 
ต่อไปเราจะทำการติดตั้ง dependencies หรือไฟล์ที่ใช้ร่วมในการใช้งาน Angular
โดยใช้คำสั่ง npm install ผ่าน command line ใน path quickstart ดังรูป

 

 
 
(หมายเหตุ: การใช้คำสั่ง npm install จำเป็นต้องใช้งานอินเทอร์เน็ตที่มีเสถียรและมีความเร็ว
พอสมควร เนื่องจากจะมีการดาวน์โหลดไฟล์ขนาดประมาณ 100 MB ซึ่งใช้เวลาขึ้นกับ
ความเร็วของอินเทอร์เน็ต และบางกรณีคำสั่งนี้อาจจะไม่ทำงานด้วยเหตุผลบางประการ
ผู้เขียนเจอ คือ อินเทอร์เน็ตช้า และคำสั่ง npm install ไม่ทำงาน วิธีแก้คือ ให้เข้าไปทำ
การดาวน์โหลดไฟล์ โค้ดตัวอย่างและไฟล์ dependencies ได้ที่ลิ้งค์ นี้
ขนาดไฟล์ประมาณ 26 MB
หรือถ้าต้องการไฟล์ที่เป็นปัจจุบัน ก็สามารถ copy จากเครื่อง อื่นมาใช้แทนได้)
 
คำสั่งนี้ npm install จะไปทำการดาวน์โหลด dependencies ต่างๆ ที่ระบุไว้ในไฟล์ package.json
 
 

 
 
โดยเมื่อดาวน์โหลดสำเร็จ เราจะได้โฟลเดอร์ node_modules เพิ่มเข้ามาดังรูป
 
 

 
 
ต่อไปให้เราเปิดโปรแกรม Visual Studio Code เพื่อทำการเพิ่มโฟลเดอร์ quickstart
ซึ่งเป็นโฟลเดอร์ app ตัวอย่างเข้ามาเตรียมพร้อมสำหรับใช้งานกัน

 

 
 
หลังจากเพิ่มโฟลเดอร์ quickstart เข้ามาในตัวโปรแกรมแล้ว เราจะได้โครงสร้างไฟล์และโฟลเดอร์
ดังรูป ไฟล์ที่สำคัญๆ ในตัวอย่างก็จะมี index.html , main.ts และไฟล์ในโฟลเดอร์ app ซึ่งเป็นไฟล์
นามสกุล ts หรือ TypeScript ไฟล์ ซึ่งยังไม่ได้ทำการ compile เป็นนามสกุล js หรือไฟล์ JavaScript
 
 

 
 

ทดสอบรัน app ตัวอย่าง

ให้ทำการทดสอบรัน app ตัวอย่างด้วยคำสั่ง npm start ผ่าน command line ดังนี้
 
 

 
 
การใช้งานคำสั่ง npm start ก็เหมือนเป็นการรัน server หากไม่มีอะไรผิดพลาด
บราวเซอร์จะเปิดขึ้นมาและรัน app ตัวอย่างของเราผ่าน http://localhost:3000/
 
 


 
 
แสดงว่า app ของเราทำงานสมบูรณ์ และพร้อมสำหรับการศึกษา Angular แล้ว
โดยเมื่อเรากลับมาโปรแกรม Visual Studio จะพบว่ามีการ compile ไฟล์ที่เป็นนามสกุล
ts และสร้างไฟล์นามสกุล js และ map ไฟล์ขึ้นมาดังรูป ซึ่ง app ของเราก็ทำงานจากไฟล์
js หรือไฟล์ JavaScript ซึ่งถูก compile จากโค้ดที่เขียนในไฟล์ ts แบบนี้เป็นต้น
 
 

 
 
 
ขอจบเนื้อหาเริ่มต้นกับ Angular ไว้เท่านี้ รอติดตามเนื้อหาตอนต่อไป

 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 31-03-2017 ( เนื้อหา [เพิ่มเติมเนื้อหา ครั้งที่ 1] นี้ไม่อัพเดท ไม่เหมาะนำไปใช้งานแล้ว)

   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 23-11-2017


เนื่องจาก ตั้งแต่วันที่ 1-11-2017 เป็นต้นไป Angular จะใช้งาน Angular CLI ในเอกสารแนะนำต่าง แทน
ดังนั้น ให้เราทำการติดตั้ง Angular CLI  ดังนี้
 
ติดตั้งผ่าน command line ด้วยคำสั่งต่อไปนี้
 
npm install -g @angular/cli
 


 
 
หลังจากติดตั้งเสร็จแล้ว ตรวจสอบว่า Angular CLI พร้อมใช้งานแล้วหรือไม่ โดยพิมพ์
 
ng help
 


 
 
ถ้าไม่มีอะไรผิดพลาด ก็จะแสดงลิสรายการ คำสั่งวิธีการใช้งานต่างๆ ตามรูปด้านบน ตอนนี้เราพร้อมสำหรับเริ่ม Project
Angular ในรูปแบบใหม่แล้ว
 
ให้เราเริ่มสร้าง Project ใหม่ โดยใช้คำสั่งผ่าน command line เป็น
 
ng new my-app
 
ในที่นี้คือสร้าง Project ชื่อ my-app หรือก็คือโฟลเดอร์ Project ชื่อ my-app
 
 

 
 


 
 
ในขั้นตอนการสร้าง Project ใหม่ในครั้งแรก อาจจะต้องรอพอสมควร เนื่องจากมีการติดตั้ง package ต่างๆ 
ขนาดไฟล์ก่อนบีบอัดมีขนาดถึง 200 MB หลังบีบอัดมีขนาดประมาณ 40 MB ดังนั้น ถ้าใช้ Internet ที่ช้าหรือไม่เสถียร
ก็อาจจะต้องรอนานหรืออาจเกิดข้อผิพพลาดได้
 

หรือสามารถดาวน์โหลดไฟล์เริ่มต้นได้ที่ (*ดาวน์โหลดตัวล่าสุด V.9) http://bit.ly/2HifLyw

 
โดยหลังจากดาวน์โหลดแล้วเราจะได้ไฟล์ rar ชื่อ quickstart-angular-routing-css-v9.rar ให้ทำการแตกไฟล์ จะพบไฟล์ my-app.rar
ด้านใน อีกชั้น ให้ทำการแตกไฟลื my-app.rar แล้วเอาโฟลเดอร์ Project ที่ชื่อ my-app ด้านในมาใช้งาน
 
ให้เราเข้าไปในโฟลเดอร์ Project 
 
cd my-app
 
แล้วทดสอบการทำงาน 
โดยทดสอบ Run App ผ่าน Angular CLI ด้วยคำสั่ง
 
ng serve --open
 


 
 
หากไม่มีอะไรผิพพลาด หน้า App เริ่มต้น ก็จะแสดงดังรูปด้านล่างผ่าน Browser 
 
 

 
 
ตอนนี้เราพร้อมสำหรับการ เขียน Code แล้ว อย่าลืมว่า ในขณะทดสอบเขียนโค้ด เราต้องเปิดหน้า command line
ที่สร้างเริ่มต้น Project ทิ้งไว้ ไม่เช่นนั้นจะไม่สามารถทดสอบ App ของเราได้
 
ต่อไปให้เราเปิดโปรแกรม Visual Studio Code เพื่อทำการเพิ่มโฟลเดอร์ my-app
ซึ่งเป็นโฟลเดอร์ App เริ่มต้นเข้ามาเตรียมพร้อมสำหรับใช้งานกัน
โดยทำผ่าน command line ให้เราพิมพ์ 
 
code .
ตามรูป
 
 


 
 
โปรแกรม Visual Studio Code ก็จะเปิดมาพร้อมกับดึงโฟลเเดอร์ Project App ของเราขึ้นมาพร้อมแก้ไขโค้ด
 
 


 
 
อย่าลืมใช้คำสั่ง ผ่าน command line 
 
ng serve --open
 
ก่อน เพื่อทดสอบ App พร้อมกับแก้ไขโค้ด


   เพิ่มเติมเนื้อหา ครั้งที่ 3 วันที่ 27-08-2018 ( เนื้อหา [เพิ่มเติมเนื้อหา ครั้งที่ 3] นี้ไม่อัพเดท ไม่เหมาะนำไปใช้งานแล้ว)

   เพิ่มเติมเนื้อหา ครั้งที่ 4 วันที่ 04-03-2019


สามารถดาวน์โหลดไฟล์เริ่มต้นสำหรับ Angular V7.2 + routing + css

   ได้ที่ http://bit.ly/2Tf2Cyn

สามารถดาวน์โหลดไฟล์เริ่มต้นสำหรับ Angular V7.2 + routing + scss

   ได้ที่ http://bit.ly/2Uqzukc
 
โฟล์เริ่มต้นโปรเจ็คข้างต้น สามารถใช้คำสั่ง Angular CLI ดังนี้แทนได้
 
ng new my-app
 
ซึ่งจะได้เวอร์ชั่นที่อัพเดทล่าสุด
แต่เนื่องจากไฟล์มีขนาดใหญ่ อาจจะใช้เวลาในการดาวน์โหลดพอสมควร หรือหากต้องการความสะดวก
ในการเริ่มโปรเจ็คให้เร็วขึ้น สามารถดาวน์โหลดไฟล์เริ่มต้น ตามลิ้งค์ด้านบนได้


   เพิ่มเติมเนื้อหา ครั้งที่ 5 วันที่ 05-07-2019


สามารถดาวน์โหลดไฟล์เริ่มต้นสำหรับ Angular V8.1 + routing + css

   ได้ที่ http://bit.ly/2YzKlKT

สามารถดาวน์โหลดไฟล์เริ่มต้นสำหรับ Angular V8.1 + routing + scss

   ได้ที่ http://bit.ly/2S00BT6


   เพิ่มเติมเนื้อหา ครั้งที่ 6 วันที่ 12-02-2020


สามารถดาวน์โหลดไฟล์เริ่มต้นสำหรับ Angular V9 + routing + css

   ได้ที่ http://bit.ly/2HifLyw


   เพิ่มเติมเนื้อหา ครั้งที่ 7 วันที่ 23-07-2021


กรณีไม่สามารถเรียกใช้งานคำสั่ง ng ได้ และขึ้น error ในลักษณะข้างต้นนี้

 
ng.ps1 cannot be loaded because running scripts is disabled on this
system. For more information
 
ให้รันคำสั่งผ่าน command line ดังนี้
 
Set-ExecutionPolicy RemoteSigned


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ