[ionic开源项目教程]

第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过滤器。

完！