เนื้อหาต่อเนื่องจากตอนที่ 1
เรียนรู้ ionicframework สร้าง hybrid mobile app ตอนที่ 1
https://www.ninenik.com/content.php?arti_id=521 via @ninenik
พูดคุย ก่อนเข้าเนื้อหา
เนื้อหาที่นำมาทำข้อมูล จะสังเกตว่าเป็นลักษณะของการทำตามตัวอย่าง
และเป็นการฝึกเขียน โดยเริ่มจาก 0 ของผู้เชียนเนื้อหาเอง คือกำลังศึกษาไปด้วย
เหตุผลที่ฝึกเขียนไปด้วยและ นำมาสร้างเนื้อไปด้วย เพราะต้องการย้ำความเข้าใจ
ของผู้เขียนเอง รวมทั้งแบ่งปัน เก็บเป็นข้อมูลไว้
โดยส่วนตัว ผู้เขียนเคยชอบที่จะอ่านและเข้าใจในสิ่งที่อ่าน แต่ไม่เคยลงมือทำ
ทำให้ไม่เกิดประสิทธิผล เช่น มองโค้ด ตามตัวอย่างต่างๆ อ่านไปเรื่อยๆ เข้าใจการทำงาน
แต่ไม่เคยลงมือทำ สุดท้ายก็คือว่างเปล่า ไม่ได้อะไรเลย ดังนั้น จึงย้ำว่า
สำหรับคนที่สนใจ ลองทำตาม หรือเรียนรู้ไปพร้อมกันได้ ยิ่งฝึกพิมพ์ จะยิ่งมอง
ภาพรวมออกง่ายขึ้น
เช้าเนื้อหา ต่อจากตอนที่ 1
ตัวอย่างผลลัพธ์ที่เราต้องการ แสดงตามด้านล่าง
ก่อนเริ่ม ขออธิบาย ส่วนของแท็ก สองส่วนนี้ในไฟล์ index.html จาก
ตอนที่ 1 คร่าวๆ ก่อน
- <html ng-app="myIonicApp"> ส่วนนี้กำหนด directive ng-app สำหรับใช้งาน angularjs
- <body ng-controller="myIonicHome"> ส่วนนี้สำหรับกำหนด directive ส่วนของจะจัดการ
เช่น เหตุการณ์ event การคลิก หรือการทำอะไรก็ตามในส่วนของ body ที่ angularjs เรียกใช้
หมายเหตุ สำหรับคนที่ไม่เข้าใจ หรือไม่รู้จัก angularjs สามารถศึกษาเพิ่มเติมในเว็บนี้ก็มี หรือ
ถ้าไม่ให้ การเรียนรู้ ionicframework สะดุด ก็ให้เข้าใจเพียงว่า มันคือ javascript ตัวหนึ่ง แค่นี้พอ
1. มาเริ่มต้นที่ส่วนแรก on-side-menus
ให้เข้าใจว่า ถ้าจะทำ mobile app ทีมี side muenus เราต้องใช้ โค้ด ต่อไปนี้
โดยโค้ดด้านล่าง ไม่ใช่แท็ก html ปกติ แต่เป็น directive ของ angurlarjs
ที่เราสามารถกำหนดรูปแบบเองได้ ซึ่งทาง ionicframework จะใช้แท็ก
<ion- ขึ้นต้นแบบนี้เป็น directive
รูปแบบแท็ก side menu แบบเต็ม จะมีแยก สามส่วนคือ ด้านซ้าย สำหรับ side menu ฝั่งซ้าย
ดรงกลาง สำหรับส่วนของเนื้อหา และ ด้านขวา สำหรับ side menu ด้านขวา
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ion-side-menus> <!-- Center content --> <ion-side-menu-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> </ion-side-menu> <!-- Right menu --> <ion-side-menu side="right"> </ion-side-menu></ion-side-menus> |
แต่ตัวอย่างเรา จะมีแค่สองส่วนคือ ด้านซ้าย และตรงกลาง ดังนั้นเราจะตัด ตัว ด้านขวาออก
มาวางในส่วนของ body ตามนี้เลย
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body ng-controller="myIonicHome"><ion-side-menus> <!-- Center content --> <ion-side-menu-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> </ion-side-menu></ion-side-menus></body> |
2. เราจะทำต่อในส่วนของ side menu ด้านซ้าย โดยจะเพิ่ม
header และ content เข้าไป
รูปแบบแท็กคือ header
1 2 3 | <ion-header-bar></ion-header-bar> |
รูปแบบ content
1 2 3 | <ion-content> </ion-content> |
โดย content ในเมนูด้านซ้าย เราจะไม่เพิ่มอะไรเข้าไป
ส่วน header เราจะใส่หัวข้อเข้าไป และกำหนด สีสัน ด้วย css
ใช้ class="bar bar-header bar-positive"
โดยแทรกโค้ดตามนี้ เข้าไปใน side menu ด้านซ้าย
1 2 3 4 5 6 7 8 9 | <!-- Left menu --><ion-side-menu side="left"> <ion-header-bar class="bar bar-header bar-positive"> <h1 class="title">bar-positive</h1> </ion-header-bar> <ion-content> </ion-content></ion-side-menu> |
3. เพิ่มในส่วนของ ตรงกลาง คือใน side-menu-content
ทำแบบเดียวกับ side-menu left จะได้ตามโค้ดด้านล่าง
1 2 3 4 5 6 7 8 9 | <!-- Center content --><ion-side-menu-content> <ion-header-bar class="bar bar-header bar-positive"> <h1 class="title">bar-positive</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> |
4. เพิ่มปุ่ม สำหรับเรียกแสดง side-menu ด้านซ้ายด้วยโค้ด
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
และเปลี่ยน title h1 ซักหน่อยเป็น My Home Ionic จะได้เป็น
1 2 3 4 5 6 7 8 9 10 | <!-- Center content --><ion-side-menu-content> <ion-header-bar class="bar bar-header bar-positive"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> <h1 class="title">My Home Ionic</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> |
อธิบายเพิ่มตรงปุ่ม
menu-toggle="left" ให้เข้าใจว่า เป็นส่วนที่ใช้ซ่อน หรือแสดง side-menu
class="button button-icon icon ion-navicon" สำหรับส่วนนี้ก็จะเป็นการกำหนด css class
ในที่นี้จะเป็นปุ่มรูปเส้นขีดแนวนอน โดยใช้ชื่อ ion-navicon
ดูเพิ่มเติมชื่อได้ที่ http://ionicons.com/
ก่อนไปต่อใน เรามาดูหน้าตา การแสดงผลก่อน เรียกใช้งาน angularjs เพื่อ complie
แท็ก directive กับหลัง เรียกใช้งาน
ตัวอย่าง ก่อนเรียกใช้งาน angularjs
จากตัวอย่างด้านบน จะเห็นว่า เนื่องจากเรายังไม่ได้เรียกใช้การจัดการ app ด้วย angularjs
ก็จะแสดงไม่สมบูรณ์ ตามรุปแสดงเฉพาะส่วนของ side-menu ด้านซ้าย
ต่อที่ขั้นตอนที่ 5
5. เรียกใช้งาน angularjs เพื่อสร้าง module จาก directive ng-app
<html ng-app="myIonicApp">
โดยให้ไปแก้ไขที่ไฟล์ app.js
โค้ดไฟล์ app.js แบบมีคำอธิบาย
1 2 3 4 5 6 7 | // สร้าง module ขึ้นมาชื่อ myIonicApp และเรียกใช้ ionic components angular.module('myIonicApp', ['ionic']) // อ้างอิงชื่อ module <html ng-app="myIonicApp">// กำหนดกิจกรรม หรือการกระทำทั้งในส่วนควบคุม <body ng-controller="myIonicHome">.controller('myIonicHome', function($scope) { // ส่งค่า scope เข้ามาใช้งาน // scope ก็คือ object ของ module มีลักษณะเลียนแบบตามรูปแบบของ DOM // หรือโครงส้ราง html }); |
โค้ดไฟล์ app.js
1 2 3 4 | angular.module('myIonicApp', ['ionic']).controller('myIonicHome', function($scope) { }); |
พอเรามีการเรียกใช้งาน javascirpt ทำให้ module ทำงาน ก็จะทำให้ side-menu และปุ่ม
กดซ่อนแสดง ท่ำงานได้ ตามตัวอย่างด้านล่าง
6. มาเพิ่มแท็บเมนูด้านล่าง ด้วยแท็กต่อไปนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="tabs tabs-icon-top"> <a class="tab-item" href="#"> <i class="icon ion-home"></i> Home </a> <a class="tab-item" href="#"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item" href="#"> <i class="icon ion-gear-a"></i> Settings </a></div> |
โดยจะเพิ่มต่อแท็ก </ion-content> ที่แสดงตรงส่วนกลาง
อันนี้เราเพิ่มดูการแสดงผล ไม่ได้ต่อยอด ทำอะไรต่อในตอนนี้
ผลที่ได้
7. ส่วนสุดท้าย ลองทดสอบ การใช้งาน angularjs กับการแสดง checkbox
โดยจะไปเพิ่ม model data ในไฟล์ app.js
ให้กับ scope เป็นชุดของ ข้อมูล arrays ที่เป็น object อีกที
1 2 3 4 5 6 7 8 9 10 | angular.module('myIonicApp', ['ionic']).controller('myIonicHome', function($scope) { $scope.listItem=[ {listtext:'List number 1'}, {listtext:'List number 2'}, {listtext:'List number 3'}, {listtext:'List number 4'} ]; }); |
listItem จะเป็น model ที่จะถูกเรียกใช้
จากนั้นที่ไฟล์ index.html เราจะเพิ่มโค้ดต่อไปนี้เข้าไปใน ส่วน ion-content ส่วนกลาง
เป็นลิสรายการ checkbox ตามโค้ดด้านล่าง
1 2 3 4 5 6 7 8 9 10 | <ion-content class="scroll-content ionic-scroll has-header"> <ul class="list"> <li class="item item-checkbox" ng-repeat="mylist in listItem"> <label class="checkbox"> <input type="checkbox"> </label> {{mylist.listtext}} </li> </ul> </ion-content> |
โค้ดพร้อมคำอธิบาย
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ำหนด class ให้กับ ion-content กรณี มี header--> <ion-content class="scroll-content ionic-scroll has-header"> <ul class="list"><!-- มีการใช้ directive ของ angularjs เพื่อวนลูปแสดงข้อมูล ด้วย ngRepeat ใน html จะเขียนเป็น ng-repeat ใช้ ng-repeat="mylist in listItem" โดยนำค่า medel listItem มาวนลูปแสดง อ้างอิงด้วยชื่อ mylist--> <li class="item item-checkbox" ng-repeat="mylist in listItem"> <label class="checkbox"> <input type="checkbox"> </label> <!-- แสดงข้อความของ model --> {{mylist.listtext}} </li> </ul> </ion-content> |
ตัวอย่าง เมื่อเสร็จแล้ว
ไฟล์ index.html ทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | <!DOCTYPE html><html ng-app="myIonicApp"> <head> <meta charset="utf-8" /><!-- เบอร์โทรทีแสดง กำหนดให้เป็นลิ้งค์ และกดโทรได้ กรณี ios ในที่นี้ เป็น no--> <meta name="format-detection" content="telephone=no" /><!-- กำหนดให้กดลิ้งค์ แล้วแสดง highlight ใน window phone ในที่นี้ เป็น no--> <meta name="msapplication-tap-highlight" content="no" /><!-- กำหนด การแสดงผลสำหรับมือถือ รายละเอียด ค้นหาเพิ่มเติมได้--> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><!-- เรียกใช้ css ionic--> <link href="css/ionic.css" rel="stylesheet"><!-- เรียกใช้งาน javascript ไฟล์นี้จะมีการรวมไปถึง angularjs ด้วย--> <script type="text/javascript" src="js/ionic.bundle.js"></script> <!-- ไฟล์ javascript ที่เราจะเขียนโค้ดเพิ่ม เพื่อใช้งาน --> <script type="text/javascript" src="app.js"></script> <title>MyIonicApp 1</title> </head> <body ng-controller="myIonicHome"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar bar-header bar-positive"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> <h1 class="title">My Home Ionic</h1> </ion-header-bar><!-- กำหนด class ให้กับ ion-content กรณี มี header--> <ion-content class="scroll-content ionic-scroll has-header"> <ul class="list"><!-- มีการใช้ directive ของ angularjs เพื่อวนลูปแสดงข้อมูล ด้วย ngRepeat ใน html จะเขียนเป็น ng-repeat ใช้ ng-repeat="mylist in listItem" โดยนำค่า medel listItem มาวนลูปแสดง อ้างอิงด้วยชื่อ mylist--> <li class="item item-checkbox" ng-repeat="mylist in listItem"> <label class="checkbox"> <input type="checkbox"> </label> <!-- แสดงข้อความของ model --> {{mylist.listtext}} </li> </ul> </ion-content> <div class="tabs tabs-icon-top"> <a class="tab-item" href="#"> <i class="icon ion-home"></i> Home </a> <a class="tab-item" href="#"> <i class="icon ion-star"></i> Favorites </a> <a class="tab-item" href="#"> <i class="icon ion-gear-a"></i> Settings </a> </div> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar bar-header bar-positive"> <h1 class="title">bar-positive</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu> </ion-side-menus> </body></html> |
ไฟล์ app.js ทั้งหมด
1 2 3 4 5 6 7 8 9 10 | angular.module('myIonicApp', ['ionic']).controller('myIonicHome', function($scope) { $scope.listItem=[ {listtext:'List number 1'}, {listtext:'List number 2'}, {listtext:'List number 3'}, {listtext:'List number 4'} ]; }); |
ขอจบเท่านี้ รอติดตาม เนื้อหาเพิ่มเติมต่อไป
เนื้อหาที่เกี่ยวข้อง