[ionic开源项目教程] - 第4讲 通Service层获取数据列表

第4讲：通Service层获取数据列表

上一讲中页面的基本架构已完成，这一讲介绍如何通过service层从服务器请求数据，在通过controller层为载体，显示到视图层。

1.在services.js的Tab1Service中添加一个getList的函数，用来获取数据列表

.service('Tab1Service', function ($http) {
    this.getClassify = function () {
      return [
        { name: '健康资讯', viewable: true, url: domain + '/info/list', page: 1, rows: 20 },
        { name: '健康知识', viewable: false, url: domain + '/lore/list', page: 1, rows: 20 },
        { name: '健康问答', viewable: false, url: domain + '/ask/list', page: 1, rows: 20 },
        { name: '健康图书', viewable: false, url: domain + '/book/list', page: 1, rows: 20 }
      ]
    }

    this.getList = function (url, page, rows) {
      return $http.post(url, { page: page, rows: rows })
    }
})

2.完善controller.js的TabCtrl，使用Tab1Service.getList函数来获取数据列表，通过$scope.items作为数据载体。

.controller('Tab1Ctrl', function ($scope,$rootScope, Tab1Service, $ionicSlideBoxDelegate, $ionicTabsDelegate) {
    $rootScope.imgUrl = imgUrl;

    var classify = Tab1Service.getClassify()
    $scope.slides = classify;
    $scope.tabs = classify;

    var slideIndex = 0;
    Tab1Service.getList(classify[0].url, 1, 20).then(function (response) {
        if (response.data.status) {
            $scope.items = response.data.tngou;
            console.log(response.data);
        }
    }, function (error) {
        console.log(error);
    })

    $scope.slideChanged = function (index) {
        //这里使用instances[1]的原因是视图中有两个tabs
        $ionicTabsDelegate._instances[1].select(index);
    };
    $scope.$on('$ionicView.afterEnter', function () {
        //等待视图加载完成的时候默认选中第一个菜单
        $ionicTabsDelegate._instances[1].select($ionicSlideBoxDelegate.currentIndex());
    });

    $scope.selectedTab = function (index) {
        //滑动的索引和速度
        $ionicSlideBoxDelegate.slide(index)
    }

})

3.视图层tab1.html的最终代码

<ion-view view-title="健康">
  <ion-content class="has-header">
    <ion-slide-box show-pager="false" class="has-header" on-slide-changed="slideChanged($index)">
      <ion-slide ng-repeat="slide in slides">
        <div class="list">
          <a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#">
            <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
            <h3>{{::item.title}}</h3>
            <p>{{::item.description | substring:item.description}}</p>
          </a>
        </div>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
  <ion-tabs class="tabs-striped tabs-top">
    <ion-tab ng-repeat="item in tabs" on-select="selectedTab($index)" title="{{item.name}}"></ion-tab>
  </ion-tabs>

</ion-view>

4.代码解释

视图层只有list内的标签做了改动。

• ng-repeat="item in items"：数据列表的载体。
• imgUrl+item.img：补充图片服务器链接，请参考 第5讲 在项目中使用全局配置。
• substring：请参考 第6讲 如何使用filter过滤器。

完！