ข้อดีของคนที่เกิดในยุคปลาย 90s คือ พวกเราได้เห็นการใช้อินเตอร์เน็ตมาตั้งแต่แรกเริ่ม เหมือนเติมโตไปพร้อมๆกับมัน เหมือนการดูหนังแฮรี่พอตเตอร์ และ /me โชคดีที่ได้ใช้คอมมาตั้งแต่เด็ก ทำให้ /me เห็นการเปลี่ยนแปลงของเวปไซท์ต่างๆ มาตั้งแต่ยุคหนึ่งที่ทุกคนใช้ plain HTML และ แท๊ก frame ในการสร้างเวป และเป็นยุคนั้นแค่มี marquee ทำแถบตัวอักษรวิ่งไปมาๆ ก็น่าตื่นเต้นแล้ว

ต่อมา โลกของเวปไซท์พัฒนา ค่อยๆมี Javascript เข้ามา เปลี่ยนไปเป็นยุคเฟื่องฟูของ jQuery แต่อย่างนั้นรูปแบบการเขียนเวปก็ยังคงเปลี่ยนแปลงไปอย่างต่อเนื่อง เราเริ่มละแนวคิดเดิมๆ ในการใส่ Event ลงใน DOM มาเป็นแนวคิดอื่นๆ อย่าง flux ใน React หรือ two-way binding ใน Angular

เนื่องในวันแรงงาน(01/05/2017) /me เลยถือโอกาสนี้ลองเขียนโปรเจคเล็กๆโดยใช้ new Angular พร้อมกับเขียนบล๊อคไปด้วย เพราะคิดว่า มันจะเป็นตัวบังคับให้ตัวเองเขียนโปรเจคจริงจังกับมัน 🙂

เนื้อหาทั้งหมดนี้ แปล(และดัดแปลงเล็กน้อย)จาก Official tutorial ตามลิงค์นี้เลยฮะ TUTORIAL: TOUR OF HEROES ภายใต้ License CC BY 4.0

Angular

ก่อนที่จะเริ่มโปรเจค /me อยากแนะนำให้รู้เป้าหมายของ tutorial กันก่อน

เจ้าแอพนี้ชื่อว่า “The Tour of Heroes” เป็นตัวอย่างที่เราจะสร้างกันในบล๊อคนี้ โดยมีฟีเจอร์สำคัญ 3 อย่าง คือ

* แสดงรายชื่อฮีโร่ (acquiring and displaying a list of heroes)

* แก้ไขข้อมูลรายละเอียดของฮีโร่ (editing a selected hero’s detail)

* เลือกเพื่อดูข้อมูลฮีโร่ (navigating among different views of heroic data)

และสิ่งที่เราต้องทำเพื่อให้ได้ฟีเจอร์ตามคือ

* ใช้ built-in directives เพ่ือแสดง/ซ่อน ส่วนประกอบต่างๆ และแสดงลิสฮีโร่ทั้งหมด

* สร้าง components เพื่อแสดงรายละเอียดของฮีโร่

* ใช้ one-way data binding สำหรับการแสดงข้อมูล

* ใช้ two-way data binding สำหรับข้อมูลที่สามารถแก้ไขได้

* ผูก user events ลงไปใน components

* สร้าง shared service

* และใช้ routing เพื่อไปยังหน้าต่างๆ

ดูเหมือนว่ามีงานที่ต้องทำ ไม่น้อยเลยทีเดียว สำหรับใครที่อยากทดสอบ สามารถกดดูได้ที่ลิงค์ live example

## กดที่ภาพเพื่อดูภาพเคลื่อนไหว ##

PS

เนื้อหาทั้งหมด จะแบ่งเป็น 7 ตอน
EP1. introduction
EP2. The Hero Editor
EP3. Master/Detail
EP4. Multiple Components
EP5. Services
EP6. Routing
EP7. HTTP
ตามดูโค้ดได้ที่ Github

Thank you

Angular.io บทความนี้อยู่ภายใต้ลิขสิทธิ์แบบ CC BY 4.0 สามารถก๊อปปี้/แก้ไข ได้ตามสบายเลย~

Tell your friend about thisShare on Facebook
Facebook
0Tweet about this on Twitter
Twitter
Share on Google+
Google+
0