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 添加项目 ...
随机推荐
- mysql随机取出若干条记录的实用方法
1.常见的方法 ; 这种方法可以随机取得数据,但是如果表比较大,数据量很多的时候会很耗时. 2.优化后的方式 ) as t ); 分析,首先根据条件筛选出要选的数据,然后随机排序取出要的条数的id , ...
- P2051 中国象棋
P2051 中国象棋 题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中 ...
- c# timer使用
C#里现在有3个Timer类: System.Windows.Forms.Timer System.Threading.Timer System.Timers.Timer 这三个Timer我想大家对S ...
- Android 4.4 KitKat终于支持录屏(Screen Recording)了!
本文介绍了Android 4.4 KitKat系统新增加的录屏功能以及录屏方法,和限制因素.如果App由于版权方面的原因,不想被记录屏幕录像的话,APP只需要在相应的SurfaceView请求“Sur ...
- [DPF] DPF 常见的问题
问题一: SQL6031N Error in the db2nodes.cfg file at line number "5". Reason code "12&qu ...
- android studio ndk 开发入门
ndk 开发没什么神秘的ndk 说白了就是一个交叉编译的工具链,用它来生成各个CPU架构下的静态或动态链接库,linux 下就是 .a 和 .so 文件.原理就是 java 通过 JNI 和 C.C+ ...
- PHP将字符串写入txt文件
function writelog($str) { $open=fopen("e:\log.txt","a" ); fwrite($open,$str); fc ...
- POJ 3481 Double Queue(set实现)
Double Queue The new founded Balkan Investment Group Bank (BIG-Bank) opened a new office in Buchares ...
- Ruby(1):入门
安装: 一般来说linux会自动装ruby,可以通过: ruby -v 来查看ruby版本 直接使用ruby命令的话,是用来执行ruby文件的.如果要打开交互式ruby解释器.只需要在控制台输入:ir ...
- 【angular5项目积累总结】http请求服务封装
http.provider.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/co ...