Jaynarol Blog

Angular 2 : Template

Template คือชุดข้อมูลภาษา html ที่ใช้สำหรับแสดงผลบนหน้าเว็บ (เหมือนที่เราใช้เขียนเว็บกันตามปกติ)

แต่ที่แตกต่างคือ template ใน angular 2 จะมีขอบเขตการทำงานอยู่เฉพาะใน component ของมันเท่านั้น

เมื่อ component โดนเรียกใช้งาน template ที่อยู่ใน component นั้นก็จะถูกแสดงผลออกมาบนเว็บ

และถ้า component ถูกทำลาย html ของ template นั้นก็จะหายไปจากหน้าเว็บ

ดังนั้น Template จึงถือได้ว่าเป็นส่วนสำคัญที่มีหน้าที่ในการเชื่อมโยงการทำงานทุกอย่างที่เราสัมผัสได้

เช่น การแสดงผลข้อมูล การเรียกใช้งาน Component, Directive  การรับข้อมูลจากผู้ใช้ การตรวจจับการกระทำ(event)

แม้กระทั่งการส่งข้อมูลไปมาระหว่าง Component ด้วยกันเองครับ

 

การแสดงผลตัวแปร

ใน Template เราสามารถแทรกตัวแปรลงไปโดยตรงได้เลยโดยใช้ {{valname}} เช่น <p>Hi {{name}}</p>

 

การคำนวน

Template สามารถคำนวนข้อมูลได้โดยตรง เช่น 1+1 = {{1+1}}

และสามารถนำตัวแปรหรือ method มาคำนวนได้เช่นกัน

 

การใช้เงื่อนไข

Template สามารถใช้งานเงื่อนไข true / false ง่ายๆเพื่อช่วยในการแสดงผล {{show ? "yes" : "no"}}

 

การเปลี่ยนแปลงข้อมูลแบบ Dynamic

Template จะเปลี่ยนแปลงข้อมูลที่แสดงให้อัตโนมัติหากตัวแปรมีการเปลี่ยนแปลงค่า

** angular จะอัพเดท template ให้ต่อเมื่อมีการใช้ event เท่านั้นเพื่อไม่สร้างภาระให้กับเว็บ

 

ตัวแปรชั่วคราว

เราสามารถสร้างตัวแปรชั่วคราวใน Template เพื่อใช้สำหรับอ้างอิงได้ทันที ด้วยการใส่ #valname ใน tag

**ตัวแปรชั่วคราวคือตัวแปรที่สร้างขึ้นมาสำหรับใช้ใน template โดยเฉพาะ ไม่มีตัวตนใน Class ของ Component

 

เครื่องหมายต้องห้าม

แม้ว่าการใช้งานตัวแปรใน Template จะช่วยอำนวยความสะดวกอย่างมาก

แต่ก็มีข้อควรระวังในการใช้งานโดยต้องห้ามมีเครื่องหมายเหล่านี้ใน {{…}} ครับ

new
++ หรือ --
= หรือ += หรือ -=
; หรือ ,
| หรือ &

บางคนอาจสงสัยว่าแล้วเราจะทำงานการแสดงผลที่ซับซ้อนได้อย่างไร

ไม่ต้องห่วงครับ Angular ได้เตรียม Directive สำหรับมาจัดการงานด้านนี้โดยเฉพาะ

ส่วนรายละเอียดลึกๆจะอธิบายในหัวข้อต่อๆไปครับ

 

 

ปิดท้าย

บทความนี้คงช่วยให้เห็นภาพและคอนเซ็ปการใช้งานตัวแปรและการใช้ Template ในการแสดงผล

แต่ในการใช้งานจริงเว็บเราอาจมีความซับซ้อน เราจึงจำเป็นต้องรู้อีก 1 เรื่อง ซึ่งก็คือ Databinding

เพื่อใช้สำหรับการรับส่งข้อมูลจากผู้ใช้งานและระหว่าง Component กันเอง

เราจะมาลงรายละเอียดกันในหัวข้อหน้า รอติดตามนะครับ 🙂