Angular 7 first basic app (ตอน 1)

เริ่มต้นการเตรียม environment และ start application ครั้งแรก REF

Prepare environment development

1. ทำการ Install NodeJS ซึ่งผมคงจะไม่พูดถึงนะครับ (How to install แต่ถ้าว่างๆจะรวบรวมให้นะครับ) โดยเราสามารถตรวจสอบ โดยใช้คำสั่ง

node -v 
output : v8.11.2

2. ทำการ Install Angular CLI โดยใช้ npm (Package management)

npm install -g @angular/cli

หลังจากนั้นเราลองใช้คำสั่ง ng --version จะแสดงผลตามภาพด้านล่าง

ซึ่งหลังจากเราทำ 2 Steps เรียบร้อยก็สามารถเริ่มต้นกับ Angular ได้แล้วครับ ^^

Create a new workspace and an initial application

ถึงเวลาสนุกแล้ว ..

Step : 1 เราจะเริ่มจากการสร้าง Project Angular โดยใช้ Angular CLI ผ่าน command

ng new angular-tour-of-heroes

โดยคำสั่งนี้จะเป็นการ สร้าง Project Angular ที่ชื่อ angular-tour-of-heroes โดย Angular CLI นั้นจะ Generate ตัวไฟล์ ที่ต้องการและ Project structure ให้ทั้งหมด

หลังจากเราทำการ run command แล้ว AngularCLI จะมีคำถามเกี่ยวการ config จำพวก Angular Router และ CSS เราสามารถตอบ ได้ตามรูปด้านล่างเลยครับ

หลังจากนั้น AngularCLI จะเริ่มทำการ Generate Project

หลังจากเราทำการ Create โปรเจคเรียบร้อย ก็จะสามารถทำการ run คำสั่งเพื่อทำการ Start Application ขอเราได้ทันที

ng serve --open

และเราก็จะได้ผลลัพธ์ตาม ภาพด้านล่างทันทีครับ โดย Application ของเรานั้นจะ run อยู่ที่ http://localhost:4200/

http://localhost:4200/

Project structure ที่ได้จากการ generate

เมื่อ run command ng serve — open ระบบจะทำการ auto refresh ทุกครั้งที่มีการแก้ไขข้อมูล ใน component ตัวอย่างถ้าเราทำการ แก้ไข title = ‘Tour of Heroes’; ใน file app.component.ts หน้า Web ก็จะทำการ refresh ในส่วนของ Title ตามรูปด้านล่าง

Step : 2 หลังจากนั้นเรามาเริ่มทำการแก้ไข Sourcecode ง่ายๆดังนี้

src\app\app.component.html

src\app\app.component.ts

src\styles.css

หลังจากการแก้ทุกอย่างเรียบร้อย Application ก็จะทำการ Refresh และแสดงตามรูป