[ionic开源项目教程] - 第13讲 Service层优化，提取公用Service，以及生活和农业两大模块的实现

关注微信订阅号：TongeBlog，可查看[ionic开源项目]全套教程。 这一讲主要实现生活和农业两大模块的实现，在这个过程中，对service层提取出一个公用的BaseService。

这一讲分为三大模块：

• 一.提取公用的服务层BaseService
• 二.生活模块Tab3的实现
• 三.农业模块Tab4的实现

一.提取公用的服务层BaseService

将doRefresh和loadMore函数封装到BaseService，供其他模块使用。

BaseService的实现

.service('BaseService', function ($http) {
    this.loadMore = function ($this) {
      console.log("正在加载更多数据..." + $this.page);
      $http.get($this.url + "?page=" + $this.page + "&rows=" + settings.rows).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操作...");
       $http.get($this.url + "?page=1&rows=" + settings.rows).success(function (response) {
         console.log(response);
         $this.page = 2;
         $this.items = response.tngou;
         $this.callback();
         $this.isload = false;
       });
    }
  })

二.生活模块的实现

生活模块的controller实现和service的实现.

[效果图]

1.service层Tab3Service的实现

在Tab3Service中通过依赖注入实现对BaseService的doRefresh和loadMore的调用。

.service('Tab3Service', function (BaseService) {
this.getTab3Menu = function () {
  return [
    {
      name: '社会热点', isload: true, url: server.domain + '/top/list', type: 'top',
      page: 1, rows: 20,
      items: [],
      loadMore: function () {
        BaseService.loadMore(this);
      },
      doRefresh: function () {
        BaseService.doRefresh(this);
      },
      callback: function () {
        //回掉函数
      }
    },
    {
      name: '健康菜谱', isload: true, url: server.domain + '/cook/list', type: 'cook',
      page: 1, rows: 20,
      items: [],
      loadMore: function () {
        BaseService.loadMore(this);
      },
      doRefresh: function () {
        BaseService.doRefresh(this);
      },
      callback: function () {
        //回掉函数
      }
    },
    {
      name: '健康食品', isload: true, url: server.domain + '/food/list', type: 'food',
      page: 1, rows: 20,
      items: [],
      loadMore: function () {
        BaseService.loadMore(this);
      },
      doRefresh: function () {
        BaseService.doRefresh(this);
      },
      callback: function () {
        //回掉函数
      }
    }
  ]
}
})

2.controller层Tab3Ctrl控制器的实现

.controller('Tab3Ctrl', function ($scope, Tab3Service, $controller, $state, $ionicTabsDelegate) {
    $scope.classify = Tab3Service.getTab3Menu()
    $scope.currentTabId = "tab3";
    $controller('BaseCtrl', { $scope: $scope });
    $scope.goDetails = function (item, type) {
        var title = "", name = "";
        if (item.title) {
            title += item.title;
        }
        if (item.name) {
            title += item.name;
        }
        console.log(item);
        $state.go('tab.tab3-details', { id: item.id, title: title, type: type })
        $ionicTabsDelegate.showBar(false);
    }
})

3.tab3.html和tab3-details.html的视图实现

tab3.html

<ion-view view-title="生活">
    <ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)">
<ion-slide ng-repeat="slide in slides">
  <ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="slide.doRefresh()"></ion-refresher>
    <div class="list has-header">
      <a ng-repeat="item in slide.items" class="item item-thumbnail-right item-text-wrap" ng-click="goDetails(item,'{{slide.type}}')">
        <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
        <h3>{{::item.title+item.name}}</h3>
        <p>{{::item.description | substring:item.description}}</p>
      </a>
    </div>
    <ion-infinite-scroll ng-if="!slide.isload" on-infinite="slide.loadMore()" distance="1%">
    </ion-infinite-scroll>
  </ion-content>
</ion-slide>
  </ion-slide-box>
  <ion-tabs  id="{{currentTabId}}" 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>

tab3-details.html

<ion-view title="{{title}}">
   <ion-content class="padding">
        <div class="message" >
            <img ng-src="{{imgUrl+item.img}}" />
            <div ng-bind-html="item.message"></div>
        </div>
   </ion-content>
</ion-view>

4.配置路由

在app.js中完善tab3的路由配置

.state('tab.tab3', {
    url: '/tab3',
    views: {
      'tab3': {
        templateUrl: 'templates/tab3.html',
        controller: 'Tab3Ctrl'
      }
    }
  })
  .state('tab.tab3-details', {
    url: '/tab/tab3-details/:id/:title/:type',
    views: {
      'tab3': {
        templateUrl: 'templates/tab3-details.html',
        controller: 'Tab1DetailsCtrl'
      }
    }
  })

三.农业模块的实现

生活模块的controller实现和service的实现.

[效果图]

1.service层Tab4Service的实现

在Tab4Service中通过依赖注入实现对BaseService的doRefresh和loadMore的调用。

.service('Tab4Service', function ($http, BaseService) {
    this.getTab4Menu = function () {
      return [
        {
          name: '农业新闻', isload: true, url: server.domain + '/news/list', type: 'news',
          page: 1, rows: 20,
          items: [],
          loadMore: function () {
            BaseService.loadMore(this);
          },
          doRefresh: function () {
            BaseService.doRefresh(this);
          },
          callback: function () {
            //回掉函数
          }
        },
        {
          name: '农业技术', isload: true, url: server.domain + '/tech/list', type: 'tech',
          page: 1, rows: 20,
          items: [],
          loadMore: function () {
            BaseService.loadMore(this);
          },
          doRefresh: function () {
            BaseService.doRefresh(this);
          },
          callback: function () {
            //回掉函数
          }
        }
      ]
    }
    this.getDetails = function (type, id) {
      var url = server.domain + "/" + type + "/show?id=" + id + "&callback=JSON_CALLBACK";
      return $http.jsonp(url);
    }
})

2.controller层Tab4Ctrl控制器的实现

.controller('Tab4Ctrl', function ($scope, Tab4Service, $controller, $state, $ionicTabsDelegate) {
    $scope.classify = Tab4Service.getTab4Menu()
    $scope.currentTabId = "tab4";
    $controller('BaseCtrl', { $scope: $scope });
    $scope.goDetails = function (item, type) {
        var title = "", name = "";
        if (item.title) {
            title += item.title;
        }
        if (item.name) {
            title += item.name;
        }
        console.log(item);
        $state.go('tab.tab4-details', { id: item.id, title: title, type: type })
        $ionicTabsDelegate.showBar(false);
    }
})

3.tab3.html和tab3-details.html的视图实现

tab3.html

<ion-view view-title="生活">
    <ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)">
<ion-slide ng-repeat="slide in slides">
  <ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="slide.doRefresh()"></ion-refresher>
    <div class="list has-header">
      <a ng-repeat="item in slide.items" class="item item-thumbnail-right item-text-wrap" ng-click="goDetails(item,'{{slide.type}}')">
        <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
        <h3>{{::item.title+item.name}}</h3>
        <p>{{::item.description | substring:item.description}}</p>
      </a>
    </div>
    <ion-infinite-scroll ng-if="!slide.isload" on-infinite="slide.loadMore()" distance="1%">
    </ion-infinite-scroll>
  </ion-content>
</ion-slide>
  </ion-slide-box>
  <ion-tabs  id="{{currentTabId}}" 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>

tab4-details.html

<ion-view title="{{title}}">
   <ion-content class="padding">
        <div class="message" ng-bind-html="item.message"></div>
   </ion-content>
</ion-view>

4.配置路由

在app.js中完善tab4的路由配置

.state('tab.tab4', {
    url: '/tab4',
    views: {
      'tab4': {
        templateUrl: 'templates/tab4.html',
        controller: 'Tab4Ctrl'
      }
    }
  })
  .state('tab.tab4-details', {
    url: '/tab/tab4-details/:id/:title/:type',
    views: {
      'tab4': {
        templateUrl: 'templates/tab4-details.html',
        controller: 'Tab1DetailsCtrl'
      }
    }
  })

难点和注意事项

• 理解为什么要封装BaseService
• 每个tab都有自己的tab-details，这么做的原因是各自用各自的路由管理，不会出现页面逻辑混乱。

到这里如果有任何问题，请通过文章最下面的联系方式联系我。