Home / Developer  / Angularjs  / การใช้งาน ionic Framework ร่วมกับ AngularJS แสดง Card View

การใช้งาน ionic Framework ร่วมกับ AngularJS แสดง Card View

บทเรียนการเขียนโปรแกรมด้วย AngularJS ร่วมกับ ionic framework เบื้องต้นสำหรับการนำ CardView มาแสดงผลบนแอพพลิเคชันของเราให้เหมือน Facebook ทำงานร่วมกับ Json

บทเรียนก่อนหน้านี้: http://www.daydev.com/category/developer/angularjs

เป็นการทบทวนคำสั่งภาษา AngularJS และ ionic framework เบื้องต้นในการดึง Web Service ครับ โดยเราจะใช้ component ของตัว Card มาประยุคกับรูปแบบของ SideMenu Apps

ionic-card-1

ให้เราทำการสร้าง Project ขึ้นมาใหม่ครับ เปิด command dos ขึ้นมา

ionic-card-2

ionic-card-3

ให้ทำการ รันคำสั่งต่อไปนี้

cd xampp/htcs/ionic

ionic start {ชื่อแอพ} sidemenu

ionic-card-4

เมื่อสร้างเสร็จแล้ว รันคำสั่ง

ionic serve

เราจะได้รูปแบบตามนี้ครับ ให้เราเปิด Folder ตัว Project ของเราขึ้นมาครับ ไปที่ไฟล์ www/js/app.js แก้ไขบรรทัดสุดท้ายของแอพเราเป็นแบบนี้

ให้ Routers ของแอพฯ เวลารันแอพของเราชี้ default ไปที่ app/cardview ต่อมาให้เราเพิ่ม state เข้าไปเพิ่มเติมครับ ตำแหน่งไหนก็ได้ขอให้อยู่ในคำสั่ง

โดยเพิ่มว่า

ให้เราสร้าง Router ไปที่ cardview โดยไปเรียกไฟล์ cardview.html ที่อยู่ใน Folder ชื่อ template สร้าง controller ขึ้นมาว่า CardViewCtrl

ไปที่ไฟล์ controller.js ในโฟลเดอร์ js ครับ เพิ่มคำสั่งนี้ลงไป ในกลุ่มของ controller ตรงไหนก็ได้

สุดท้ายก็ไปสร้าง template ขึ้นมาครับ ตั้งชื่อว่า cardview.html ใส่ code เหมือนตัวอย่าง playlists.html ไปก่อนก็ได้

ลอง Preview ดูครับ

ionic-card-5

ไปเพิ่ม array ตัวแปร json ในไฟล์ controller.js ใน โฟลเดอร์ js ครับ แก้ในส่วนของ CardviewCtrl ดังนี้

ผมใส่ Key Value ตัวอย่างไป 4 ชุดประกอบไปด้วย id, title และ thumbnail เก็บใน Scope ที่ชื่อว่า movies ดังนั้นเราต้องกลับมาที่ไฟล์ templates/cardview.html เพื่อแก้ไข code การวน loop ตามนี้

ใช้ ng-repeat ไปสน scope ชื่อ movies เก็บค่าทีละชุดมาไว้ใน item แล้ว แสดงผล title ออกมาผ่าน {{item.title}}

ionic-card-6

เอาล่ะต่อไปเรามาประยุคใช้ Cards บน ionic กันดีกว่าแก้ไข template/carview.html ตามนี้ครับ

ส่วนของรูป Profile ของผมผมไปหารูปส่วนตัวจากบน Google มาใส่เป็น URL ไป ทีนี้เรามาแสดงผลแอพเราดูกันหน่อยครับ

ionic-card-7

ขั้นตอนต่อไปคิดว่าน่าจะเป็นการบ้านสำหรับผู้อ่าน ลองประยุกต์ดูจากบทเรียนนี้ดูครับ

แล้วเดี๋ยวผมจะมาเฉลยในบทความถัดไป สวัสดีครับ

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.