API 调用完成后的离子隐藏启动画面

ionic hide splashscreen after api call are completed

本文关键字：隐藏 启动 动画 调用 API      更新时间：2023-09-26

我想保持初始屏幕显示，直到我的应用程序结束从不同的 API 调用获取多个数据。隐藏初始屏幕的代码基于计时器，我不希望这样：

 app.run(function($cordovaSplashscreen) {
    setTimeout(function() {
    $cordovaSplashscreen.hide()
  }, 5000)
 })

我目前的犯罪行为是启动画面显示 5 秒，然后在空白页中出现第一个视图，几秒钟后，数据才会在我的视图中可见。

我的问题是：如何在我的应用程序中添加逻辑.js仅在 API 调用完成后隐藏初始屏幕，以便用户将看到包含所有可供使用的数据的第一个视图。

你可以做的是使用内置的 promise 库等待所有请求完成angularjs $q.all(promises)。在成功函数中，您可以在控制器中调用$cordovaSplashscreen.hide()以隐藏启动画面，如已经提到的user46772所示。示例代码：

索引.html 

<body ng-controller="AppController"></body>

应用.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
        }
    }
}

您的服务.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注入控制器功能。

在运行块上，我没有看到任何函数调用来获取数据。如果您的 API 是基于承诺的，则可以隐藏成功或错误函数的初始屏幕。 但我也不鼓励你从运行块调用它，因为它可能会导致难以检测到的问题。

我建议使用ui-router并尝试解析功能。此函数在过渡到视图之前加载。

相关文章：