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()