ก่อนเข้าเนื้อหา ให้เข้าใจก่อนว่า ionicframework ใช้สำหรับทำ mobile app
โดยใช้งานร่วมกับ angularjs โดย ionic จะมีในส่วนของ css และก็ javascript
ที่ใช้ในรูปแบบ ของ angularjs
เนื้อหาตอนนี้สอดคล้องกับ บทความการใช้งาน http service ใน angularjs
ใช้งาน service http ดึงข้อมูลจาก ไฟล์ json ใน angularjs ตอนที่ 5
https://www.ninenik.com/content.php?arti_id=525 via @ninenik
ขั้นตอน
- สร้างรูปแบบ interface หน้าแสดง รายการด้วย ionic css โดยใช้รูปแบบ cards
- ใช้ service http เพื่อไปโหลดข้อมูลจาก json ไฟล์ มาใช้งาน
- นำข้อมูลที่ได้ มาวนลูปแสดงใน cards โดยกำหนด even ให้กับการ แสดงข้อมูล
เช่น เมื่อกดปุ่ม refresh หรือ เมื่อกดค้างส่วน content เลื่อนลงแล้ว ปล่อย
หรือ เมื่อเปิดมาครั้งแรก แบบนี้เป็นต้น
url ไฟล์ json สำหรับใช้งาน
https://www.ninenik.com/demo/today_view_article.php?callback=JSON_CALLBACK
โครงสร้างไฟล์
{
"id":"",
"topic":"",
"description":"",
"date":"",
"img":"",
"url":"",
"view":""
}
ในตัวอย่างนี้ เราจะดึง topic,description,date,img และ view มาใช้งาน
1. เริ่มต้นสร้าง interface ไฟล์ index.html
โค้ดบบรทัดแรก ถึง บรรทัดที่ 13 จะไม่อธิบาย สำหรับคนเพิ่งเข้ามา ให้ลอง
ไปอ่าน ในเนื้อหาต้นๆ เนื่องจากบทความ ionicframework เป็นบทความต่อเนื่อง
<!DOCTYPE html>
<html ng-app="myIonicApp2">
<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.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>MyIonicApp 2</title>
</head>
<body ng-controller="myIonicHome">
<!-- มีส่วนของ header-->
<ion-header-bar class="bar bar-header bar-royal">
<h1 class="title">Ninenik.com</h1>
<!-- ปุ่ม เราจะใช้ทำเป็นปุ่ม refresh เพื่อแสดงเนื่อหา-->
<button class="button button-royal" ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<!-- ส่วนของ content-->
<ion-content class="scroll-content ionic-scroll has-header">
</ion-content>
</body>
</html>
สังเกตุบรรทัดที่ 18 จะมีการใช้งาน ngClick ใน html ใช้ ng-click สำหรับกำหนด
even เมื่อคลิก กด ให้ไปเรียกใช้งานฟังก์ชั่น refresh()
2. สร้างไฟล์ app.js สร้าง module และกำหนด controller
angular.module("myIonicApp2", ["ionic"]) // สร้าง modue myIonicApp2
.controller("myIonicHome",["$scope",function($scope){ // กำหนด controller
}]);
ดูผลลัพธ์ ที่แสดงเบื้องต้น
3. กลับมาที่ ไฟล์ index.html กำหนดรูปบบ cards
<!DOCTYPE html>
<html ng-app="myIonicApp2">
<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.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>MyIonicApp 2</title>
</head>
<body ng-controller="myIonicHome">
<!-- มีส่วนของ header-->
<ion-header-bar class="bar bar-header bar-royal">
<h1 class="title">Ninenik.com</h1>
<!-- ปุ่ม เราจะใช้ทำเป็นปุ่ม refresh เพื่อแสดงเนื่อหา-->
<button class="button button-royal" ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<!-- ส่วนของ content-->
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card">
<div class="item item-avatar">
<img ng-src="http://ionicframework.com/img/ionic-logo-blog.png">
<h2>topic</h2>
<p>date</p>
</div>
<div class="item item-body">
<img ng-src="http://ionicframework.com/img/ionic-logo-blog.png" alt="">
<p>
description
</p>
<p>xxx views</p>
</div>
</div>
</ion-content>
</body>
</html>
ดูผลลัพธ์ ที่แสดงเบื้องต้น
4. กำหนดฟังก์ชั่น และเรียกใช้งาน sevice http ใน ไฟล์ aap.js
คำอธิบายแสดงในโค้ด
angular.module("myIonicApp2", ["ionic"]) // สร้าง modue myIonicApp2
// สร้าง service ชื่อ ninenik และเรียกใช้งาน http
.service("ninenik",["$http",function($http){
// สร้างฟังก์ชั่น สำหรับแสดงบทความจากเว็บไซต์ nnenik.com
this.getArticle = function($scope){ // มีส่งค่า scope เข้ามา เพื่อกำหนด ค่า model
var url="https://www.ninenik.com/demo/today_view_article.php?callback=JSON_CALLBACK"; // url ไฟล์ json
// ดึงข้อมูลจากไฟล์ json ด้วย service $http โดยใช้คำสั่ง jsonp
$http.jsonp(url).success(function(result){ // ถ้าสำเร็จ ส่งกลับค่า result
alert("ok");
$scope.articles = result; // นำผลลัพธ์ที่ได้ เก็บไว้ในตัวแปร model
})
.error(function(){
// กรณีผิดพลาด กำหนดคำสั่งตรงนี้
});
}
}])
//ตรง controller เราจะมีการ injection หรือ ส่งค่า sevice เข้ามาเพื่อเรียกใช้งาน
.controller("myIonicHome",["$scope","ninenik",function($scope,ninenik){ // กำหนด controller
// สร้างตัวแปร model เพื่อไว้รับค่า โดยกำหนดเป็นตัวแปร object แบบ Array
$scope.articles = [];
// สร้างฟังก์ชั่น refresh() ที่เราจะใช้กับปุ่ม refresh พอกดให้ไปเรียกใช้งาน service ชื่อ ninenik
$scope.refresh = function(){
// ให้ service ชื่อ ninenik เรียกใช้งานฟังชั่นก์ getArticle
ninenik.getArticle($scope); // ส่งค่า $scope เข้าไป เพื่อรับค่ากลับออกมา
};
}]);
ดูผลลัพธ์ ที่แสดงเบื้องต้น
ทดสอบโดยให้เราคลิกที่ปุ่ม refresh ถ้ามี alert คำว่า ok แดงว่า มีการไปดึง
ข้อมูลจากไฟล์ json มาแล้ว พร้อมนำมาแสดง
5. วนลูปแสดงข้อมูล ที่ส่งกลับมา ในไฟล์ index.html
<!DOCTYPE html>
<html ng-app="myIonicApp2">
<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.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>MyIonicApp 2</title>
</head>
<body ng-controller="myIonicHome">
<ion-header-bar class="bar bar-header bar-royal">
<h1 class="title">Ninenik.com</h1>
<button class="button button-royal" ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="list card" ng-repeat="article in articles">
<div class="item item-avatar">
<img ng-src="{{article.img}}">
<h2>{{article.topic}}</h2>
<p>{{article.date}}</p>
</div>
<div class="item item-body">
<img ng-src="{{article.img}}" alt="">
<p>
{{article.description}}
</p>
<p>{{article.view}} views</p>
</div>
</div>
</ion-content>
</body>
</html>
ดูบรรทัดที่ 21 ng-repeat="article in articles" วนลูป
model data ชื่อ articles ไว้ในชื่อ article
บรรทัดที่ 23 ตัวนี้เราใช้ ng-src สำหรับแสดงรูป จะคล้ายกับ src ของแท็ก img
โดยข้อมูลรูปภาพจะอยู่ใน object ขื่อ article.img แสดงข้อมูลในรูปแบบ
{{article.img}}
ส่วนอื่นๆ นองจากรูปภาพ ก็สามารถ แสดงในลักษณะเดียวกัน ตามโค้ดด้านบน
ดูผลลัพธ์ ที่แสดงเบื้องต้น
ตรงนี้เปิดมาจะไม่มีอะไร เพราข้อมูลยังไม่ได้โหลด ให้เรากดปุ่ม refresh มุมบนขวา
ข้อมูลก็จะแสดง
6. เนื่องจาก ionicframework ออกแบบมาเพื่อ mobile app จึงมี ส่วนจัดการ
ที่อำนวยความสะดวก และเหมาะกับการใช้งานบนมือถือ โดยเราจะเพิ่มส่วนที่จะทำให้
การ refresh ข้อมูล ทำได้โดยการ เลื่อนส่วนของเนื้อหาลงมา แล้วปล่อย
ให้แทรกโค้ดตัวไปนี้ ไว้ก่อน div class="list card"
<ion-refresher on-refresh="refresh()"></ion-refresher>
<div ng-show="!articles.length">
<br>
<center><h3>Pull to refresh</h3></center>
</div>
เราสามารถลบ ปุ่มสำหรับ refresh ออกไปได้
โค้ด index.html ไฟล์สำเร็จ
<!DOCTYPE html>
<html ng-app="myIonicApp2">
<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.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>MyIonicApp 2</title>
</head>
<body ng-controller="myIonicHome">
<ion-header-bar class="bar bar-header bar-royal">
<h1 class="title">Ninenik.com</h1>
</ion-header-bar>
<ion-content class="scroll-content ionic-scroll has-header">
<ion-refresher on-refresh="refresh()"></ion-refresher>
<div ng-show="!articles.length">
<br>
<center><h3>Pull to refresh</h3></center>
</div>
<div class="list card" ng-repeat="article in articles">
<div class="item item-avatar">
<img ng-src="{{article.img}}">
<h2>{{article.topic}}</h2>
<p>{{article.date}}</p>
</div>
<div class="item item-body">
<img ng-src="{{article.img}}" alt="">
<p>
{{article.description}}
</p>
<p>{{article.view}} views</p>
</div>
</div>
</ion-content>
</body>
</html>
on-refresh="refresh()" คือ เมื่อเรามีการกดค้างลากแล้วปล่อยส่วนของเนื้อหา
จะมีการใช้งาน ฟังก์ชั่น refresh()
ng-show="!articles.length" div ตัวที่กำหนด ข้อความ ดึงลงแล้วปล่อยเพื่อ refresh
( Pull to refresh ) หมายถึง แสดงถ้า object model articles เท่ากับ 0 หรือคือถ้า
ไม่มีการโหลดบทความ หรือยังไม่ได้โหลดบทความ ให้แสดง div ตัวนี้
และก็อีกส่วนที่ต้องเพิ่มเข้าไปคือ ไฟล์ app.js เพื่อส่งให้ ส่วนแสดง การ refresh
หายไปเมื่อโหลดข้อมูลเสร็จแล้ว โดยใช้
$scope.$broadcast("scroll.refreshComplete");
ดูไฟล์ app.js ที่เสร็จแล้ว
angular.module("myIonicApp2", ["ionic"]) // สร้าง modue myIonicApp2
// สร้าง service ชื่อ ninenik และเรียกใช้งาน http
.service("ninenik",["$http",function($http){
// สร้างฟังก์ชั่น สำหรับแสดงบทความจากเว็บไซต์ nnenik.com
this.getArticle = function($scope){ // มีส่งค่า scope เข้ามา เพื่อกำหนด ค่า model
var url="https://www.ninenik.com/demo/today_view_article.php?callback=JSON_CALLBACK"; // url ไฟล์ json
// ดึงข้อมูลจากไฟล์ json ด้วย service $http โดยใช้คำสั่ง jsonp
$http.jsonp(url).success(function(result){ // ถ้าสำเร็จ ส่งกลับค่า result
$scope.articles = result; // นำผลลัพธ์ที่ได้ เก็บไว้ในตัวแปร model
// สำหรับส่วนที่ใช้การ scroll แล้ว refresh เราต้องสั่งให้หยุดแสดงเมือ่โหลดข้อมูลแล้ว
$scope.$broadcast("scroll.refreshComplete"); // ซ่อนหลังจาก ข้อมูลแสดงแล้ว
})
.error(function(){
// กรณีผิดพลาด กำหนดคำสั่งตรงนี้
});
}
}])
//ตรง controller เราจะมีการ injection หรือ ส่งค่า sevice เข้ามาเพื่อเรียกใช้งาน
.controller("myIonicHome",["$scope","ninenik",function($scope,ninenik){ // กำหนด controller
// สร้างตัวแปร model เพื่อไว้รับค่า โดยกำหนดเป็นตัวแปร object แบบ Array
$scope.articles = [];
// สร้างฟังก์ชั่น refresh() ที่เราจะใช้กับปุ่ม refresh พอกดให้ไปเรียกใช้งาน service ชื่อ ninenik
// ninenik.getArticle($scope); // กรณีต้องการให้โหลดข้อมูลเมื่อเปิดมาตอนแรก เอา comment นี้ออก
$scope.refresh = function(){
// ให้ service ชื่อ ninenik เรียกใช้งานฟังชั่นก์ getArticle
ninenik.getArticle($scope); // ส่งค่า $scope เข้าไป เพื่อรับค่ากลับออกมา
};
}]);
ดูผลลัพธ์ ที่แสดงเบื้องต้น
จบเนื้อหาเท่านี้ ตอนต่อไปมีอะไร รอติดตาม
เนื้อหาที่เกี่ยวข้อง