Print
Details: Category: บทความ Angular | Published: 05 June 2018 | Hits: 6252

เริ่มจากการสร้าง โปรเจค Angular ก่อน

 

มาสเตอร์ ng new GetEventLearn1 (คอร์ส สอนตัวต่อตัว)

รอ Angular สร้างโปรเจคให้เรา

 

 

ได้มาละ โปรเจค Angular ต่อไป

พระเอกของเรา วันนี่มาสเตอร์ ใช้ WebStorm มาเป็น IDE น้องๆ เพื่อนๆ พี่ๆ ใช้ไม่เหมือน มาสเตอร์ ได้นะครับ เพระ แมวตัวไหน ? ก็จับหนูได้ครับ

Open

ไปที่ โฟวเตอร์ ที่มีโปรเจคของเราเลยครับ

ตอนเรา เปิดโปรเจค Angular รอนิดนะ ให้ Indexing จนเสร็จดีครับ

เย้ๆๆ ได้มาละ โครงสร้างที่เราสนใจมีดังนี่ (ตัวอืนไม่รู้ ก็ทำงานได้ครับ รู้เฉพาะ ที่เราจะใช้ ง่ายสุด) ไฟร์ ต่างๆ ที่อยู่ใน โฟวเตอร์ app นะ งานของเราครับ app.component.html จัดการหน้าเวป ครับ อยากให้ WebApp เราเป็นอย่างไร ? ที่นี่ครับ app.component.ts มาสเตอร์ เรียนว่า คลาสได้ ที่นี่จะเก็บพวกชุดคำสั่ง พูดง่ายๆ จะโปรแกรมอะไร ? ที่นี่เลยคร้บ

 

 ส่ิงแรกที่มาสเตอร์ จะทำ คือ ทดสอบโค้ด หรือ โปรเจค Angular ก่อนว่า รันได้หรือเปล่า ? มองที่ด้านล่าง จะเจอ Terminal

 

เหมือนที่เราเคยทำ เราจะ รันโค้ด Angular ต้องพิมพ์ คำสั่ง ng serve

Compiled successfully

เปิด Chrome เข้าไปที่ url http://localhost:4200 ถ้ามีรูปแบบนี่ ถือว่า โอเช เราสร้าง โปรเจค Angular ได้ละ (ถ้าไม่ได้ ลองไปดู การสร้างโปรเจค Angular จากที่นี่ได้ครับ)

ไปที่ app > app.component.html เปิดไฟร์ ที่ออกมา่อนเลยครับ

ลบทั้งหมด ctrl + s

 ที่ Browser จะแสดงความว่างเปล่าด้วย

กลับไปที่ app.component.ts หรือ ส่วนของ Script ต่างๆ

มาสเตอร์ สร้าง Function onClickNorma() โดยกำหนดว่า ถ้าคลิกให้ Alert PopUp ข้อความว่า  You Click

กลับมาที่ app.component.html มาสเตอร์ เพิ่ม แทค Button เข้าไปโดยกำหนด Event Click ให้ไปทำงานที่ Function onClickNormal แบบนี้

ลองคลิกที่ ปุ่ม Test Click Single

จะมี PopUp แสดงข้อความ You Click แบบนี้   

 มาสเอตร์ เปลี่ยนใหม่ จาก Alert มา เขียนข้อความใน Console log

ไปที่ Chrome มาสเตอร์ คลิกขวา เลือก Inspect

คลิกเลือก Console

และลองคลิก ดูจะเห็นข้อความ You Just Click Show on Console มาปรากฏบน Console ครับ น่าจะพอได้ไอเดียในการ Get Event จากการ คลิก บน Angular ครับ