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

ก่อนที่เราจะเริ่มศึกษาเกี่ยวกับ Angular ให้เราเตรียมเครื่องมือสำหรับใช้ในการ

เขียนโค้ดก่อน เริ่มจาก code editor โดยปกติเราสามารถโปรแกรม code editor 

ที่ใช้กันประจำโดยทั่วไปได้ ตามความถนัด แต่เนื่องจาก Angular (ต่อไปจะขอเรียกเป็น

Angular ซึ่งจะหมายถึง Angular และเป็นคนละตัวกับ Angularjs) จะมีรูปแบบการเขียน

โค้ดแบบ TypeScript จึงอยากแนะนำให้ใช้ โปรแกรมที่ชื่อ Visual Studio Code 

 

ติดตั้ง Visual Studio Code 

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

 

 

 

ติดตั้ง Node.js

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

https://nodejs.org/en/

 

ติดตั้ง git client

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

https://git-scm.com/

 

*ก่อนเข้าสู่รายละเอียดเพิ่มเติม ขอออกตัวก่อนว่าผู้เขียนเพิ่งศึกษา 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 ได้ที่ลิ้งค์ นี้

https://goo.gl/GPhlnP  

ขนาดไฟล์ประมาณ 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

ng new my-app

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

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

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

ng.ps1 cannot be loaded because running scripts is disabled on this
system. For more information

Set-ExecutionPolicy RemoteSigned