มือใหม่หัดใช้ Angular ตอนที่ 1: สวัสดี Angular CLI

ช่วงนี้เวลาจะทำเว็บซักเว็บนึง มองซ้ายที มองขวาที ก็เจอแต่ Framework ใหม่ๆเต็มไปหมด ทั้ง Angular, React, Vue และอื่นๆอีกมากมาย เลือกกันแทบไม่ได้ ไอ้เราที่เคยเขียนแค่ HTML + JS + CSS ธรรมดาไม่รู้จะใช้อันไหน จะลองเขียนทุกอันทีเดียวก็ไม่ใช่ หลังจากลองหาข้อมูลจากเว็บนู้นที่ เว็บนี้ที สุดท้ายก็มาลงเอยที่ Angular

ถ้าถามว่าอะไรที่ทำให้เลือก Angular? เพื่อนแนะนำมาครับ 555+

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

*บทความในเซตนี้อาจจะมีผิดๆถูกๆอยู่บ้าง ต้องขออภัยมา ณ ที่นี้ด้วยนะครับ -/\-

 

เอาหล่ะ มาเข้าเรื่องกันเลยดีกว่า…

ก้าวแรกที่สำคัญของการเริ่มต้นเขียน Angular นั่นก็คือ… การลง “Angular Command Line Interface”

 

แล้ว “Angular Command Line Interface” มันคืออะไรอ่ะ?

Angular Command Line Interface หรือเรียกสั้นๆว่า Angular CLI เป็น Tools ตัวนึงที่ทำให้เราจัดการกับโปรเจค Angular ของเราได้ง่ายขึ้น เช่น การสร้างโปรเจค การสร้าง component ต่างๆ เป็นต้น

การ install Angular ก็สามารถทำได้ง่ายๆ โดยการเปิด Command Line ขึ้นมา แล้วพิมพ์คำสั่ง

npm install -g @angular/cli

*ก่อนที่จะ install Angular CLI เราจำเป็นที่จะต้อง install Node 6.9.0 เป็นต้นไป และ NPM 3 ก่อนนะครับ

 

หลังจากที่เรา install Angular CLI เรียบร้อยแล้ว เราก็มาสร้างโปรเจค Angular กัน โดยการใช้คำสั่ง

ng new [ชื่อแอพ]

เช่น สมมุติว่าเราต้องการสร้างแอพชื่อ my-app ก็พิมพ์คำสั่ง “ng new my-app”

 

แล้วเราก็รอ…

 

รอ…

 

รอแล้วรอเล่า…

 

จนมันทำงาน… สำเร็จ (อาจจะใช้เวลานาน 2-3 นาทีหรือมากกว่านั้น)

 

หลังจากนั้นก็เข้าไปที่โฟลเดอร์แอพของเรา (ในที่นี้ก็คือ “my-app”) โดยผ่านคำสั่ง “cd my-app” แล้วทำการรันแอพของเราผ่านคำสั่ง

ng serve

เพียงเท่านี้ถ้าคุณเข้าไปที่ http://localhost:4200 คุณก็จะพบกับหน้าตาเว็บสุด Minimal เช่นนี้

Minimal จริงๆ T^T

 

 

*Default port ของการรันจะเป็น port no. 4200 แต่สามารถเปลี่ยนได้โดยการรันด้วยคำสั่ง

ng serve –port [port no.]

 

ในที่สุดเราก็มีเว็บเป็นของตัวเองแล้วนะครับ แม้ว่าจะเอ่อ… ค่อนข้างเรียบง่ายไปหน่อยก็ตาม

ขอบคุณทุกๆท่านที่อ่านมาถึงตรงนี้ ตอนต่อไปจะเป็นเกี่ยวกับอะไร คงต้องรอติดตามชม

ไว้เจอกันใหม่ตอนหน้า สวัสดีครับ -/\-

 

ตอนถัดไป – มือใหม่หัดใช้ Angular ตอนที่ 2: การ install Bootstrap กับ Angular Material