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 添加项目 ... 
随机推荐
- Docker安装MongoDb
			1.下载镜像 docker pull mongo 2.运行mongo docker run --name mongo -v /data/mongodb:/data/db -p : -d mongo - ... 
- 洛谷 P2480 [SDOI2010]古代猪文 题解【欧拉定理】【CRT】【Lucas定理】
			数论综合题. 题目背景 题目背景与题目无关因此省略.题目链接 题目描述 猪王国的文明源远流长,博大精深. iPig 在大肥猪学校图书馆中查阅资料,得知远古时期猪文文字总个数为 \(N\).当然,一种语 ... 
- (转)mysql、innodb和加锁分析
			mysql.innodb和加锁分析 原文:https://liuzhengyang.github.io/2016/09/25/mysqlinnodb/ 介绍 本文主要介绍MySQL和InnoDB存储引 ... 
- 第十篇--------javascript函数-参数
			javascript函数的参数:形参,实参 //function 参数 //形参列表 function test(a,b,c,d){ //alert(test.length); //形参个数,4个 / ... 
- mongodb启动失败:child process failed, exited with error number 100
			参考 http://www.dataguru.cn/thread-107361-1-1.html 里面的路径 根据自己的--dbpath的路径 和l--logpath路径去找 
- 将静态网页部署到git上访问
			1.将已有的项目放在github上 http://www.cnblogs.com/zqunor/p/6583182.html 2.出现错误解决方案 提交错误 http://blog.csdn.net/ ... 
- Java网络编程(二)关于Socket的一些个人想法
			1.Socket之间是如何通信的? 1.1 通信是要两两之间进行的所以应该有至少一个客户端(Client)和一个服务器端(Server),一般来说都是多个c端对一个s端---c\s 1.2 在客户端: ... 
- 很乱,临时保存,自定义v-model
			<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ... 
- javaweb 实现跨域
			现在的一个web应用会涉及到多个地方的restAPi的调用,传统的jsonp虽然支持跨域,但是只是支持get请求. 传统的ajax请求是不支持跨域的,是为了安全考虑. 跨域的思路是跟http机制有关, ... 
- ASP.NET Core 的启动和运行机制
			目录 ASP .NET Core 的运行机制 ASP .NET Core 的启动 ASP .NET Core 的管道和中间件 参考 ASP .NET Core 的运行机制 Web Server: AS ... 
