api调用完成后的离子隐藏闪屏答案

【问题标题】：ionic hide splashscreen after api call are completedapi调用完成后的离子隐藏闪屏
【发布时间】：2016-02-29 13:54:28
【问题描述】：

我想一直显示 Splashscreen，直到我的应用程序最终从不同的 Api 调用中获取多个数据。隐藏 Splashscreen 的代码基于 Timer，我不希望这样：

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

我的当前行为是闪屏显示 5 秒钟，然后出现在空白页面中的第一个视图，仅在几秒钟后，数据将在我的视图中可见。

我的问题是：如何在我的 app.js 中添加逻辑以仅在 API 调用完成后隐藏 Splashscreen，这样用户将看到所有数据可供使用的第一个视图。

【问题讨论】：

标签： javascript angularjs api ionic-framework splash-screen

【解决方案1】：

您可以做的是等待所有请求通过 $q.all(promises) 使用 angularjs 内置承诺库完成。在成功函数中，您可以在控制器中调用$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 注入到控制器函数中。

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，很抱歉，如果它令人困惑，但 Api 调用是在专用于它的外部工厂中进行的，我将这个工厂注入到我的控制器中，女巫需要显示数据，但我需要整个逻辑可能（如果可能）在显示 Splashscreen 时调用我的工厂，然后根据您建议的成功承诺将其隐藏。