ปัญหาสำหรับนักพัฒนาที่เพิ่งใช้ 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>
ผลลัพธ์ที่ได้คือ
<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
