未学者(wo)一步一步从ionic2学习到AngularJs（三）-原创手记-慕课网

通过Service层获取数据列表

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

在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 })
    }
})

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

angular.module('starter.controllers', [])
.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)
    }

})
.controller('Tab2Ctrl', function($scope) {})
.controller('Tab3Ctrl', function($scope) {})
.controller('Tab4Ctrl', function($scope) {})
.controller('AccountCtrl', function($scope) {});

视图层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>

代码解释

视图层只有list内的标签做了改动。
在这里我又碰到了一个问题。就是跨域访问。

我在学习这个项目的时候也在学习AngularJS，根据折腾这个项目使我对于学习angular有了更清晰的方向。
如果你看到调试台上出现No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.说明你也遇到跨域访问的问题。
解决方案一：
在chrome浏览器安装ripple扩展和Access-Control-Allow-Origin扩展，可以解决这个问题。
解决方案二：
将项目中所有的请求都改为jsonp的方式。将所有的请求都改为$http.jsonp，在url最后拼接一个参数&callback=JSON_CALLBACK，例如BaseService：

.service('BaseService', function ($http) {
this.loadMore = function ($this) {
  console.log("正在加载更多数据..." + $this.page);
  $http.jsonp($this.url + "?page=" + $this.page + "&rows=" + settings.rows + "&callback=JSON_CALLBACK").success(function (response) {
    console.log(response);
    if (response.tngou.length > 0) {
      $this.items = $this.items.concat(response.tngou);
      $this.page++;
    } else {
      console.log("没有数据了...")
      $this.isload = true;
    }
    $this.callback();
  });
} 
this.doRefresh = function ($this) {
  console.log("正在执行refresh操作...");
  //使用jsonp的方式请求
  $http.jsonp($this.url + "?page=1&rows=" + settings.rows + "&callback=JSON_CALLBACK").success(function (response) {
    console.log(response);
    $this.page = 2;
    $this.items = response.tngou;
    $this.callback();
    $this.isload = false;
  });
}
})

效果图：