Question

在我的Ionic应用程序中，我在应用程序的开头加载所有数据（通过http请求）。

我想确保我的所有http请求都已完成，然后显示主页。与此同时，我们的想法是显示加载屏幕。

最好的方法是什么？

angular.module('App.Common', [])
    .service('myData', function($http, API_URL) {
        this.initData = function() {
            self.getDataType2(); //calls http request
            self.getDataType2(); //calls http request
            self.getDataType3(); //calls http request
            self.getDataType4(); //calls http request
            self.getDataType5(); //calls http request
            self.getDataType6(); //calls http request
        };
});


angular.module('App.Home', [])

.controller('Ctrl', function(myData) {
    myData.initData();
});

在我的home.html中，当initData（）没有完成时，我会显示一个加载页面。

我知道加载部分将使用此代码

  $ionicLoading.show({
    content: 'Loading',
    animation: 'fade-in',
    showBackdrop: true,
    maxWidth: 200,
    showDelay: 0
  });

但是如何/何时使用

$ionicLoading.hide();

任何帮助将不胜感激

Answer 1

首先，您需要确保所有请求都已解决

为了实现这一目标，您可以使用内置的$ q服务。您最终会得到这样的服务：

angular.module('App.Common', [])
    .service('myData', function($q, $http, API_URL) {
        this.initData = function() {
            return $q.all([
                self.getDataType1(); //calls http request
                self.getDataType2(); //calls http request
                self.getDataType3(); //calls http request
                self.getDataType4(); //calls http request
                self.getDataType5(); //calls http request
                self.getDataType6(); //calls http request
            ]).then(function(data1, data2, data3, ...) {
                return { data1: data1, ... };
            });                
        };
    });

这将为您提供initData方法，该方法在完成所有http请求后返回promise对象。

然后，为了防止在数据准备好之前加载视图，您需要配置状态以使用解析数据。

angular
    .module('App', ['ionic', 'App.Common'])
    .config(function($stateProvider) {
        $stateProvider.state('home', {
            url: '/home',
            views: {
                '': {
                    templateUrl: '/path-to-your-state-view',
                    controller: 'HomeController'
                }
            },
            resolve: {
                data: function($ionicLoading, myData) {
                    $ionicLoading.show();

                    return myData.initData().finally($ionicLoading.hide);
                }
            }
        });
    });

最后，您必须告诉控制器等待加载该解析依赖项。

angular
    .module('App')
    .controller('HomeController', function($scope, data) {
        $scope.data = data;
    });

我对你的app（状态，模块名称等）有很多假设，但我希望这可以作为一个起点。

所有相关来源均为：

angular $q和ui-router state resolves

Answer 2

让每个获取数据的函数都返回$ http调用结果，这将是一个承诺。使用$ q.all并将它传递给promise数组，调用$ q.all将返回一个在所有其他异步调用解析时解析的promise。使用像scope.model.loading这样的变量，或者可以是服务的属性，并在$ q.all处理程序中调用init和false之前将其设置为true。在视图中使用该变量来决定要显示的内容。

angular.module('App.Common', [])
    .service('myData', function($http, API_URL) {
        this.dataLoaded = false;
        this.initData = function() {

            let data2 = self.getDataType2(); //calls http request
            let data3 = self.getDataType2(); //calls http request
            let data4 = self.getDataType3(); //calls http request
            let data5 = self.getDataType4(); //calls http request
            let data6 = self.getDataType5(); //calls http request
            let data7 = self.getDataType6(); //calls http request

            return $q.all([data2,data3,data4,data5,data6,data7]).then(function(){
              self.dataLoaded = true;
            })
        };
});


angular.module('App.Home', [])

.controller('Ctrl', function($scope, myData) {
    myData.initData();
    $scope.myData = myData; // in the view you can just bind to myData.dataLoaded in an ng-if or ng-show to toggle showing/hiding certain parts
});

离子加载数据然后显示主页

2 个答案: