Ionic framework นับว่าเป็น frame work สำหรับพัฒนา mobile application ที่มีประสิทธิภาพมาก เหมาะสำหรับการพัฒนา mobile application ด้วย html และ javascript
ปัญหาสำหรับนักพัฒนาที่เพิ่งใช้ ionic frawork คือการ link หน้าต่างๆใน application ในที่นี้คือตัวอย่างการ link หน้า app สำหรับ ionic framework
1. Download Ionic Framework จาก http://projectsoft.biz/ionic.zip และแตกโฟลเดอร์ ชื่อ ionic ไว้ใน folder เดียวกับ index.html (ไฟล์เริ่มต้น)
2. สร้างไฟล์ index ดังนี้
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- เรียกใช่ ionic framework -->
<link rel="stylesheet" type="text/css" href="ionic/css/ionic.min.css">
<script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
<!-- เรียกใช่ ionic framework -->
</head>
<body ng-controller="main_control" >
<!--- สร้างวิว สำหรับ แสดงเนื้อหา app -->
<ion-nav-view></ion-nav-view>
<!-- เรียกไฟล์หน้า app แต่ละหน้า -->
<script src="page1.html" type="text/ng-template"></script>
<script src="page2.html" type="text/ng-template"></script>
<!---เรียกไฟล์หน้า app--->
<script src="index.js"></script>
<script src="page1.js"></script>
<script src="page2.js"></script>
</body>
</html>
2. สร้างไฟล์ index.js สำหรับควบคุมหน้า index.html
var app=angular.module('ionicApp', ['ionic']);
app.config(function($stateProvider,$urlRouterProvider) {
//กำหนด state ให้แต่ละ page
//ในที่นี้ page1 สำหรับ ไฟล์ page1.html และ page2 สำหรับไฟล์ page2.html
$stateProvider
.state('page1', {
url: "/",
templateUrl: 'page1.html'
})
.state('page2', {
url: "/",
templateUrl: 'page2.html'
});
});
app.controller('main_control', function($scope,$state) {
$state.transitionTo("page1");//กำหนดให้แสดงหน้า page1 เป็นหน้าแรก
});
3. สร้างไฟล์ page1.html
<ion-view >
<div ng-controller="page1_control">
<div class="bar bar-positive"><!-- กำหนด header ให้กับ หน้า app -->
<h1 class="title">หน้า 1</h1>
</div>
<ion-content class="content has-header " ><!--- แสดงเนื้อหาในหน้า app --->
<div class="padding" >
<h1>หน้า 1</h1>
<!-- สร้างปุ่มไปที่หน้า 2 -->
<button ng-click='go_page2()'
class="button icon-right ion-chevron-right button-assertive">หน้า 2</button>
</div>
</ion-content>
</div>
</ion-view>
<script>
//สร้างส่วน control สำหรับหน้า page1
app.controller('page1_control', function($scope,$state) {
$scope.go_page2=function()//กำหนดให้เมื่อกด ปุ่มแล้วจะ link ไปหน้า page2
{
$state.transitionTo("page2");
}
});
</script>
3. สร้างหน้า page2.html
<ion-view >
<div ng-controller="page2_control">
<div class="bar bar-positive">
<h1 class="title">หน้า 2</h1>
<!-- กำหนด header ให้กับ หน้า app -->
</div>
<ion-content class="content has-header " >
<div class="padding" >
<h1>หน้า 2</h1>
<!-- สร้างปุ่ม link ไปที่หน้า 1 -->
<buttpn ng-click='go_page1()' class="button icon-left ion-chevron-left button-assertive">หน้า 1</button>
</div>
</ion-content>
</div>
</ion-view>
<script>
//สร้างส่วน control สำหรับหน้า page2
app.controller('page2_control', function($scope,$state) {
$scope.go_page1=function()
{
$state.transitionTo("page1");//กำหนดให้เมื่อกด ปุ่มแล้วจะ link ไปหน้า page1
}
});
</script>
ผลลัพธ์ที่ได้คือ
หน้า 1
หน้า 2
