ศึกษาและใช้งาน ionic material จาก demo เบื้องต้น

05 April 2016 By Ninenik Narkdee

ionicframework ionicmaterial

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicframework ionicmaterial

เนื้อหานี้เราจะกลับมาศึกษาการใช้งาน ionicframework ผ่าน demo ของ

ionicmaterial โดยสามารถเข้าไปโหลดไฟล์ได้ที่ http://ionicmaterial.com/

ionicmaterial จะช่วยให้การเขียน app ของเราสะดวกและง่ายขึ้น ทำให้ใช้งานรูปแบบ

material design ได้ง่ายในขั้นตอนที่ไม่ยุ่งยาก และเราสามารถนำไปประยุกต์ใช้งานได้

สำหรับวิธีการใช้นั้นจะไม่ค่อยมีรายละเอียดมากนัก หากโหลดไฟล์จากเว็บไซต์ http://ionicmaterial.com/

ในนั้นจะมีตัวอย่าง ในโฟลเดอร์ demo และคู่มือการใช้งานในโฟลเดอร์ docs

รูปแบบการใช้งานก็จะมาจาก ionicframework

http://ionicframework.com/docs/components/

ดาวน์โหลดเฉพาะส่วนตัวอย่างของ ionicmaterial ได้ที่นี่

http://www.ninenik.com/download/temp_ionicmaterial.rar

ตัวอย่าง

มาดูโค้ดตัวอย่างของไฟล์เริ่มต้นไฟล์ 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 Apr
2016

ศึกษาและใช้งาน ionic material จาก demo เบื้องต้น อ่าน 4,008
พิเศษ เฉพาะสมาชิก เนื้อหานี้เราจะกลับมาศึกษาการใช้งาน ionicframework ผ่าน demo ของ ionicmat
08 Apr
2016

ionic material ศึกษาจาก demo เข้าใจการทำงานของ state ตอนที่ 1 อ่าน 3,422
พิเศษ เฉพาะสมาชิก เนื้อหานี้ต่อจากตอนที่แล้ว ศึกษาและใช้งาน ionic material จาก demo เบื้องต
09 Apr
2016

ionic material ภาคต่อ การทำงานของ state และ template ตอนที่ 2 อ่าน 2,698
พิเศษ เฉพาะสมาชิก ต่อจากเนื้อหาบทความ ionic material ศึกษาจาก demo เข้าใจการทำงานของ state
10 Apr
2016

ionic material ศึกษาจาก demo การทำงานของ controller ตอนที่ 3 อ่าน 3,710
พิเศษ เฉพาะสมาชิก จากที่เราได้ดูในส่วนของไฟล์ app.js ของไฟล์ demo ของ ionic material และทำค

Tags:: ionicmaterial ionicframework

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน

หริอ ล็อกอิน ด้วย Facebook

URL สำหรับอ้างอิง

เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ