[ionic开源项目教程]

时间：2021-03-30 08:53:55

关注微信订阅号：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的实现.

[效果图]

[ionic开源项目教程]

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的实现.

[效果图]

[ionic开源项目教程]

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，这么做的原因是各自用各自的路由管理，不会出现页面逻辑混乱。

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

相关文章