ศึกษาและใช้งาน ionic material จาก demo เบื้องต้น
05 April 2016 By Ninenik Narkdeeionicmaterial ionicframework
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicmaterial ionicframework
ไปที่
Copy
เนื้อหานี้เราจะกลับมาศึกษาการใช้งาน ionicframework ผ่าน demo ของ
ionicmaterial โดยสามารถเข้าไปโหลดไฟล์ได้ที่ http://ionicmaterial.com/
ionicmaterial จะช่วยให้การเขียน app ของเราสะดวกและง่ายขึ้น ทำให้ใช้งานรูปแบบ
material design ได้ง่ายในขั้นตอนที่ไม่ยุ่งยาก และเราสามารถนำไปประยุกต์ใช้งานได้
สำหรับวิธีการใช้นั้นจะไม่ค่อยมีรายละเอียดมากนัก หากโหลดไฟล์จากเว็บไซต์ http://ionicmaterial.com/
ในนั้นจะมีตัวอย่าง ในโฟลเดอร์ demo และคู่มือการใช้งานในโฟลเดอร์ docs
รูปแบบการใช้งานก็จะมาจาก ionicframework
ดาวน์โหลดเฉพาะส่วนตัวอย่างของ ionicmaterial ได้ที่นี่
ตัวอย่าง
มาดูโค้ดตัวอย่างของไฟล์เริ่มต้นไฟล์ index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title></title>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet">
<link href="lib/ionic-material/dist/ionic.material.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>
<script src="lib/ion-md-input/js/ion-md-input.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
จากโค้ดด้านบน เราจะเห็นว่ามีการใช้งาน ionic-nav-view ในการดึงข้อมูลส่วนต่างๆมาแสดง
มีการกำหนด directive ng-app ไว้ในส่วนของ body นั้นก็คือ ส่วนของ body จะเป็น rootScope ของ
angular สำหรับส่วนอื่นๆ ใน header ส่วนใหญ่ก็จะเป้นการ เรียกใช้ไฟล์ที่จำเป็นต้องมีการใช้งาน
จะมีส่วนที่เราจะปรับแต่งก็มี css ที่ใช้สำหรับกำหนด style เพิ่มเติม
<link href="css/style.css" rel="stylesheet">
ต่อมาก็ส่วนของ cordova ส่วนนี้จะเป้นส่วนหรับการเชื่อมต่อกับคำสั่งและการทำงานกับมือถือ
หรือเครื่องที่รัน apps ที่เราสร้าง รวมถึงส่วนสำหรับสร้างไฟล์ apps เพื่อไปใช้งาน ซึงในส่วนนี้
เราจะยังไม่ได้ใช้
<script src="cordova.js"></script>
และต่อไปส่วนสำคัญก็คือส่วนของ โค้ดคำสั่งที่ใช้ใน apps ของเรา
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
ไฟล์ app.js และ controllers.js จะเป็นไฟล์ที่เราจัดการคำสั่งต่างๆ ที่ต้องการใน app
โครงสร้างไฟล์ demo ที่เราจะศึกษารูปแบบการเขียนโค้ด
รอติดตามเนื้อหาลำดับต่อไป
อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
กำลังอ่านเนื้อหานี้อยู่05 Apr2016ศึกษาและใช้งาน ionic material จาก demo เบื้องต้น อ่าน 3,455
พิเศษ เฉพาะสมาชิก เนื้อหานี้เราจะกลับมาศึกษาการใช้งาน ionicframework ผ่าน demo ของ ionicmat
-
08 Apr2016ionic material ศึกษาจาก demo เข้าใจการทำงานของ state ตอนที่ 1 อ่าน 2,935
พิเศษ เฉพาะสมาชิก เนื้อหานี้ต่อจากตอนที่แล้ว ศึกษาและใช้งาน ionic material จาก demo เบื้องต
-
09 Apr2016ionic material ภาคต่อ การทำงานของ state และ template ตอนที่ 2 อ่าน 2,309
พิเศษ เฉพาะสมาชิก ต่อจากเนื้อหาบทความ ionic material ศึกษาจาก demo เข้าใจการทำงานของ state
-
10 Apr2016ionic material ศึกษาจาก demo การทำงานของ controller ตอนที่ 3 อ่าน 3,194
พิเศษ เฉพาะสมาชิก จากที่เราได้ดูในส่วนของไฟล์ app.js ของไฟล์ demo ของ ionic material และทำค
Tags::
ionicmaterial
ionicframework
เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก
กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ
ยังไม่เป็นสมาชิก
สมาชิกล็อกอิน
สมาชิกล็อกอิน
หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook
URL สำหรับอ้างอิง
Top
Copy