1. app.js

var app=angular.module("myApp",["ionic","myController","serviceController"]);
app.config(function(){});

2. controller.js

angular.module("shopcontroller",[])
.controller("listController",function(listservice,$scope){
$scope.getData=function(){
listservice.getData(function(list){
$scope.data=list;
// 广播
$scope.$broadcast('scroll.infiniteScrollComplete');
})
};
$scope.flag=function(){
return listservice.hasData();
}
})
.controller("listDatailController",function($stateParams,listservice,$scope,$sce){
var id=$stateParams.id;
listservice.getOneData(id,function(data){
$scope.datail=data.result[0].content;
$scope.datail=$sce.trustAsHtml($scope.datail);
}); });

3. service.js

1.回调函数拿数据

angular.module("serivecontroller",[])
.service("listservice",function($http){
var list=[];
var page=1;
var flag=true;
return{
getData:function(callback){ if(flag){
var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page="+page+"&callback=JSON_CALLBACK"; $http.jsonp(myUrl).success(function(data){
list=list.concat(data.result);
callback(list);
page++;
if(data.result.length<20){
flag=false;
} }).error(function(){
alert("加载错误");
});
}
},
hasData:function(){
return flag;
} ,
getOneData:function(id,callback){ var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid="+id+"&callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(function(data){
callback(data);
}).error(function(){
alert("加载错误");
});
}
}
});

2.广播获取数据

拿到请求数据也可以不用回调函数,用广播来实现

service.js代码:

requestData:function(){
var myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page="+page+"&callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(function(data){
list=list.concat(data.result); //广播 数据拿到以后告诉controller 去拿数据 这里广播的名字(newsListUpdata)自己起,但是有唯一性 广播的同时也可以传数据
$rootScope.$broadcast('newsListUpdata',list);
page++;
})
}

controller.js代码

/*接收到广播以后去拿数据,newsListUpdata与服务里广播的名字一致*/
$scope.$on('newsListUpdata',function(eve,data){ /*这里得到的数据不会乱码,不需要再用$sce去解析*/
$scope.list=data;
/*拿到数据就到广播上拉刷新*/
$scope.$broadcast('scroll.infiniteScrollComplete');
})
/*触发loadMore就调请求数据函数,但是收到广播时才去调用获取数据函数*/
$scope.loadMore=function(){
newsService.requestData();
}

ionic--分模块的更多相关文章

  1. 分模块创建maven项目(一)

    maven是一个项目构建和管理的工具. 我们可以通过maven仓库可以实现管理构建(主要是JAR还包括:WAR,ZIP,POM等等). 我们可以通过maven插件可以实现编译源代.产生Javadoc文 ...

  2. Maven02——回顾、整合ssh框架、分模块开发、私服

    1 回顾 1.1 Maven的好处 节省空间 对jar包做了统一管理 依赖管理 一键构建 可跨平台 应用在大型项目可提高开发效率 1.2 Maven安装部署配置 1.3 Maven的仓库 本地仓库 远 ...

  3. 若依项目分模块集成uflo2

    关于若依分模块创建项目可参考:https://www.cnblogs.com/conswin/p/9766186.html 了解uflo2,uflo2是一套由BSTEK自主研发的基于Java的工作流引 ...

  4. java分模块项目在idea中使用maven打包失败(ps:maven常用到的命令)

    一.分模块项目打包失败 情况:项目是分模块创建的,一些公共的方法是单独的一个模块common,其他模块依赖于此模块,poom依赖已经添加了,项目可以正常运行,但使用maven打包时出现了问题:找不到依 ...

  5. 配置动态加载模块和js分模块打包,生产环境和开发环境公共常量配置

    1. 话不多少 先上代码:  route.js  // 引用模板 分模块编译 const main = r => require.ensure([], () => r(require('. ...

  6. SSH框架分模块开发

    ------------------siwuxie095 SSH 框架分模块开发 1.在 Spring 核心配置文件中配置多个内容,容易造成 配置混乱,不利于维护 「分模块开发主要针对 Spring ...

  7. Spring_day04--HibernateTemplate介绍_整合其他方式_Spring分模块开发

    HibernateTemplate介绍 1 HibernateTemplate对hibernate框架进行封装, 直接调用HibernateTemplate里面的方法实现功能 2 HibernateT ...

  8. Struts2_day01--Struts2的核心配置文件_常量配置_分模块开发_Action编写方式

    Struts2的核心配置文件 1 名称和位置固定的 2 在配置文件中主要三个标签 package.action.result,标签里面的属性 标签package 1 类似于代码包,区别不同的actio ...

  9. Struts2分模块开发

    -------------------siwuxie095 Struts2 分模块开发 在实际开发中,如果一个项目是团队开发的,也就是很多人开发的, 每个人都需要去修改 struts.xml,因为 s ...

  10. SpringBoot23 分模块开发

    1 开发环境说明 JDK:1.8 MAVEN:3.5 IDEA:2017.2.5 SpringBoot:2.0.3.RELEASE 2 创建SpringBoot项目 2.1 项目信息 2.2 添加项目 ...

随机推荐

  1. python实现数据库增删改查

    column_dic = {"id": 0, "name": 1, "age": 2, "phone": 3, &quo ...

  2. C#高效新增数据到数据库(十万级别测试)

    我们在对数据库进行新增数据时,怎么能把速度提到最快,时间缩到最短呢?下面针对三种方法进行比较 新增 逐条新增数据模式 Stopwatch s2 = new Stopwatch(); s2.Start( ...

  3. net与树莓派的情缘(二)

    虽然我们可以很方便的通过ssh譬如putty或者vnc连接操控树莓派,但是毕竟树莓派资源没那么高,在上面编程,调试要吃力的多.所以还是想在pc上编程上传到树莓派或者最好,文件共享,可以直接读写共同的文 ...

  4. (转)QEMU 使用的镜像文件:qcow2 与 raw

    原文:https://www.ibm.com/developerworks/cn/linux/1409_qiaoly_qemuimgages/ qcow2 的基本原理 qcow2 镜像格式是 QEMU ...

  5. redux概念介绍

    这一部分仅仅介绍react基本的概念,因为react不仅仅可以用在react中,还可以用在其他框架甚至原生 js 中.  所以这里只介绍通用的概念. redux使用场景 redux和vue中的vuex ...

  6. RabbitMQ初学之一:exchange与queue的绑定

    最近公司需要使用RabbitMQ,但我之前一直使用的是ActiveMQ,对RabbitMQ进行了初步的学习,但是还不系统,自己做了一些小测试,怕自己以后忘了 一. 背景 拿到代码以后,发现,生产者在向 ...

  7. javascript的JSON对象

    JSON包含用于解析JSON(javascript object notation)的方法,将值转换成JSON.JSON不可以被调用或者用作构造函数. JSON对象保存在大括号内,JSON数组保存在中 ...

  8. hadoop-2.6.0-cdh5.4.5.tar.gz(CDH)的3节点集群搭建(含zookeeper集群安装)

    前言 本人呕心沥血所写,经过好一段时间反复锤炼和整理修改.感谢所参考的博友们!同时,欢迎前来查阅赏脸的博友们收藏和转载,附上本人的链接 http://www.cnblogs.com/zlslch/p/ ...

  9. JVM虚拟机指令

    参考及转载: (1)https://blog.csdn.net/qq_33301113/article/details/73717855 (2)https://blog.csdn.net/wangxf ...

  10. JavaScript设计模式-12.门面模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...