Angular 7 first basic app (ตอน 1)
เริ่มต้นการเตรียม environment และ start application ครั้งแรก REF
Prepare environment development
- ทำการ 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/
เมื่อ run command ng serve — open ระบบจะทำการ auto refresh ทุกครั้งที่มีการแก้ไขข้อมูล ใน component ตัวอย่างถ้าเราทำการ แก้ไข title = ‘Tour of Heroes’; ใน file app.component.ts หน้า Web ก็จะทำการ refresh ในส่วนของ Title ตามรูปด้านล่าง
Step : 2 หลังจากนั้นเรามาเริ่มทำการแก้ไข Sourcecode ง่ายๆดังนี้
หลังจากการแก้ทุกอย่างเรียบร้อย Application ก็จะทำการ Refresh และแสดงตามรูป