เนื้อหาตอนนี้ จะมาดูวิธีการเรียกใช้งาน template หรือการสร้างหน้า app ที่ต้องการด้วย
template เนื้อหาจะขอกระชับ บางส่วน จะไม่อธิบาย ให้ย้อนไปดูตัวอย่างของ
บทความในหมวดก่อนหน้า
เพิ่มเติม ในการใช้ angularjs ปกติจะทำการ inject หรือ เรียกใช้ sevice ต่าง
ในรูปแบบนี้
angular.module("myIonicApp2", ["ionic"])
.controller("myIonicHome",["$scope",function($scope){
}]);
แต่จะขอใช้เป็นแบบสั้นแทน เป็นแบบ ด้านล่าง
angular.module("myIonicApp2", ["ionic"])
.controller("myIonicHome",function($scope){
});
สำหรับใครเพิ่งเข้ามาอ่าน ให้ดูโครงสร้างไฟล์ที่เกียวข้องจากบทความตอนที่ 1
เรียนรู้ ionicframework สร้าง hybrid mobile app ตอนที่ 1
https://www.ninenik.com/content.php?arti_id=521 via @ninenik
โครงสร้างไฟล์และโฟลเดอร์เริ่มต้น
- \css
- \fonts
- \js
- index.html
- app.js
ในตอนนี้จะมีโฟลเดอร์และไฟล์ 3 ไฟล์เข้ามา
- \tpl\welcome.html
- \tpl\aboutus.html
- \tpl\contactus.html
1. สเต็บแรก ไฟล์ index.html
app เราจะมี sidemenu ด้านซ้าย เพื่อลิ้งค์ไปดึงไฟล์ template มาแสดง
<!DOCTYPE html>
<html ng-app="myIonicApp3">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="js/ionic.bundle.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>My Ionic 3</title>
</head>
<body ng-controller="myIonicHome">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header bar-assertive">
</ion-nav-bar>
<ion-nav-view animation="slide-in-up">
</ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<!-- ส่วนของเนื้อหาเมนูด้านซ้าย -->
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
เนื่องจากเราจะมีการใช้งาน template ถ้าใน angularjs ก็จะมีการใช้าน ngView directive
แต่สำหรับ ใน ionicframework จะคล้ายๆ กัน แต่ใช้เป็น ionic-nav-view แทน
สำหรับ ion-nav-bar จะเป็นส่วนสำหรับให้ใช้กำหนด header ที่อ้างอิงจากไฟล์ template
รายละเอียดจะอธิบายในตอนหน้า
<ion-nav-bar class="bar bar-header bar-assertive"> <!-- การกำหนด header จะมาแสดงในส่วนนี้แทน--> </ion-nav-bar>
<ion-nav-view animation="slide-in-up"> <!--เนื้อหาใน template จะถูกโหลดมาไว้ในส่วนนี้--> </ion-nav-view>
directive animation มีให้เลือกว่าจะให้มีการเปลี่ยนหน้า templates แบบไหน
ดูรายการ ทั้งหมดได้ที่
2. ไฟล์ templates ทั้ง 3 ไฟล์ ในโฟลเดอร์ tpl
เนื่องจากรูปแบบการใช้งาน templates เมื่อมีการกำหนด ion-nav-bar และ ion-nav-view
ในไฟล์ หลัก index.html ดังนั้นในไฟล์ templates จะมีการกำหนด ส่วนดังต่อไปนี้เพิ่มเติม
รายละเอียดแบบเต็มจะอธิบายในตอนหน้า
<ion-nav-buttons></ion-nav-buttons>
<ion-view></ion-view>
ไฟล์ welcome.html
จะมีในส่วนของการกำนหด header หัวข้อ ปุ่มแสดง เมนูปด้านซ้าย และก็ส่วนของเนื้อหา
<ion-view title="My Ionic 3">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>Welcome</h2>
<p>
This is welcome.html template
</p>
</div>
</div>
</ion-content>
</ion-view>
ไฟล์ aboutus.html
จะมีในส่วนของการกำนหด header หัวข้อ ปุ่มแสดง เมนูปด้านซ้าย ปุ่มกลับหน้า home และก็ส่วนของเนื้อหา
<ion-view title="About Us">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-nav-buttons>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>About Us</h2>
<p>
This is aboutus.html template
</p>
</div>
</div>
</ion-content>
</ion-view>
ไฟล์ contactus.html
จะมีในส่วนของการกำนหด header หัวข้อ ปุ่มแสดง เมนูปด้านซ้าย ปุ่มกลับหน้า home และก็ส่วนของเนื้อหา
<ion-view title="Contact Us">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a nav-clear href="#/" class="button button-icon icon ion-home"></a>
</ion-nav-buttons>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-body">
<h2>Contacuts</h2>
<p>
This is contactus.html template
</p>
</div>
</div>
</ion-content>
</ion-view>
3. ไฟล์ app.js
คำอธิบายแสดงในโค้ด
angular.module("myIonicApp3", ["ionic"]) // สร้าง module และเรียกใช้งาน ionic
// ตั้งค่า provider สำหรับใช้งาน ngRoute service ใน ionic จะใช้ชื่อใหม่
// ต่างจาก angurlarjs แต่รูปแบบจะคล้ายๆ กัน
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('intro', { // กำหนดชื่อ ว่าเราอยู่ในส่วนใหน (อธิบายเพิ่มทีหลัง) กำหนดอะไรก็ได้ที่ให้เราเข้าใจ
url: '/', // ถ้าลิ้งไปที่ url /
templateUrl: 'tpl/welcome.html', // ให้ไปเรียกไฟล์ welcome.html มาแสดง
controller: 'welcomeCtrl' // พร้อมสร้าง controller ชื่อ myIonicHome
})
.state('aboutus', { // อย่างอันนี้ กำหนดว่า state ชื่อ aboutus เหมือนสื่อเราอยู่หน้า about us
url: '/aboutus', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
templateUrl: 'tpl/aboutus.html', // รูปแบบเคำอธิบายเหมือนด้านบน แค่เปลี่ยนชื่อ หรือค่า
controller: 'aboutusCtrl'
})
.state('contactus', { // ในตอนนี้เข้าใจเพียงว่า กำหนดชื่อให้สัมพันธ์กับส่วนที่ใช้งาน ชื่ออะไรก็ได้
url: '/contactus',
templateUrl: 'tpl/contactus.html',
controller: 'contactusCtrl'
})
$urlRouterProvider.otherwise("/"); // กรณีอื่นๆ ให้ url อ้างอิง เท่ากับ / หรือหน้าแรก
})
// ส่วนจัดการ controller ต่างๆ
.controller("welcomeCtrl",function($scope){
})
.controller("aboutusCtrl",function($scope){
})
.controller("contactusCtrl",function($scope){
})
.controller("myIonicHome",function($scope){
});
สังเกตว่า เหมือนจะไม่มีการ inject หรือเรียกใช้งาน ngRoute แต่ใจความเป็นจริง
มีการ รวมเข้าไปในส่วนของ ionic แล้ว ในส่วนที่กำหนด ['ionic']
4. สร้างเมนู ให้กับ sidemenu ด้วย list icons
ยกโค้ดเฉพาะส่วน ion-content ใน slde menu left ในโค้ด index.html
<div class="list">
<a nav-clear menu-close class="item item-icon-left" href="#/">
<i class="icon ion-home"></i>
Home
</a>
<a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
<i class="icon ion-at"></i>
About Us
</a>
<a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
<i class="icon ion-email"></i>
Contact Us
<i class="icon ion-ios7-telephone-outline"></i>
</a>
</div>
nav-clear คือ กำหนดให้ กดแล้ว ไม่ต้องแสดง animation ในส่วนของ nav-view (มีอธิบายในตอนหน้า)
menu-close คือ ตำกำหนด ให้ปิด slde menu เมื่อเรากด ลิ้งค์เมนูแล้ว
href="#/aboutus" ในส่วนนี้ จะเป็นการกำหนด url ที่เราจะลิ้งค์ไป มีส่วนสำคัญกับที่ต้องเขียนโค้ด
href="#/" กลับหน้าแรก
สำหรับ css class ที่ใช้มีดังนี้
class="item item-icon-left"
item กำหนดเป็น menu item
item-icon-left กำหนดให้มี icon ด้านซ้ายของ เมนู
class="item item-icon-left item-icon-right"
item-icon-right กำหนดให้มี icon ด้านขวาของเมนู
การกำหนด icon จะใช้แท็ก i
<i class="icon ion-email"></i>
ดูไฟล์ icons ทั้งหมดได้ที่ http://ionicons.com/ คลิกที่ รูป จะมีชื่อ icon สามารถนำมาใช้ได้
มาดูไฟล์ index.html ตัวสำเร็จ
<!DOCTYPE html>
<html ng-app="myIonicApp3">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="css/ionic.css" rel="stylesheet">
<script type="text/javascript" src="js/ionic.bundle.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>My Ionic 3</title>
</head>
<body ng-controller="myIonicHome">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header bar-assertive">
</ion-nav-bar>
<ion-nav-view animation="slide-in-up">
</ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a nav-clear menu-close class="item item-icon-left" href="#/">
<i class="icon ion-home"></i>
Home
</a>
<a nav-clear menu-close class="item item-icon-left" href="#/aboutus">
<i class="icon ion-at"></i>
About Us
</a>
<a nav-clear menu-close class="item item-icon-left item-icon-right" href="#/contactus">
<i class="icon ion-email"></i>
Contact Us
<i class="icon ion-ios7-telephone-outline"></i>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
ผลลัพธ์การทำงาน
ในตอนหน้า จะมาอธิบาย การทำงานของ navigation ที่นำมาใช้ในตัวอย่างตอนนี้
รอติดตาม
เนื้อหาที่เกี่ยวข้อง