我想一直显示 Splashscreen,直到我的应用程序结束以从不同的 Api 调用获取多个数据。隐藏 Splashscreen 的代码基于 Timer,我不希望这样:
app.run(function($cordovaSplashscreen) {
setTimeout(function() {
$cordovaSplashscreen.hide()
}, 5000)
})
我目前的行为是启动画面显示 5 秒,然后出现空白页面中的第一个 View ,仅几秒钟后,数据将在我的 View 中可见。
我的问题是:如何在我的 app.js 中添加逻辑以仅在 API 调用完成时隐藏启动画面,这样用户将看到第一个 View ,其中包含所有可用数据。
最佳答案
你可以做的是等待所有请求完成 $q.all(promises)
使用 angularjs
内置的 promise 库。在成功函数中,您可以在 Controller 中调用 $cordovaSplashscreen.hide()
来隐藏闪屏,如 user46772已经提到了。示例代码:
index.html
<body ng-controller="AppController"></body>
app.js
var module = angular.module( "app", [ "ngCordova", "yourServices" ] )
module.config( ... );
module.run( ... );
module.controller( "ApplicationController", ApplicationController );
function ApplicationController( $cordovaSplashscreen, $q, apiCallService ) {
loadData();
function loadData() {
$q.all( apiCallService.loadFoo1, apiCallService.loadFoo2, apiCallService.loadFoo3)
.then( onSuccess, onError );
function onSuccess() {
$cordovaSplashscreen.hide()
}
function onError() {
// do something useful else
}
}
}
yourServices.js
angular
.module( "yourServices", [ "$http" ] )
.factory( "apiCallService", apiCallService );
function apiCallService( "$http" ) {
return {
loadFoo1: loadFoo1,
loadFoo2: loadFoo2,
loadFoo3: loadFoo3
}
function loadFoo1() {
return $http.get( "yourAPI" );
}
...
}
请注意,此代码不是工作示例。但它应该解释你如何继续解决你的问题。此外,您还必须考虑如果您的一个请求在 onError()
函数中失败时会发生什么情况。
此外,您应该将代码包装到 onDeviceReady
中事件。假设您正在使用 ionic
,您可以使用这段代码:
$ionicPlatform.ready( loadData );
不要忘记将 $ionicPlatform
注入(inject)到 Controller 函数中。
关于javascript - api调用完成后 ionic 隐藏启动画面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35701370/