离子加载数据THEN显示主页

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请求完成后返回一个承诺对象。

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

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; 
    }); 

我假定了不少关于你的应用程序（状态，模块名称等），但我希望这作为一个起点。

所有相关来源：

angular $q和ui-router state resolves

Answer 2

让每个函数获取数据回报$ http调用结果将是一个承诺。使用$ q.all并将它传递给promises数组，$ q.all的调用将返回一个承诺，该承诺在所有其他异步调用解决时解析。使用像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 
});