หลังจากที่เราได้ดู code กันไปแล้ว ทีนี้มาดูภาพที่ผมวาดขึ้นเอง (จากความคิดในตอนนี้) กันบ้าง และนี่คือสิ่งที่ผมเข้าใจครับ
คิดตามผมนะ ปกติแล้วหน้าเว็บหนึ่งหน้าสามารถเขียน html css และ javascript ลงไปได้เลย แบบรูปด้านล่าง
และเมื่อเราพยายามแยกมันทั้งหมดออกจากกัน กลับได้ว่า ส่วนแสดงผลแท้จริงต้องการสองอย่าง ได้แก่ html กับ css และส่วนข้อมูลคือ javascript
ฉะนั้นเรียก html + css ว่า view และเรียก javascript ว่า model ครับ
Angular framework ก็จัดการสองส่วนนี้ มันจึงเป็น MV* แบบนี้ไง
เพื่อนๆควรทราบว่าคลาสใน angular แท้จริงเป็น service โดยธรรมชาติ (ตอนนี้หากไม่ทราบความหมายของ service ก็ไม่เป็นไร อ่านผ่านๆไปก่อน ความหมายอย่างกว้างของมันก็คือคลาสบริการเกี่ยวกับข้อมูล) จากคลาสธรรมดาที่ไม่มีหน้าตาเป็นของตัวเองก็จะมีหน้าตาเป็นของตัวเองได้เมื่อเรากำหนด @Component ให้กับมัน นั่นหมายความว่า model ก็จะรวมกับ view และเรียกตัวเองเสียใหม่ว่า component
angular จึงประกอบแต่ละ component ขึ้นเป็นหน้าเว็บ แอปที่มีเพียงหนึ่งหน้าเว็บแล้วใช้หลักการเปลี่ยนแปลง content เฉพาะส่วนถูกเรียกว่า single page application ครับ
ทีนี้เวลาจะวาดหน้าตาให้กับ component ส่วนนี้จะถูกเรียกว่า template ดังรูป
และเพื่อให้ส่วน template นี้มีความเป็นมิตรกับสมาร์ทโฟน แถมยังให้ความรู้สึกดั่งได้เล่น app ที่เขียนด้วยภาษาและให้รูปลักษณ์เช่นเดียวกับชนิดของระบบปฏิบัติการของสมาร์ทโฟนนั้นๆ น้อง ionic จึงอาสารับงานนี้ไปทำแทนพี่ angular
***หมายเหตุ ถ้าผมพูดถึง angular ก็หมายถึง angular เวอร์ชัน 2 เช่นเดียวกัน ionic ก็หมายถึง ionic เวอร์ชัน 2 ด้วย
งานนี้ ionic framework อาสารับไปจัดการส่วน view ให้
และนี่ก็คือภาพรวม เมื่อ ionic ต้องการติดต่อไปยังตัวระบบปฏิบัติการของสมาร์ทโฟน มันก็จะทำผ่าน cordova framework อีกที
ก็หวังว่าภาพประกอบนี้จะช่วยให้เพื่อนๆเข้าใจมากขึ้นนะครับ ผมเองก็อ่านเอาจากหลายสำนักแล้วนำมาสรุปเป็นสิ่งที่ตนเองเข้าใจ มีทั้งที่จำได้และลืมไปแล้ว และต่อไปเราจะมาลงรายละเอียดในแต่ละส่วนให้มากขึ้น ขอบคุณที่ติดตามครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น