ต่อจากตอนที่ 2 สำหรับใครที่พึ่งเริ่มต้นสามารถติดตามโค้ดได้ที่ Github

หลังจากที่ได้โครงร่างคร่าวๆของ application แล้ว ถึงเวลาที่เราจะ implement Hero แต่ละคนอย่างจริงๆจังๆสักที

แต่ก่อนอื่น อย่าลืมเตือนตัวเองให้รัน npm start ไว้เสมอ เพื่อให้มันจัดการงานจุบจิบๆ โดยเฉพาะ transpiling เปลี่ยนโค้ด ts ไปเป็น js ที่สามารถรันได้ใน browser

Displaying heroes

เป้าหมายแรกในตอนที่ 3 นี้ คือ การแสดงรายชื่อฮีโร่แต่ละคน ดังนั้นสิ่งแรกที่เราต้องการ คือ สร้างฮีโร่ขึ้นมาเพื่อใช้สำหรับทดสอบโค้ด

เริ่มต้นด้วยการสร้างค่าคงที่ HEROS มีชนิดเป็น array ของ Hero ใน

แล้วก็ประกาศตัวแปรใน AppComponent เพื่อกำหนดให้มีค่าเท่ากับ HEROS

หลังจากนั้น ก็กำหนดพื้นที่สำหรับแสดงรายชื่อฮีโร่ใน template

และสุดท้าย คือการสร้าง for-loop ที่ <li> เพื่อแสดงรายละเอียดของแต่ละคน

สำหรับ for-loop นี้ สำหรับคนที่คุ้นเคยกับ angular1 อาจจะงงๆไปบ้าง เดิมเราใช้ ng-repeat แต่ต้องเปลี่ยนมาใช้ ngFor

แต่ทั้งนี้ จุดเปลี่ยนสำคัญที่ละเลยไปไม่ได้ คือ การเพิ่มสัญลักษณ์ * เพราะมีการเปลี่ยนแปลงโครงสร้างพื้นฐานในตัว angular พอสมควร หนึ่งในนั้น คือ การเปลี่ยนการใช้ directive (custom attrbute/tag ที่เราสร้างขึ้นโดยใช้ angular.. เดี๋ยวจะมีอธิบายเพิ่มเติมใน ep หลังๆ) เป็นการใช้ผ่าน สิ่งที่เรียกว่า template

แต่ เนื่องจาก angular ไม่อยากให้เราต้องเปลี่ยนแปลงความคิดมากนัก จึงสร้าง * เป็น short term สำหรับการใช้ template และคงให้มีการใช้ directive คล้ายๆกับรูปแบบเดิมใน angular1

เพิ่มเต้ม : What is the meaning of * in *ngFor in angular2?

Style the heroes

ต่อมาคือการใส่ css style เพื่อทำให้รายชื่อฮีโร่ของเราดูสวยงามมากขึ้น ทั้งนี้ angular อำนวยความสะดวก โดยอนุญาตให้เราสามารถเขียน css ลงใน component ได้ทันที โดยไม่จำเป็นต้องใช้ <link> หรือ <style> อีกต่อไป

การเขียน styles ลงใน component แบบนี้ทำให้เราสามารถออกแบบ style ให้กับแต่ละ element ได้โดยที่มันจะไม่กระทบกับ element ที่อยู่ภายนอก

ถึงแม้ว่า การเพิ่ม styles จะมีข้อดี แต่มันมักทำให้ไฟล์ app/app.component.ts มีขนาดใหญ่ขึ้นมากมาย แต่ไม่ต้องกังวล เพราะในบทต่อๆไปเราจะแยกมันออกเป็นหลายๆไฟล์

Selecting a hero

ต่อมา เราจะทำการเชื่อมต่อข้อมูลระหว่าง รายชื่อฮีโร่และส่วนที่แสดงรายละเอียดที่เราทำไปแล้วในตอนที่ 2

เป้าหมายของเรา คือ ทุกครั้งที่เราเลือกรายชื่อฮีโร่ เราจะเห็นรายละเอียดของฮีโร่คนนั้นไปด้วยพร้อมๆกัน

ดังนั้นจุดๆแรก คือ การเริ่มสร้าง event handler เพื่อรับ event click ดังนี้

โดย (click) หมายถึงการรอรับ event ที่ชื่อว่า click เมื่อมี click เกิดขึ้นที่ li นี้ ระบบจะไปเรียก function onSelect(hero) ที่อยู่ใน Component

ต่อมาคือ การไปสร้าง onSelect(hero) ใน AppComponent เพื่อรองรับ event click ที่จะเกิดขึ้น และเปลี่ยนตัวแปร hero ที่เราไม่ใช้แล้ว ไปเป็น selectedHero

* selectedHero กำหนด type เป็น Hero
* onSelect รับ parameter 1 ตัวแปรที่มี type เป็น Hero และ return type void (ไม่ return อะไรเลย)

และสุดท้าย คือเปลี่ยนตัวแปร hero ที่อยู่ใน view ไปเป็น selectedHero

จากนั้นก็กลับไปดู Tour of Heroes ที่น่าภูมิใจของเรากันอีกครั้ง
แต่ แต่ แต่ ดูเหมือนว่ามันจะพังไม่เป็นท่า

เพราะว่า ในตอนที่เริ่มต้น ตัวแปร selectedHero มีค่าเป็น undefined ทำให้ angular ไม่สามารถยืนหยัดต่อไปได้ เนื่องจาก angular เริ่มสนใจในการเป็น strong type มากขึ้น เมื่อมีตัวแปรที่ให้ค่าไม่ตรงกับที่ต้องการ ระบบจะแจ้งออกมาเป็น error เพื่อลดปัญหา null value แล้วทำให้ส่วนอื่นๆบั๊ค โดยที่เราไม่รู้ตัว (แต่ใน angular1 จะไม่มีเหตุการณ์นี้)

เพื่อแก้ไขเหตุการณ์นี้ เราแก้ง่ายๆโดยการเพิ่ม ngIf เพื่อเช็ค value ก่อน ดังนี้

และด้วยเหตุผลเดิม เราจำเป็นต้องใส่ * หน้า ngIf

Style the selected hero

สุดท้าย เพื่อเป็นการเสริมสร้าง UX ที่ดี เราจะเพิ่ม css class ลงไปให้กับ li เพื่อระบุว่า ฮีโร่ที่เรากำลังสนใจ

ทั้งนี้ ในช่วงที่เราใส่ style ให้กับ รายชื่อฮีโร่ไปแล้ว เราได้สร้าง .selected เป็น style สำหรับ selectedHero ดังนั้นงานสุดท้ายก็แค่การใส่ .selected เข้าไปให้ li ที่ถูกต้อง โดยระบุด้วย [class.selected]=”boolean”

** พึงระวังว่า หลังจากนี้เพื่อเป็นการ keep convention ที่ดี เราจะใช้ === แทน == เพราะ ฟีเจอร์ที่แสนน่ารักของ javascript ที่จะแปลง type ไปมาๆให้อัตโนมัติ ทำให้หลายๆครั้งเรามักเจอ []==false, “1”==1, NaN!=false บลาๆ ซึ่งสิ่งเหล่านี้มักทำให้เกิดบั๊คได้โดยที่เราไม่รู้ตัว

และขอจบตอนที่ 3 ไว้แต่เพียงเท่านี้ 🙂

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