ionic--分模块
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--分模块的更多相关文章
- 分模块创建maven项目(一)
maven是一个项目构建和管理的工具. 我们可以通过maven仓库可以实现管理构建(主要是JAR还包括:WAR,ZIP,POM等等). 我们可以通过maven插件可以实现编译源代.产生Javadoc文 ...
- Maven02——回顾、整合ssh框架、分模块开发、私服
1 回顾 1.1 Maven的好处 节省空间 对jar包做了统一管理 依赖管理 一键构建 可跨平台 应用在大型项目可提高开发效率 1.2 Maven安装部署配置 1.3 Maven的仓库 本地仓库 远 ...
- 若依项目分模块集成uflo2
关于若依分模块创建项目可参考:https://www.cnblogs.com/conswin/p/9766186.html 了解uflo2,uflo2是一套由BSTEK自主研发的基于Java的工作流引 ...
- java分模块项目在idea中使用maven打包失败(ps:maven常用到的命令)
一.分模块项目打包失败 情况:项目是分模块创建的,一些公共的方法是单独的一个模块common,其他模块依赖于此模块,poom依赖已经添加了,项目可以正常运行,但使用maven打包时出现了问题:找不到依 ...
- 配置动态加载模块和js分模块打包,生产环境和开发环境公共常量配置
1. 话不多少 先上代码: route.js // 引用模板 分模块编译 const main = r => require.ensure([], () => r(require('. ...
- SSH框架分模块开发
------------------siwuxie095 SSH 框架分模块开发 1.在 Spring 核心配置文件中配置多个内容,容易造成 配置混乱,不利于维护 「分模块开发主要针对 Spring ...
- Spring_day04--HibernateTemplate介绍_整合其他方式_Spring分模块开发
HibernateTemplate介绍 1 HibernateTemplate对hibernate框架进行封装, 直接调用HibernateTemplate里面的方法实现功能 2 HibernateT ...
- Struts2_day01--Struts2的核心配置文件_常量配置_分模块开发_Action编写方式
Struts2的核心配置文件 1 名称和位置固定的 2 在配置文件中主要三个标签 package.action.result,标签里面的属性 标签package 1 类似于代码包,区别不同的actio ...
- Struts2分模块开发
-------------------siwuxie095 Struts2 分模块开发 在实际开发中,如果一个项目是团队开发的,也就是很多人开发的, 每个人都需要去修改 struts.xml,因为 s ...
- SpringBoot23 分模块开发
1 开发环境说明 JDK:1.8 MAVEN:3.5 IDEA:2017.2.5 SpringBoot:2.0.3.RELEASE 2 创建SpringBoot项目 2.1 项目信息 2.2 添加项目 ...
随机推荐
- python学习,day4:装饰器的使用示例
---恢复内容开始--- 装饰器:本质是函数,(装饰其他函数)就是为其他函数添加附加功能 装饰器有其独特的原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 例子 import ...
- Unity3D实现随机播放背景音频
1.先在第一人称下新建空白物体,命名“audio” 2.在audio中加入Audio Source 3.在第一人称组件里添加Audio Liistener和Audio脚本 4.脚本中添加代码 usin ...
- Scrapyd API的安装
安装好了Scrapyd之后,我们可以直接请求它提供的API来获取当前主机的Scrapy任务运行状况.比如,某台主机的IP为192.168.1.1,则可以直接运行如下命令获取当前主机的所有Scrapy项 ...
- 服务器端控件同html控件的区别
●ASP.NET中共有几种类型的控件? 三种:1-asp.net控件(动态) 2-标准的html控件(静态) 3-标准的html控件加runat="server"属性(动态) 动态 ...
- java容器类1:Collection,List,ArrayList,LinkedList深入解读
1. Iterable 与 Iterator Iterable 是个接口,实现此接口使集合对象可以通过迭代器遍历自身元素. public interface Iterable<T> 修饰符 ...
- C# 委托进阶
本文参考自:https://wenku.baidu.com/view/41ab91d3c1c708a1284a44d7.html?qq-pf-to=pcqq.c2c 1.为什么委托定义的返回值通常为v ...
- 1-2 Mobx 入门实践之TodoList(官方Demo)
第一步:导入模块 import React, { Component } from 'react'; import { observable, autorun,computed } from 'mob ...
- BackgroundWorker的简单用法
微软的官方例子 BackgroudWorker就是一个封装好的异步处理类(就是多线程,广泛用于winform开发中) 例子: 1.界面效果: 一个label,两个button 2.Form2.cs的代 ...
- 13 Timer和TimerTask
下面内容转载自:http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer来讲就是一个调度器,而TimerTask呢只是一个实现了ru ...
- R语言paste函数
中许多字符串使用 paste() 函数来组合.它可以将任意数量的参数组合在一起. 语法 粘贴(paste)函数的基本语法是: paste(..., sep = " ", colla ...