เนื้อหาในบทความตอนนี้ เราจะมาทำความรู้จักกับ service $http ของ
angularjs โดยจะใช้ในการดึงข้อมูล object ในไฟล์ json
โดยได้เตรียมไฟล์ข้อมูลไว้แล้ว
ดูตัวอย่างการสร้างไฟล์ json เพื่อรองรับการใช้งานแบบ jsonp ได้ที่
สร้างไฟล์ json จากฐานข้อมูล รองรับการใช้งาน jsonp callback
https://www.ninenik.com/content.php?arti_id=523 via @ninenik
สำหรับไฟล์ ในการทดสอบคือ
https://www.ninenik.com/demo/today_view_article.php?callback=JSON_CALLBACK
จะเป็นข้อมูล บทความในเว็บไซต์ ที่มีคนเปิดดูวันนี้
ลักษณะ โครงสร้างของไฟล์ json จะมี
{
"id":"",
"topic":"",
"description":"",
"date":"",
"img":"",
"url":"",
"view":""
}
ก่อนเริ่ม ให้เข้าใจก่อนว่า เนื้อหา บทความเกี่ยวกับ angularjs จะมีการใช้
css ของ bootstrap ซึ่งอธิบายในบทความก่อนหน้า สามารถย้อนกลับไปดูได้
ดังนั้น ในบางส่วนบางจุด จะข้ามการอธิบายแบบละเอียด เพราะได้ถือ ผู้อ่าน
ได้อ่านบทความก่อนหน้ามาแล้ว หากใครยังไม่ได้อ่าน สามารถย้อนกลับไป
ศึกษาดูได้
1. โครงสร้างไฟล์ index.html
ไฟล์นี้ ที่เราจะแสดงข้อมูลจาก ไฟล์ json ในรูปแบบตาราง จัดรูปแบบด้วย bootstrap
css
โดยจะทำการดึงหัวข้อ topic,date,view จาก ไฟล์ json มาแสดง
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<script src="app.js"></script>
<title>My Learn AngularJs 5</title>
<style type="text/css">
</style>
</head>
<body ng-controller="appController">
<br>
<div class="container">
<table class="table table-stroped">
<tr class="active">
<th>#</th>
<th>Topic</th>
<th>Date</th>
<th>View</th>
</tr>
<tr ng-class-even="'warning'" ng-repeat="article in articles">
<td>{{$index+1}}</td>
<td>{{article.topic}}</td>
<td>{{article.date}}</td>
<td>{{article.view}}</td>
</tr>
</table>
</div>
</body>
</html>
ไฟล์นี้ ดูเฉพาะบรรทัดที่ 25-30
บรรทัดที่ 25 เราจะได้รู้กจักกับ ngClassEven ใน html จะเขียน ng-class-even
เป็นการกำหนด css ให้กับแถวของข้อมูล ที่เป็นลำดับเลขคู่
ถ้าเป็นเลขคี่ จะใช้ ngClassOdd ใน html จะเขียน ng-class-odd
ng-class-even="'warning'" จึงหมายถึง ถ้าเป็น แถวคู่ ให้ใช้ css class ชื่อ warning
* ถ้าพูดถึง css class จะหมายถึง css ของ bootstrap เสมอ ซึ่งถ้าเราไม่ได้ใช้ bootstrap ก็สามารถกำหนดเป็นชื่ออื่นได้
ต่อไป ngRepeat อันนี้คุ้นบ่อย คือการวนลูปแสดงข้อมูล จากค่า model ของ scope
ng-repeat="article in articles" จึงหมายถึง ให้ตัวแปร article รับค่าจาก scope model
ที่ชื่อ articles มาวนลูปแสดงข้อมูล
บรรทัดที่ 26 บรรทัดนี้ เราจะได้รู้จักกับ $index ตัวนี้ก็เปรียบเสมือน index ของ array object เริ่มต้นจาก 0 ในที่นี้ เราต้องการแสดงลำดับ รายการว่ามีลำดับ ตั้งแต่ 1-10
{{$index+1}} จึงหมายถึง แสดงค่า index โดยบวกเพิ่มครั้งละ 1
บรรทัดที่ 27-29 ส่วนนี้แสดงช้อมูล ตามปกติ โดยอ้างอิงชื่อ จาก json ไฟล์ด้านบน
{{article.topic}} หัวข้อบทความ
{{article.date}} วันที่
{{article.view}} จำนวนคลิกเปิดดู
2. ไฟล์ app.js และการใช้งาน service http ใน angularjs
ไฟล์ app.js คำอธิบายแสดงในโค้ด
angular.module("app",[]) // สร้าง module
.service("ninenik",["$http",function($http){ // สร้าง service ชื่อ ninenik และเรียกใช้งาน $http service
// service ชื่อ ninenik กำหนดฟังก์ชั่น ชื่อ showArticle โดยส่งค่า scope เขาใปในฟังก์ชั่น
this.showArticle = function($scope){
// กำหนดไฟล์ json ที่รองรับการเรียกใช้งาน แบบ่ jsonp
var url="https://www.ninenik.com/demo/today_view_article.php?callback=JSON_CALLBACK";
// ใช้ $http service เรียกใช้งาน json ไฟล์ ตาม url ที่กำหนด ด้วยคำสั่ง jsonp
$http.jsonp(url).success(function(result){ // ถ้าสำเร็จส่ง object ชื่อ result กลับมา
// สั่งเกต ตัวแปร $scope ที่เราส่งเข้ามาในฟังก์ชั่น
// เพื่อเข้ามากำหนดค่า model data หรือชุดข้อมูล ให้เท่ากับ result
$scope.articles=result; // ค่า articles จะถูกนำไปใช้งานในไฟล์ index.html
}).error(function(){
// กรณีผดพลาด หรือไม่สามารถเรียกไฟล์ได้
});
};
}])
// กำหนด controller ตามชื่อในไฟล์ index.html เรียกใช้งาน $scope และ service ชื่อ ninenik
.controller("appController",["$scope","ninenik",function($scope,ninenik){
// กำหนด model data ชื่อ articles เป้นแบบ array
$scope.articles=[];
// จะเห็นว่า มีการสั่ง service ชื่อ ninenik เข้ามา เพื่อที่จะทำการเรียกใช้งาน
// ฟังก์ชั่น showArticle($scope) โดยมีการส่งค่า $scope เขาไปในฟังก์ชั่นด้วย
// เพื่อที่จะเอาตัวแปร model data ไปรับค่าจาก ฟังก์ชั่นใน sevice
ninenik.showArticle($scope);
}]);
ไฟล์ app.js ไม่มีคำอธิบาย
angular.module("app",[])
.service("ninenik",["$http",function($http){
this.showArticle = function($scope){
var url="https://www.ninenik.com/demo/today_view_article.php?callback=JSON_CALLBACK";
$http.jsonp(url).success(function(result){
$scope.articles=result;
}).error(function(){
});
};
}])
.controller("appController",["$scope","ninenik",function($scope,ninenik){
$scope.data1="1";
$scope.articles=[];
ninenik.showArticle($scope);
}]);
ตัวอย่างผลลัพธ์
การใช้งาน service http จะมีให้ใช้งานหลายแบบ คล้ายกับการเรียกใช้งาน ajax
สำหรับเนื้อหาตอนนี้ก็จบเพียงเท่านี้
ตอนหน้าจะเกี่ยวกับอะไร รอติดตาม
