ใช้งาน service http ดึงข้อมูลจาก ไฟล์ json ใน angularjs ตอนที่ 5

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
angularjs json http service

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ angularjs json http service

ดูแล้ว 16,598 ครั้ง


เนื้อหาในบทความตอนนี้ เราจะมาทำความรู้จักกับ service $http ของ
angularjs โดยจะใช้ในการดึงข้อมูล object ในไฟล์ json
โดยได้เตรียมไฟล์ข้อมูลไว้แล้ว
 
ดูตัวอย่างการสร้างไฟล์ json เพื่อรองรับการใช้งานแบบ jsonp ได้ที่
สร้างไฟล์ json จากฐานข้อมูล รองรับการใช้งาน jsonp callback 
 
สำหรับไฟล์ ในการทดสอบคือ
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
สำหรับเนื้อหาตอนนี้ก็จบเพียงเท่านี้ 
ตอนหน้าจะเกี่ยวกับอะไร รอติดตาม


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ