关注微信订阅号: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,这么做的原因是各自用各自的路由管理,不会出现页面逻辑混乱。

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

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

  1. [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...

  2. [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  3. [ionic开源项目教程] - 第9讲 新闻详情页的实现

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  4. [ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...

  5. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

  6. [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)

    [ionic开源项目教程] - 第8讲  根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...

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

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

  8. [ionic开源项目教程] - 第3讲 左右滑动菜单的实现(使用Tabs和SlideBox)

    使用Tabs和SlideBox实现左右滑动菜单 1.将tab1.html的代码改为如下: <ion-view view-title="健康"> <ion-cont ...

  9. [ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图

    新建项目 由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...

随机推荐

  1. ios后台下载

    http://www.cocoachina.com/industry/20131106/7304.html

  2. 正确使用HTML title属性

    如果你想对使用手机,平板电脑和辅助技术的用户隐藏某些内容,而只对键盘用户显示,那么请使用title属性. 细节 HTML的title属性本身有问题.之所以有问题是因为它在一些重要的方面表现的不够好,尽 ...

  3. Cortex-M3/4的Hard Fault调试方法

    1 Cortex-M3/4的Fault简介 Cortex-M3/4的Fault异常是由于非法的存储器访问(比如访问0地址.写只读存储位置等)和非法的程序行为(比如除以0等)等造成的.常见的4种异常及产 ...

  4. asp.net 认证与授权

    1.下面的例子在web.config文件中配置网站使用asp.net forms 身份认证方式: <configuration> <system.web> <authen ...

  5. GCD初步认识

    //(1)用异步函数往并发队列中添加任务, //总结:同时开启三个子线程 - (void)test1 { //1.获得全局的并发队列 dispatch_queue_t queue = dispatch ...

  6. 处理HTTP状态码

    1.1.4  处理HTTP状态码 上一节介绍HttpClient访问Web资源的时候,涉及HTTP状态码.比如下面这条语句: int statusCode=httpClient.executeMeth ...

  7. ***PHP preg_match正则表达式的使用

    第一,让我们看看两个特别的字符:‘^’和‘$’他们是分别用来匹配字符串的开始和结束,以下分别举例说明 : "^The": 匹配以 "The"开头的字符串; &q ...

  8. HDU 1026 Ignatius and the Princess I (BFS)

    题目链接 题意 : 从(0,0)点走到(N-1,M-1)点,问最少时间. 思路 : BFS..... #include <stdio.h> #include <string.h> ...

  9. VS2003 下GridControl的列显示成图片+文字的形式实现

    public RC_CustomerSolicitListUC() { // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: ...

  10. hdu 1526(最大匹配)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1526 思路:floyd求传递闭包,然后就是最大匹配了,不过一开始输入没看清,被坑了将近2个小时. #i ...