先给大家分享下ionic的网站，适合像这样的天气坐在家里研究代码~
http://www.ionic.wang/
博主是个比较糙妹子，永远都是言简意骇，怎么说呢，一句话来解释$ionicLoading 和 $ionicBackdrop的区别就是：$ionicLoading 是带有弹出窗口的，而$ionicBackdrop只有一个遮罩层，二话不说先上图；
$ionicLoading 的效果图
$ionicBackdrop 效果图
$ionicLoading代码如下：
<html ng-app="myApp"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /><title></title><link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" /><script src="js/lib/ionic1/js/ionic.bundle.min.js"></script></head><body ng-controller="myCtrl"><!--页头--><ion-header-bar align-title="center" class='bar-balanced'><div class="buttons"><button class="button" ng-click="dosomthing()">左侧按钮</button></div><h1 class="title">页头标题</h1><div class="buttons"><button class="button" ng-click='dosomting()'>右侧按钮</button></div></ion-header-bar><!--<!pulling-icon="icon ionperson"--加加载图标--><!--on-refresh="refresh()"加载执行函数--><!--内容部分--><ion-content><ion-refresher pulling-icon="icon ion-person" pulling-text="下拉刷新。。" on-refresh="refresh()" refreshing-text="正在刷新请稍后..."></ion-refresher><div class="list"><div ng-repeat="g in good"class="item"><span ng-bind="g"></span></div></div></ion-content><!--脚注部分--><ion-footer-bar align-text="left" class="bar-dark"><h1 class="title">页脚部分</h1></ion-footer-bar></body></html>
<script>var app=angular.module("myApp",["ionic"]);app.controller("myCtrl",function($scope,$ionicLoading,$timeout){$scope.good=[];for(var i=0;i<20;i++){$scope.good.push("item lin"+i);}$scope.refresh=function(){console.log("正在刷新页面数据");$scope.good=[];for(var i=0;i<20;i++){$scope.good.push("new item lin"+i);}$ionicLoading.show({template:"页面正在刷新中..."})$timeout(function(){$ionicLoading.hide();},2000)$scope.$broadcast("scroll.refreshComplete");}})</script>
$ionicBackdrop代码如下：
<!DOCTYPE html><html ng-app="myApp"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /><title></title><link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" /><script src="js/lib/ionic1/js/ionic.bundle.min.js"></script></head><body ng-controller="myCtrl"><!--页头--><ion-header-bar align-title="center" class='bar-balanced'><div class="buttons"><button class="button" ng-click="dosomthing()">左侧按钮</button></div><h1 class="title">页头标题</h1><div class="buttons"><button class="button" ng-click='dosomting()'>右侧按钮</button></div></ion-header-bar><!--<!pulling-icon="icon ionperson"--加加载图标--><!--on-refresh="refresh()"加载执行函数--><!--内容部分--><ion-content><ion-refresher pulling-icon="icon ion-person" pulling-text="下拉刷新。。" on-refresh="refresh()" refreshing-text="正在刷新请稍后..."></ion-refresher><div class="list"><div ng-repeat="g in good"class="item"><span ng-bind="g"></span></div></div></ion-content><!--脚注部分--><ion-footer-bar align-text="left" class="bar-dark"><h1 class="title">页脚部分</h1></ion-footer-bar></body></html>
<script>var app=angular.module("myApp",["ionic"]);app.controller("myCtrl",function($scope,$timeout,$ionicBackdrop){$scope.good=[];for(var i=0;i<20;i++){$scope.good.push("item lin"+i);}$scope.refresh=function(){console.log("正在刷新页面数据");$scope.good=[];for(var i=0;i<20;i++){$scope.good.push("new item lin"+i);}$ionicBackdrop.retain();$timeout(function(){$ionicBackdrop.release();},1000)$scope.$broadcast("scroll.refreshComplete");}})</script>
闲暇时刻整理出来的小零碎，希望能够帮您解决问题；
