Home / Developer  / Angularjs  / AngularJS การใช้ ng-include และปรับสไตล์ด้วย MDL (Material Design Lite)

AngularJS การใช้ ng-include และปรับสไตล์ด้วย MDL (Material Design Lite)

รอบนี้จะเป็นการนำคำสั่ง ng-include มาใช้ร่วมกับ AngularJS ครับ เพียงแค่จะเปลี่ยนเรื่องของ Layout เล็กน้อยเพราะเอา MDL  (Material Design Lite) มาปรับแต่งกัน

ก่อนอื่นให้เราไปดาวน์โหลด MDL ของ Google Developes กันครับที่

http://www.getmdl.io/started/index.html

เลือกแบบดาวน์โหลดมาเก็บไว้ในงานของเราก็ได้ครับ

mdl1

การใช้งานผมว่ามันง่ายมาก Class ต่างๆ JS ต่างๆ ศึกษาในเว็บเค้านั่นแหละ คงไม่ยากเกินพยายาม

ต่อมาเราจะสร้าง SPA โดย AngularJS กันแล้วครับ หากยังไม่เข้าใจการทำงานไปศึกษาบทความก่อนหน้าที่นี่ได้ครับ

ให้เราสร้างหน้าใหม่ขึ้นมาเป็น View ชื่อว่า Sample.html ประกาศ ng-app = “sampleModules” และ ng-controller = “sampleController” พร้อมสร้างไฟล์ controller ใน controller/sample.js ให้เรียบร้อยครับ

เพียงแค่เพิ่มในส่วนของ MDL เข้าไปเล็กน้อย

Code html หน้า view “sample.html” จะเป็นดังนี้ครับ

ทดสอบดูหน่อยแล้วกัน

หน้า Sample.html

หน้า Sample.html

กดเมนูด้านบนซ้าย

กดเมนูด้านบนซ้าย

ส่วน controller ไฟล์ sample.js นั้นเป็น Code ดังนี้

ต่อมาให้เราสร้างไฟล์ view ใหม่มาอีกตัวชื่อ “dataTable.html” ครับ แนบส่วนของ <table> และ ng-repeat ไปในนี้เลยครับ

เสร็จแล้วให้ไปเพิ่มการใช้งาน ng-include ที่ไฟล์ Sample.html ดังนี้ในส่วนของ <main>

ทดสอบหน้า SPA ของเราหน่อย

สวยงาม มาดแมน

สวยงาม มาดแมน

ต่อมาให้สร้างหน้า View เพิ่มเข้ามาคือส่วนของ Form ที่จะให้กรอกข้อมูล หรือ แก้ไขข้อมูล ตั้งชื่อ  view ว่า “form.html” ครับ

โดยเพิ่มการทำงานรอไว้ก่อนคือ การใช้ ng-show, ng-hide ไว้เป็นเงื่อนไขเปลี่ยน status ของการทำงานในหน้า ให้เลือกว่าโชว์อยู่ก็ซ่อน ถ้าซ่อนอยู่ก็จะโชว์ครับ

ไปที่ไฟล์ Sample.html ไปเขียนคำสั่ง ng-include เพิ่มที่ <main> ต่อว่า

เราจะได้ หน้า form มา include ดังนี้

สวยงามเลย

สวยงามเลย

ให้เราไปที่ไฟล์ controller/sample.js ครับ เพิ่มคำสั่งนี้เข้าไป

เป็นการกำหนด action เมื่อคลิกที่ปุ่ม edit บน table ครับจะทำการเรียกฟังก์ชัน editdata() โดยส่งค่า user.id ตามมาเช็ค แต่ใน $scope ของ edit (ชื่อ ng-show และ ng-hide) จะมีการเปลี่ยนเป็น true false มีผลที่หน้า view ครับ

ทดสอบหน่อย

กดแก้ไข จะมีการเปลี่ยน <h2> ที่ form

กดแก้ไข จะมีการเปลี่ยน H2 ที่ form

ทำการเพิ่มส่วนของ ตัวแปร $scope ลงไปใน sample.js เป็นค่าเริ่มต้น

ตามด้วยการ เก็บ ค่า $scope มา Binding เมื่อกด editdata จาก table

ทดสอบอีกครั้งกด Edit บน ตาราง ฟอร์มข้างล่างจะมีค่าให้แก้ไข

AngularJS-6

หลังจากนั้นก็ไปเอาบทเรียนที่สอนไว้ครับ บทเรียนเกี่ยวกับ

มาประยุคใช้ก็เป็นอันจบ ไม่ยากอะไรสำหรับบทเรียนนี้นะครับ สงสัยอะไรทักกันที่ http://www.facebook.com/daydevthailand

Comments

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.