AngularJs 自定义ajax服务为请求添加加载动画

一、此处示例使用iconic的动画加载

1.自定义ajax服务封装

//全局配置请求处理
app.service('$ajax', function ($http, $ionicLoading) {
this.get = function (url, data, onSuccess, onError) {
$ionicLoading.show(); //显示动画
$http.get(url, {
param: data
})
.then(function (result) {
if (result.status == 200) {
if (onSuccess)
onSuccess(result.data);
} else {
if (onError)
onError(result.data);
}
$ionicLoading.hide(); //隐藏动画
}).catch(function (err) {
console.error(err);
if (onError)
onError(err.data);
$ionicLoading.hide(); //隐藏动画
});
}
});2.页面内容
<div class="list">
<div class="item">
<button class="button button-balanced" ng-click="show($event);">加载</button>
</div>
</div>
<ion-content overflow-scroll="false">{{content}}</ion-content>
3.使用实例

var app = angular.module('myApp', ['ionic']);
//全局配置加载动作
app.constant('$ionicLoadingConfig', {
template: '<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>',
animation: 'fade-in'
});

app.controller('myCtrl', function ($scope, $http, $ajax) {
$scope.show = function ($event) {
//显示加载
$ajax.get('http://www.gongjuji.net', {}, function (data) {
$scope.content = data;
});
$event.stopPropagation();
}
});

显示效果：





更多：

AngularJs $http 请求服务整理

AngularJs constant()和value()

AngularJS阻止事件冒泡$event.stopPropagation()