เขียนโปรแกรมแบบ Hybrid ได้ทั้ง android และ ios ด้วย ionic framework ตอนที่ 1
ลงมือเขียนโปรแกรม Contact
จากบทความที่เหลือ จะเป็นกล่าวถึง การติดตั้งโปรแกรมที่จำเป็น สำหรับบทความนี้ จะเป็นการลงมือเขียนโปรแกรมจริงๆ
การทำงานของโปรแกรม
เปิดโปรแกรมมาจะพบกับหน้าแสดงรายชื่อผู้บริหาร เพื่อคลิ๊กที่รายชื่อผู้บริหารก็จะพบกับรายละเอียดการติดต่อของผู้บริหารนั้นๆ
หน้าจอโปรแกรม มีแค่ 2 หน้า
(1) หน้าจอหลัก
(2) หน้าจอแสดงรายละเอียด
คำอธิบายคร่าวๆ
1. ในส่วนของ index.html เราจะไม่เขียนอะไรเลย นอกจากกำหนดไฟล์ js ที่เราสร้างขึ้น เช่น
เช่น
<script src="controller/lisControl.js"></script>
และในส่วนของ body จะกำหนดชื่อ module ของ app.js จะกำหนดชื่ออะไรก็ได้ แต่จะต้องตรงกับชื่อใน module ของ app.js
และในส่วนของ body จะมีแค่ tag <ion-nav-view> </ion-nav-view> เท่านั้น เพราะว่าเราจะไปเขียนไฟล์ html เองข้างนอก เพื่อความสะดวกในการแก้ไข แต่ไฟล์ html นั้น จะต้องสร้างขึ้นภายใน tag <ion-nav-view> </ion-nav-view> เหมือนกัน
/////////////////////////////////////// index.html ////////////////////////////////////////////////////////
<script src="js/app.js"></script>
<script src="controller/lisControl.js"></script>
<script src="controller/detail.js"></script>
</head>
<body ng-app="MyContact">
<ion-nav-view>
</ion-nav-view>
</body>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
การส่งข้อมูล ข้าม page
เนื่องจากในบทความนี้ จะเป็นมีการส่งข้อมูลข้าม Page คือส่งข้อมูลจาก list.html ไปยัง detail.html เพื่อแสดงข้อมูลรายละเอียดเฉพาะที่ส่วนที่ต้องการดู ในบทความนี้จะเป็นการส่งข้อมูลแบบ fix คือเขียนข้อมูลลงในไฟล์ listControl.js ยังไม่ได้อ่านไฟล์จาก web service
ส่วนประกอบของไฟล์
1. index.html
2.list.html จะคู่กับ listControl.js
3.detail.html จะคู่กับ detail.js
4.app.js
- เราจะกำหนด state ทั้งหมดลงในไฟล์นี้ มีกี่ state ก็ต้องมี controller ส่วนควบคุม เท่าจำนวน state ด้วย ส่วนตัวอย่างในบทความนี้ เราจะแยกไฟล์ controller ไปอีกไฟล์ เพื่อสะดวกในการแก้ไขและแบ่งงานกันทำ
ตัวอย่างไฟล์ app.js เฉพาะในส่วนที่เราเพิ่มเติม
------------------------------------------ app.js ----------------------
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('list',{
url:'/list',
templateUrl:'templates/list.html',
controller:'ListController'
})
.state('detail',{
url:'/detail:{name}/{nick}/{email}/{mobile}',
templateUrl:'templates/detail.html',
controller:'DetailController'
})
$urlRouterProvider.otherwise('/list')
})
คำอธิบาย
$urlRouterProvider.otherwise('/list') เป็นตัวกำหนดว่าหากเปิดโปรแกรมมาหน้าแรกจะให้ไฟล์อะไรแสดงเป็นไฟล์แรก ในตัวอย่างนี้ จะกำหนดให้ state('/list') แสดงเป็นหน้าแรก
จะสังเกตุว่าในส่วนของ state จะต้องมีไฟล์ controller ควบคุม โดย 1 state ก็ต้องมี 1 controller ควบคุม
------------------------------------------------------------------
----------------------------------------------------------------------
ไฟล์ controller สำหรับควบคุมไฟล์ list.html
---------------------- listControl.js ----------------------------
angular.module('MyContact')
.controller('ListController',function($scope,$state){
//console.log('list controller start');
$scope.myDataArray =[
{
name : 'Kitti txxxxxxn',
nick : 'TI',
email : 'ttttt@hotmail.com',
mobile : '087-77777777'
},
{
name : 'santi txxxxxxn',
nick : 'Toy',
email : 'toy@hotmail.com',
mobile : '087-999999'
},
{
name : 'Panuwat txxxxxxn',
nick : 'Tam',
email : 'tam@hotmail.com',
mobile : '087-88888'
}
]
$scope.btnDetail = function(data){
$state.go('detail',{name:data.name,nick:data.nick,email:data.email,mobile:data.mobile});
}
})
คำอธิบาย
(data) -> จะเป็นการรับค่ามาจากหน้า list เมื่อเรา click มันจะส่งค่าข้อมูลใน record นั้น มายัง function นี้และจะถูกส่งต่อไปยัง หน้า $state detail
---------------------------------------------------------------------------
การรับค่า
detail.js
เราจะใช้ตัวแปรรับค่า คือ $stateParams โดยสร้างตัวแปรมารับค่า ขึ้นต้นด้วย $scope
เช่น $scope.txtName = $stateParams.name; เป็นต้น
---------------------------------- detail.js -----------------------------
angular.module('MyContact')
.controller('DetailController',function($scope,$state,$stateParams,$ionicPopup){
$scope.txtName = $stateParams.name;
$scope.txtNick = $stateParams.nick;
$scope.txtemail = $stateParams.email;
$scope.txtmobile = $stateParams.mobile;
})
-------------------------------------------------------------------------------------------
การแสดงค่า
การแสดงค่าไฟล์ในไฟล์ list.html ซึ่งเป็นไฟล์หน้าแรก
หลักการทำงาน
หน้าจอนี้จะแสดงรายชื่อมาจากไฟล์ listControl.js จากตัวแปร $scope.myDataArray โดยจะวนลูปแสดงผล ด้วย tag ng-repeat="data in myDataArray" โดยข้อมูลที่จำนำมาแสดง จะอยู่ในตัวแปร {{data.name}}
------------------------------------ list.html ---------------------------------------------
<ion-view>
<ion-nav-bar>
<ion-nav-title>
เบอร์ติดต่อผู้บริหารสำนักงานฯ
</ion-nav-title>
</ion-nav-bar>
<ion-content>
<div class="list">
<div class="item item-avatar-left item-icon-right" ng-click="btnDetail(data)" ng-repeat="data in myDataArray">
<img src='img/ionic.png'>
<h2>{{data.name}}</h2>
<p>{{data.nick}}</p>
<i class="icon ion-ios-arrow-right"></i>
</div>
</div>
</ion-content>
</ion-view>
----------------------------------------------------------------------------------
การแสดงค่าในไฟล์ detail.html
คำอธิบาย
เราจะเอาตัวแปรที่อยู่ใน detail.js มาแสดง ได้โดยใช้ {{txtName }} มาแสดงยังตำแหน่งที่ต้องการ
---------------------------------- detail.html --------------------------------------------
<ion-view>
<ion-nav-bar>
<ion-nav-title>รายละเอียดการติดต่อ</ion-nav-title>
<ion-nav-buttons side="left">
<button class="button icon ion-ios-arrow-left" ng-click="btnBack()"> Back</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<img src="img/ionic.png" style="margin-left: auto;margin-right: auto; display: block; padding:2em;">
<div class="list">
<div class="item item-icon-left">
<i class="icon ion-person"></i>
Name : {{txtName}}
</div>
<div class="item">
<i class="icon ion-ribbon-b"></i>
Nick Name : {{txtNick}}
</div>
<div class="item">
<i class="icon ion-email"></i>
Email : {{txtemail}}
</div>
<div class="item">
<i class="icon ion-iphone"></i>
Mobile : {{txtmobile}}
</div>
</div>
<ion-nav-button class="button button-full" ng-click="showConfirm()">Call Now</ion-nav-button>
</ion-content>
</ion-view>
-------------------------------------------------------------------------------------------
เครดิตร http://senchabox.com/
ความคิดเห็น
แสดงความคิดเห็น