添加加载条 Ionic App - Angular答案

【问题标题】：Adding loading bar Ionic App - Angular添加加载条 Ionic App - Angular
【发布时间】：2015-08-28 10:42:04
【问题描述】：

我如何在两条路线之间添加loading or please waiting。

例如，当我转到 details.html 之类的页面时，此文件具有 http 直到页面加载用户看到一个空白页面。

我想要这样的东西：

工厂

 .factory('DrupalNode', function ($http, $stateParams, REMOTE_URL) {

        return {
            node: $http.get(REMOTE_URL + 'all/')

//////////////// please wait

        }
    });

控制器

app.controller('detailController', function($scope, DrupalNode, $state, $window){

    DrupalNode.node.success(function(data){  

/////////disappear waiting text 


        $scope.innerData = data;
        $scope.whichArticle = $state.params.Nid;
        console.log(data);


    });
    $scope.goBack = function() {
        $window.history.back();
    };

});

【问题讨论】：

标签： angularjs ionic-framework angular-ui-router

【解决方案1】：

使用 ionic 的$ionicLoading 服务。在控制器开始时调用它的show() 函数，当你从 api 得到响应时调用它的hide()。

  app.controller('detailController', function($scope, DrupalNode, $state, $window, $ionicLoading){
            $ionicLoading.show({
              template: 'Loading text goes here...'
            });
            DrupalNode.node.success(function(data){  
            $ionicLoading.hide();
        /////////disappear waiting text 


                $scope.innerData = data;
                $scope.whichArticle = $state.params.Nid;
                console.log(data);


            });
            $scope.goBack = function() {
                $window.history.back();
            };

        });

如果你想在加载时显示一些文本，然后像这样使用show()

    $ionicLoading.show({
      template: 'Loading text goes here...'
    });

【讨论】：

谢谢，我应该把这个 $ionicLoading.show({ template: 'Loading text goes here...' }); ?
@sani 我在我的答案中编辑了代码。请看代码，我在DrupalNode.node.success(function(data){之前的控制器开始处使用它
谢谢一百万，我们可以在这里添加一个 gif 或动画吗？
默认已经有 gif。如果您只使用 $ionicLoading.show() 而不使用 template 选项，它将显示一个微调器。

【解决方案2】：

你可以创建一个 http 拦截器，这样每次加载都会显示 http 请求，你可以在下面看到我的示例

首先你必须提供服务：

    app.service('LoadingInterceptor', function($rootScope, localStorage, notifications) {
    return {
        request: function(config) {
            if (!(config && config.data && config.data.control && config.data.control.pageOffset !== 0)) {
                $rootScope.$broadcast('loading:show');
            }
            return config
        },

        response: function(response) {
            $rootScope.$broadcast('loading:hide');
             return response
        } 
    }
})

然后你必须把这个服务推送到 httpProvider

   app.config([
   '$httpProvider',


   function($httpProvider) {

       $httpProvider.interceptors.push('LoadingInterceptor');

   }

])

然后你需要制作你的模板并调用 $ioniLoading 来显示和隐藏

  app.run(function( $rootScope, localStorage, $ionicLoading) {

            //on broadbanding a 'loading:show' $ionicLoading will appear
            $rootScope.$on('loading:show', function() {
                $ionicLoading.show({
                    template: "Loading...<br/><ion-spinner icon='lines' class='spinner-assertive'></ion-spinner>",
                    noBackdrop: true
                })
            })

            //on broadbanding a 'loading:hide' $ionicLoading will hide
            $rootScope.$on('loading:hide', function() {
                $ionicLoading.hide()
            })

        });

【讨论】：