ionicframework โหลดข้อมูล จากเว็บไซต์ มาแสดง แบบ cards ตอนที่ 3

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
ข้อมูล ionic card

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อมูล ionic card

ดูแล้ว 9,484 ครั้ง


ก่อนเข้าเนื้อหา ให้เข้าใจก่อนว่า ionicframework ใช้สำหรับทำ mobile app 
โดยใช้งานร่วมกับ angularjs โดย ionic จะมีในส่วนของ css และก็ javascript
ที่ใช้ในรูปแบบ ของ angularjs
 
เนื้อหาตอนนี้สอดคล้องกับ บทความการใช้งาน http service ใน angularjs
ใช้งาน service http ดึงข้อมูลจาก ไฟล์ json ใน angularjs ตอนที่ 5 
 
ขั้นตอน
- สร้างรูปแบบ 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 เข้าไป เพื่อรับค่ากลับออกมา
        };
}]);
 
ดูผลลัพธ์ ที่แสดงเบื้องต้น
 



จบเนื้อหาเท่านี้ ตอนต่อไปมีอะไร รอติดตาม


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







เนื้อหาที่เกี่ยวข้อง









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





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

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


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


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







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