[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,这么做的原因是各自用各自的路由管理,不会出现页面逻辑混乱。
到这里如果有任何问题,请通过文章最下面的联系方式联系我。
[ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现的更多相关文章
- [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...
- [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- [ionic开源项目教程] - 第9讲 新闻详情页的实现
目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...
- [ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...
- [ionic开源项目教程] - 第14讲 ionic解决跨域问题
[ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...
- [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)
[ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...
- [ionic开源项目教程] - 第4讲 通Service层获取数据列表
第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...
- [ionic开源项目教程] - 第3讲 左右滑动菜单的实现(使用Tabs和SlideBox)
使用Tabs和SlideBox实现左右滑动菜单 1.将tab1.html的代码改为如下: <ion-view view-title="健康"> <ion-cont ...
- [ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图
新建项目 由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...
随机推荐
- ios后台下载
http://www.cocoachina.com/industry/20131106/7304.html
- 正确使用HTML title属性
如果你想对使用手机,平板电脑和辅助技术的用户隐藏某些内容,而只对键盘用户显示,那么请使用title属性. 细节 HTML的title属性本身有问题.之所以有问题是因为它在一些重要的方面表现的不够好,尽 ...
- Cortex-M3/4的Hard Fault调试方法
1 Cortex-M3/4的Fault简介 Cortex-M3/4的Fault异常是由于非法的存储器访问(比如访问0地址.写只读存储位置等)和非法的程序行为(比如除以0等)等造成的.常见的4种异常及产 ...
- asp.net 认证与授权
1.下面的例子在web.config文件中配置网站使用asp.net forms 身份认证方式: <configuration> <system.web> <authen ...
- GCD初步认识
//(1)用异步函数往并发队列中添加任务, //总结:同时开启三个子线程 - (void)test1 { //1.获得全局的并发队列 dispatch_queue_t queue = dispatch ...
- 处理HTTP状态码
1.1.4 处理HTTP状态码 上一节介绍HttpClient访问Web资源的时候,涉及HTTP状态码.比如下面这条语句: int statusCode=httpClient.executeMeth ...
- ***PHP preg_match正则表达式的使用
第一,让我们看看两个特别的字符:‘^’和‘$’他们是分别用来匹配字符串的开始和结束,以下分别举例说明 : "^The": 匹配以 "The"开头的字符串; &q ...
- HDU 1026 Ignatius and the Princess I (BFS)
题目链接 题意 : 从(0,0)点走到(N-1,M-1)点,问最少时间. 思路 : BFS..... #include <stdio.h> #include <string.h> ...
- VS2003 下GridControl的列显示成图片+文字的形式实现
public RC_CustomerSolicitListUC() { // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: ...
- hdu 1526(最大匹配)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1526 思路:floyd求传递闭包,然后就是最大匹配了,不过一开始输入没看清,被坑了将近2个小时. #i ...